/**
 * @file
 * Styles propres au module Box RH (SILPC).
 */

.node--type-rhforms .page-title {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: var(--columns-padding);

  background-color: var(--boxrh-title-bg);
  color: var(--boxrh-title-color);
}

.boxrh-tree-picto {
  border-radius: var(--boxrh-picto-radius);
  width: var(--boxrh-picto-width);
  margin-right: var(--boxrh-picto-mr);
  order: var(--boxrh-picto-order);
  margin-left: var(--boxrh-picto-ml);
}

/* Bloc Gutenberg silpc-boxrh/boxrh-fiche */
.boxrh-fiche {
  border-color: var(--boxrh-fiche-border);
  border-radius: var(--boxrh-fiche-radius);
  padding: var(--columns-padding);
  margin-bottom: 1.5rem;
  box-shadow: var(--boxrh-fiche-shadow);
}

.boxrh-fiche.has-border {
  border-width: 1px;
  border-style: solid;
}

.boxrh-fiche-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.boxrh-fiche-picto {
  border-radius: var(--boxrh-picto-radius);
  width: var(--boxrh-picto-width);
  margin-right: var(--boxrh-picto-mr);
  order: var(--boxrh-picto-order);
  margin-left: var(--boxrh-picto-ml);
}

/* Bloc Gutenberg silpc-boxrh/boxrh-groupe-champs */
.boxrh-groupe-champs {
  border-color: var(--boxrh-fiche-border);
  border-radius: var(--boxrh-fiche-radius);
  padding: var(--columns-padding);
  margin-bottom: 1.5rem;
}

.boxrh-groupe-champs.has-border {
  border-width: 1px;
  border-style: solid;
}
.boxrh-groupe-champs-content {
  display: grid;
  grid-template-columns: repeat(var(--boxrh-groupe-columns, 2), 1fr);
  gap: 1rem 1.5rem;
}

.boxrh-groupe-champs-content > h1,
.boxrh-groupe-champs-content > h2,
.boxrh-groupe-champs-content > h3,
.boxrh-groupe-champs-content > h4,
.boxrh-groupe-champs-content > h5,
.boxrh-groupe-champs-content > h6,
.boxrh-groupe-champs-content > p {
  grid-column: 1 / -1;
}

.boxrh-groupe-champs-header {
  margin-bottom: 1rem;
}

.boxrh-groupe-champs-title,
.boxrh-groupe-champs-title-input {
  font-family: var(--font-primary-bold);
  margin: 0;
  color: inherit;
}

.boxrh-groupe-champs-title-input {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
}

/* Bloc Gutenberg silpc-boxrh/boxrh-champ */
.block.block-boxrh-champ {
  margin-bottom: 0;
}
/* Le rendu final (boxrh-champ.html.twig) réutilise .form-item/.form-label/
   .input du thème plutôt que des classes boxrh dédiées ; il ne reste ici
   que le reset de marge nécessaire par le passage en dl/dt/dd (RGAA -
   association label/valeur), puisque dl/dd ont des marges par défaut du
   navigateur que div/span n'ont pas. */
.form-item.boxrh-champ {
  margin: 0;
}
.boxrh-champ dd {
  margin-bottom: var(--columns-padding);
}
/* Émule le label flottant du design système (voir .form-item--floating
   dans le thème) mais en statique : dt/dd n'ont pas d'état focus/vide à
   observer (valeur toujours affichée), donc pas besoin des sélecteurs
   ~/:focus/:not(:placeholder-shown) — juste le même résultat visuel figé,
   sans toucher à l'ordre dt-avant-dd. */
.boxrh-champ--floating {
  position: relative;
  margin-top: 1.5rem;
}

.boxrh-champ--floating > dt {
  position: absolute;
  top: 0;
  left: .5rem;
  margin: 0;
  padding: .15rem .5rem;
  background: var(--form-search-fields-bg);
  color: var(--form-search-labels-color-focus);
  transform: translateY(calc(-50% - .15rem));
  pointer-events: none;
}

.boxrh-champ dd {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.boxrh-champ-picto {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  object-fit: contain;
}

/* "Champ long" : émule visuellement une textarea (le thème ne stylise
   textarea que par sélecteur de balise, .boxrh-champ dd n'en est pas un). */
.boxrh-champ--long dd {
  align-items: flex-start;
  min-height: 4.5rem;
  white-space: pre-wrap;
}

/* Champ "en attente de modification" — couleurs pilotées par la config du
   module (voir silpc-boxrh-css-variables.html.twig). */
.boxrh-champ--pending dd.input {
  border-color: var(--boxrh-champ-pending-border) !important;
  background-color: var(--boxrh-champ-pending-bg) !important;
  color: var(--boxrh-champ-pending-color) !important;
}

.boxrh-champ-pending-wrap {
  position: relative;
  display: inline-flex;
}

.boxrh-champ-pending-trigger {
  display: inline-flex;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.boxrh-champ-pending-trigger:focus-visible {
  outline: 2px solid var(--color-focus, var(--color-primary));
  outline-offset: 2px;
}

/* Toujours dans le DOM (jamais [hidden]) : visibility:hidden le retire de
   l'arbre d'accessibilité tant qu'il n'est pas révélé, sans les pièges du
   couple attribut [hidden]/CSS. Révélé au survol/focus (CSS) ou au clic
   (classe .is-open posée par boxrh-champ-tooltip.js). */
.boxrh-champ-pending-tooltip {
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 0;
  z-index: 10;
  width: max-content;
  max-width: 18rem;
  padding: .5rem .75rem;
  border-radius: .5rem;
  background: var(--color-white);
  color: var(--color-gray-dark);
  font-size: var(--t-size-small);
  transition: opacity .15s ease;
  border: 1px solid var(--color-gray-dark);
  > * {
    margin: 0;
  }
}

/* Contenu injecté par js/boxrh-dynamic-content.js dans le bloc "Contenu
   dynamique Box RH" de la page finale (field_rhforms_page_end), une fois la
   soumission du formulaire confirmée. */
.boxrh-dynamic-content-title {
  font-weight: bold;
}

.boxrh-dynamic-content-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1rem;
  margin: 1rem 0 0;
}

.boxrh-dynamic-content-summary dt {
  font-weight: bold;
}

.boxrh-dynamic-content-summary dd {
  margin: 0;
}

.boxrh-champ-pending-wrap:hover .boxrh-champ-pending-tooltip,
.boxrh-champ-pending-wrap:focus-within .boxrh-champ-pending-tooltip,
.boxrh-champ-pending-wrap.is-open .boxrh-champ-pending-tooltip {
  visibility: visible;
  opacity: 1;
}