/* ==========================================================================
   GA Panels — panneaux du calendrier de Garde Alternée (étape 23b, #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 mois, Bureau année, Tablette
   portrait mois, Téléphone mois, Téléphone sélection) et Tablette paysage et
   mode sombre.dc.html (Tablette paysage mois).

   Structure BEM :
   - .side__title              → Intitulé en capitales d'un panneau (avec .caps)
   - .counter                  → Compteur : lignes parent / écart / report
     - .counter__row           → Une ligne (repère, libellé, valeur), filet bas
     - .counter__key           → Repère (pastille du parent, ou vide)
     - .counter__value         → Valeur en gras, chiffres tabulaires
     - .counter__dot           → Point du parent qui a l'avance (--p1, --p2)
     - .counter__balance       → « Solde de fin d'année » : carte bg (bureau)
   - .counter-strip            → Téléphone : trois cartes (parent 1, parent 2, solde)
   - .upcoming                 → Liste « À venir »
     - .upcoming__item         → Un élément (bouton : ouvre le jour)
     - .upcoming__dot          → Repère : --cat-*, --hole, --ferie, --p1-p2, --p2-p1
     - .upcoming__when         → Date courte (12 px, muted)
     - .upcoming__text         → Texte, teinté par l'événement (75 % couleur + 25 % encre)
   - .legend                   → Légende du mois en trois groupes
     - .legend--stack          → Intitulé au-dessus, deux colonnes (bureau, colonne)
     - (défaut)                → Intitulé à gauche (96 px), une ligne par groupe (tablette)
     - .legend__chip           → Pastille du parent (initiale sur sa couleur, --p1, --p2)
     - .legend__hole           → « À attribuer » (hachure + filet)
     - .legend__vac            → Barre des vacances, --ferie : férié
   - .legend-year              → Légende de la vue année (liste) + .legend-year__hint
   - .sel-tray                 → Barre de sélection (nombre, Annuler, attribuer, Effacer)
   - .sel-hint                 → Aide « un doigt peint » (téléphone)

   Accessibilité :
   - Les repères (pastilles, points, hachures) sont aria-hidden : le texte voisin
     dit la même chose ; le point d'avance du compteur est doublé d'un texte .sr-only.
   - .upcoming__item et .sel-tray__assign sont des boutons de 44 px au moins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   INTITULÉS
   -------------------------------------------------------------------------- */
.side__title {
  margin: 0;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   COMPTEUR
   -------------------------------------------------------------------------- */
.counter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.counter__row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-bottom: 6px;
  border-bottom: var(--border-hair) solid var(--color-border);
  font-size: var(--font-size-md);
}

.counter__key {
  flex: none;
  width: 24px;
}

.counter__key.legend__chip {
  height: 24px;
  border-radius: 8px;
  font-size: 12px;
}

.counter__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.counter__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.counter__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
}

.counter__dot--p1 { background-color: var(--parent-1); }
.counter__dot--p2 { background-color: var(--parent-2); }

.counter__balance {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
}

.counter__balance-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.counter__balance-value {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.counter__balance-value .counter__dot {
  width: 12px;
  height: 12px;
}

/* Bandeau de trois cartes (téléphone) */
.counter-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}

.counter-strip__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.counter-strip__label {
  overflow: hidden;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.counter-strip__value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   À VENIR
   -------------------------------------------------------------------------- */
.upcoming {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.upcoming__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--tap-min);
  margin: 0;
  padding: 4px 6px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.upcoming__item:hover {
  background-color: var(--color-surface-hover);
}

.upcoming__item:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: -2px;
}

.upcoming__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.upcoming__empty {
  padding: 4px 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.upcoming__dot {
  flex: none;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  transform: translateY(1px);
}

.upcoming__dot--hole {
  background: repeating-linear-gradient(135deg, var(--color-surface) 0 2px, var(--color-text-muted) 2px 3px);
  box-shadow: inset 0 0 0 1.5px var(--color-text-muted);
}

.upcoming__dot--ferie {
  border-radius: 2px;
  background-color: var(--color-text);
  transform: rotate(45deg) scale(0.8);
}

.upcoming__dot--p1-p2 { background: linear-gradient(90deg, var(--parent-1) 50%, var(--parent-2) 50%); }
.upcoming__dot--p2-p1 { background: linear-gradient(90deg, var(--parent-2) 50%, var(--parent-1) 50%); }
.upcoming__dot--cat-anniversaire { background-color: var(--cat-anniversaire); }
.upcoming__dot--cat-medical { background-color: var(--cat-medical); }
.upcoming__dot--cat-scolaire { background-color: var(--cat-scolaire); }
.upcoming__dot--cat-vacances { background-color: var(--cat-vacances); }
.upcoming__dot--cat-autre { background-color: var(--cat-autre); }

/* Texte : 75 % couleur de l'événement + 25 % encre (DECISIONS › Panneaux) */
.upcoming__text--p1 { color: color-mix(in oklab, var(--parent-1) 75%, var(--color-text)); }
.upcoming__text--p2 { color: color-mix(in oklab, var(--parent-2) 75%, var(--color-text)); }
.upcoming__text--cat-anniversaire { color: color-mix(in oklab, var(--cat-anniversaire) 75%, var(--color-text)); }
.upcoming__text--cat-medical { color: color-mix(in oklab, var(--cat-medical) 75%, var(--color-text)); }
.upcoming__text--cat-scolaire { color: color-mix(in oklab, var(--cat-scolaire) 75%, var(--color-text)); }
.upcoming__text--cat-vacances { color: color-mix(in oklab, var(--cat-vacances) 75%, var(--color-text)); }
.upcoming__text--cat-autre { color: color-mix(in oklab, var(--cat-autre) 75%, var(--color-text)); }

/* --------------------------------------------------------------------------
   LÉGENDE DU MOIS — défaut : intitulé à gauche, une ligne par groupe (tablette)
   -------------------------------------------------------------------------- */
.legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-size-sm);
  line-height: 16px;
}

