/**
 * wallpaper-hierarchy.css
 * web/themes/custom/wallpaper_ui/css/wallpaper-hierarchy.css
 *
 * Fonds colorés très légers pour distinguer visuellement
 * les niveaux hiérarchiques dans les inline entity forms :
 *
 *   Niveau 1 — Wall    (field_walls_in_wallpaper)  → vert sauge très pâle
 *   Niveau 2 — Panel   (field_wall_panels)          → ocre très pâle
 *   Niveau 3 — Strip   (field_panel_strips)         → bleu ardoise très pâle
 *
 * Les couleurs s'harmonisent avec la palette wallpaper_ui :
 *   --wp-vert-sauge, --wp-ocre, --wp-bleu-ardoise
 * Opacité 5–8% pour rester non intrusif.
 */

/* ══════════════════════════════════════════════════════════════
   NIVEAU 1 — WALL (field_walls_in_wallpaper)
   Sélecteur : .field--name-field-walls-in-wallpaper
   (Drupal convertit _ en - dans les classes CSS)
══════════════════════════════════════════════════════════════ */
.field--name-field-walls-in-wallpaper > .field__item,
.field--name-field-walls-in-wallpaper .ief-form,
.field--name-field-walls-in-wallpaper .inline-entity-form-wall,
.field--name-field-walls-in-wallpaper > table tbody tr {
  background-color: rgba(74, 92, 76, 0.06);   /* vert sauge 6% */
  border-left: 2px solid rgba(74, 92, 76, 0.18);
  border-radius: 3px;
  margin-bottom: 4px;
}

/* En-tête du bloc Wall */
.field--name-field-walls-in-wallpaper .ief-entity-operations,
.field--name-field-walls-in-wallpaper > .fieldset__wrapper > legend,
.field--name-field-walls-in-wallpaper details > summary {
  background-color: rgba(74, 92, 76, 0.10);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   NIVEAU 2 — PANEL (field_wall_panels)
   Imbriqué dans Wall — fond légèrement plus chaud
══════════════════════════════════════════════════════════════ */
.field--name-field-wall-panels > .field__item,
.field--name-field-wall-panels .ief-form,
.field--name-field-wall-panels .inline-entity-form-panel,
.field--name-field-wall-panels > table tbody tr {
  background-color: rgba(139, 105, 20, 0.05);  /* ocre 5% */
  border-left: 2px solid rgba(139, 105, 20, 0.16);
  border-radius: 3px;
  margin-bottom: 3px;
}

.field--name-field-wall-panels .ief-entity-operations,
.field--name-field-wall-panels details > summary {
  background-color: rgba(139, 105, 20, 0.09);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   NIVEAU 3 — STRIP / LÉ (field_panel_strips)
   Imbriqué dans Panel — fond bleu ardoise très discret
══════════════════════════════════════════════════════════════ */
.field--name-field-panel-strips > .field__item,
.field--name-field-panel-strips .ief-form,
.field--name-field-panel-strips .inline-entity-form-strip,
.field--name-field-panel-strips > table tbody tr {
  background-color: rgba(42, 90, 138, 0.05);   /* bleu ardoise 5% */
  border-left: 2px solid rgba(42, 90, 138, 0.15);
  border-radius: 3px;
  margin-bottom: 2px;
}

.field--name-field-panel-strips .ief-entity-operations,
.field--name-field-panel-strips details > summary {
  background-color: rgba(42, 90, 138, 0.09);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   ÉTIQUETTES DE NIVEAU (optionnel — badge discret)
   Ajoute "Mur", "Panneau", "Lé" avant chaque bloc
══════════════════════════════════════════════════════════════ */
.field--name-field-walls-in-wallpaper > .field__label::before {
  content: '▸ ';
  color: rgba(74, 92, 76, 0.5);
}

.field--name-field-wall-panels > .field__label::before {
  content: '▸▸ ';
  color: rgba(139, 105, 20, 0.5);
}

.field--name-field-panel-strips > .field__label::before {
  content: '▸▸▸ ';
  color: rgba(42, 90, 138, 0.5);
}

/* ══════════════════════════════════════════════════════════════
   TABLEAU IEF — alignement et espacement
   (inline_entity_form affiche un <table> dans le form)
══════════════════════════════════════════════════════════════ */

/* Wall */
.field--name-field-walls-in-wallpaper > .field__items > table,
.field--name-field-walls-in-wallpaper .ief-entity-table {
  border-radius: 4px;
  overflow: hidden;
}

.field--name-field-walls-in-wallpaper .ief-entity-table thead th {
  background-color: rgba(74, 92, 76, 0.12);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  color: var(--wp-gris-700, #3d3d3a);
}

/* Panel */
.field--name-field-wall-panels .ief-entity-table thead th {
  background-color: rgba(139, 105, 20, 0.10);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px;
}

/* Strip */
.field--name-field-panel-strips .ief-entity-table thead th {
  background-color: rgba(42, 90, 138, 0.09);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px;
}

/* ══════════════════════════════════════════════════════════════
   BOUTONS "Add new node" / "Add existing node"
   Couleur cohérente avec le niveau
══════════════════════════════════════════════════════════════ */
.field--name-field-walls-in-wallpaper .ief-entity-operations input[type="submit"],
.field--name-field-walls-in-wallpaper input.button {
  border-color: rgba(74, 92, 76, 0.4);
  color: rgba(74, 92, 76, 0.85);
}

.field--name-field-wall-panels .ief-entity-operations input[type="submit"],
.field--name-field-wall-panels input.button {
  border-color: rgba(139, 105, 20, 0.4);
  color: rgba(139, 105, 20, 0.85);
}

.field--name-field-panel-strips .ief-entity-operations input[type="submit"],
.field--name-field-panel-strips input.button {
  border-color: rgba(42, 90, 138, 0.4);
  color: rgba(42, 90, 138, 0.85);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — réduire l'indentation sur mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .field--name-field-walls-in-wallpaper > .field__item,
  .field--name-field-wall-panels > .field__item,
  .field--name-field-panel-strips > .field__item {
    border-left-width: 2px;
    padding-left: 8px;
  }
}