/* Harmonisation du module RH sur le modèle Crèche (charte tableaux / boutons / drawers).
   Surcharges propres au module RH : ne touchent pas aux fichiers partagés (styles.css, charte-components.css). */

/* ---- Congés (Temps & Absences > Validations) : modale -> drawer à droite, en-tête dégradé accent ---- */
.lv__modal-bg {
  z-index: 1000;
  justify-content: flex-end;
  align-items: stretch;
}
.lv__modal-bg .lv__modal {
  width: min(560px, 100vw);
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  background: var(--surface);
}
.lv__modal-bg .lv__modal-head {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-800) 100%);
  border-bottom: 0;
  color: var(--on-brand);
}
.lv__modal-bg .lv__modal-head .lv__modal-eyebrow,
.lv__modal-bg .lv__modal-head .lv__modal-sub { color: rgba(255, 255, 255, .82); }
.lv__modal-bg .lv__modal-head h2 { color: var(--on-brand); font-weight: 500; }
.lv__modal-bg .lv__close { color: rgba(255, 255, 255, .85); }
.lv__modal-bg .lv__close:hover { color: var(--on-brand); }

/* ---- Congés : badges d'état en familles pastel (50 + 800) ---- */
.lv__badge--pending { background: var(--soleil-50); color: var(--soleil-800); }
.lv__badge--ok { background: var(--menthe-50); color: var(--menthe-800); }
.lv__badge--ko { background: var(--framb-50); color: var(--framb-800); }
.lv__badge--counter { background: var(--ciel-50); color: var(--ciel-800); }
.lv__badge-urgent { color: var(--framb-800); }

/* ---- Toolbar : bouton « Mémo » avec pastille d'alerte ---- */
.rh-harmo-btn-badge { position: relative; }
.rh-harmo-btn-badge__dot {
  position: absolute; top: -5px; right: -5px;
  background: var(--framb-50); color: var(--framb-800); border: 0.5px solid var(--framb-200);
  border-radius: 10px; font-size: 9px; font-weight: 500; min-width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ---- Pilotage RH · Suivi : marges de page normalisées ---- */
.prh-suivi .page {
  padding: var(--page-y) var(--page-x) 60px;
  max-width: var(--page-max);
  margin-inline: auto;
}

/* ---- Entrées / Sorties : marges de page normalisées ---- */
.onoff.kid-page {
  padding: var(--page-y) var(--page-x) 60px;
  max-width: var(--page-max);
  margin-inline: auto;
  background: transparent;
}

/* ---- Suivi RH (views-notes.jsx) : marges de page normalisées + drawer historique pro ---- */
.disc2 {
  padding: var(--page-y) var(--page-x) 60px;
  max-width: var(--page-max);
  margin-inline: auto;
  background: transparent;
}
.modal-backdrop--drawer-right .modal--notes-pro {
  width: min(760px, 100vw);
  max-width: 100vw;
  height: 100%;
  max-height: 100vh;
  border-radius: 0;
}
.modal--notes-pro .modal__head {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-800) 100%);
  border-bottom: 0;
}
.modal--notes-pro .modal__head .modal__eyebrow { color: rgba(255, 255, 255, .82); }
.modal--notes-pro .modal__head .modal__title { color: var(--on-brand); }
.modal--notes-pro .modal__head .modal__sub-emp { color: rgba(255, 255, 255, .82); }
.modal--notes-pro .modal__head .modal__close {
  background: transparent; border-color: rgba(255, 255, 255, .45); color: rgba(255, 255, 255, .9);
}
.modal--notes-pro .modal__head .modal__close:hover { background: rgba(255, 255, 255, .15); color: var(--on-brand); }