.legend__group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.legend__title {
  flex: none;
  width: 96px;
  font-size: var(--font-size-xs);
  line-height: 20px;
  color: var(--color-text-muted);
}

.legend__items {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 4px 18px;
  min-width: 0;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
}

.legend__key {
  display: flex;
  justify-content: center;
}

.legend__item .cal-day__dot {
  width: 8px;
  height: 8px;
}

/* Colonne du bureau : intitulé au-dessus, deux colonnes, groupes séparés d'un filet — à partir de 1100 px ; en dessous, la
   colonne passe sous la grille et reprend la disposition par lignes */
@media (min-width: 1100px) {
  .legend--stack {
    gap: var(--space-xs);
  }

  .legend--stack .legend__group {
    flex-direction: column;
    gap: 4px;
    padding-top: var(--space-xs);
    border-top: var(--border-hair) solid var(--color-border);
  }

  .legend--stack .legend__title {
    width: auto;
    line-height: 14px;
  }

  .legend--stack .legend__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    width: 100%;
  }

  .legend--stack .legend__item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
  }

  .legend--stack .legend__items--wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
  }

  .legend--stack .legend__items--wrap .legend__item {
    display: flex;
  }
}

/* Repères partagés (légendes, compteur, sélection) */
.legend__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.legend__chip--p1 { background-color: var(--parent-1); color: var(--parent-1-ink); }
.legend__chip--p2 { background-color: var(--parent-2); color: var(--parent-2-ink); }

.legend__hole {
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in oklab, var(--color-text) 18%, transparent) 3px 4.5px);
  box-shadow: inset 0 0 0 1.5px var(--cal-hole-line);
}

.legend__vac {
  display: block;
  width: 18px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--cal-vacances);
}

.legend__vac--ferie { background-color: var(--cal-ferie); }

/* --------------------------------------------------------------------------
   LÉGENDE DE LA VUE ANNÉE
   -------------------------------------------------------------------------- */
.legend-year {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.legend-year li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.legend-year__hole {
  flex: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: repeating-linear-gradient(135deg, var(--color-surface) 0 2px, var(--color-text-muted) 2px 3px);
  box-shadow: inset 0 0 0 1px var(--color-text-muted);
}

.legend-year__key {
  display: flex;
  flex: none;
  justify-content: center;
  width: 20px;
}

.legend-year__vac {
  width: 20px;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--cal-vacances);
}

.legend-year__vac--ferie { background-color: var(--cal-ferie); }

.legend-year__event {
  display: flex;
  flex: none;
  align-items: flex-end;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 1px;
  border-radius: 2px;
  background-color: var(--color-bg);
}

.legend-year__event span {
  flex: 1;
  height: 3px;
  background-color: var(--cat-medical);
}

.legend-year__ferie {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--font-weight-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legend-year__hint {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   BARRE DE SÉLECTION
   -------------------------------------------------------------------------- */
.sel-tray {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  padding: 12px;
  background-color: var(--color-surface);
  border-top: var(--border-strong) solid var(--color-text);
}

.sel-tray__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.sel-tray__count {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
}

.sel-tray__cancel {
  min-height: var(--tap-min);
  padding: 0 8px;
}

.sel-tray__actions {
  display: flex;
  gap: var(--space-xs);
}

.sel-tray__assign {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: var(--space-xs);
  box-sizing: border-box;
  min-width: 0;
  height: var(--control-height-lg);
  padding: 0 10px 0 8px;
  border: var(--border-control) solid var(--color-text);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.sel-tray__assign:hover {
  background-color: var(--color-surface-hover);
}

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

.sel-tray__chip {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  font-size: 14px;
}

.sel-tray__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sel-tray__clear {
  flex: none;
  height: var(--control-height-lg);
  padding: 0 14px;
}

/* Aide « un doigt peint » */
.sel-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 6px 4px 0;
  font-size: 14px;
  line-height: 1.45;
}

.sel-hint__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: var(--border-control) solid var(--color-text);
  border-radius: var(--radius-full);
  font-size: 12px;
  line-height: 1;
}