/* relation-map.css
   Styles des cartes de relations entre PNJ (SVG généré côté PHP).
   Partagé entre la page publique (templates/custom.php) et l'éditeur admin.
   Voir docs/specs/cartes-relations.md. Les couleurs reprennent les variables
   de styles.css (avec fallback littéral pour les contextes sans :root). */

.relation-map-panel {
  padding: 14px;
}

.relation-map-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

/* --- Liens (arêtes) ------------------------------------------------------ */

.rm-edge-line {
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.85;
}

.rm-positive .rm-edge-line { stroke: #5d9e69; }
.rm-negative .rm-edge-line { stroke: #c0504a; }
.rm-neutral  .rm-edge-line { stroke: #8d8478; }

/* Label au milieu du lien : halo sombre (paint-order) pour rester lisible
   quel que soit ce qui passe dessous. */
.rm-edge-label {
  font-size: 19px;
  font-style: italic;
  fill: var(--text, #f2ebe3);
  paint-order: stroke;
  stroke: rgba(18, 15, 17, 0.92);
  stroke-width: 6px;
  stroke-linejoin: round;
}

.rm-positive .rm-edge-label { fill: #a9d8b1; }
.rm-negative .rm-edge-label { fill: #e2a49f; }
.rm-neutral  .rm-edge-label { fill: var(--muted, #cbbeb5); }

/* --- Nœuds ---------------------------------------------------------------- */

.rm-node {
  cursor: pointer;
}

.rm-node-bg {
  fill: var(--bg-soft, #1a1518);
}

.rm-node-ring {
  fill: none;
  stroke: var(--line-strong, rgba(207, 170, 140, 0.42));
  stroke-width: 2.5;
}

.rm-node:hover .rm-node-ring,
.rm-node:focus .rm-node-ring {
  stroke: var(--accent-strong, #e08d98);
  stroke-width: 3.5;
}

.rm-node-initial {
  font-size: 40px;
  fill: var(--gold, #d9b38c);
  pointer-events: none;
}

.rm-node-name {
  font-size: 21px;
  fill: var(--text, #f2ebe3);
  paint-order: stroke;
  stroke: rgba(18, 15, 17, 0.92);
  stroke-width: 6px;
  stroke-linejoin: round;
}

.rm-node:hover .rm-node-name,
.rm-node:focus .rm-node-name {
  fill: var(--accent-strong, #e08d98);
}

/* --- Nœud cassé (PNJ supprimé/introuvable, cf. .broken-link) -------------- */

.rm-node-broken {
  cursor: help;
}

.rm-node-broken .rm-node-ring {
  stroke: #b94a3a;
  stroke-dasharray: 7 6;
}

.rm-node-broken .rm-node-initial,
.rm-node-broken .rm-node-name {
  fill: #b94a3a;
}

/* --- Carte vide ------------------------------------------------------------ */

.rm-empty {
  font-size: 26px;
  font-style: italic;
  fill: var(--muted, #cbbeb5);
}

/* --- Éditeur admin (relation-edit.php + relation-editor.js) ---------------- */

.relation-editor {
  /* position: relative ancre le panneau d'édition de lien. */
  position: relative;
  border: 1px solid var(--line-strong, rgba(207, 170, 140, 0.42));
  border-radius: 10px;
  background: rgba(18, 15, 17, 0.35);
  overflow: hidden;
}

/* Pointer events : on gère le drag nous-mêmes, pas le navigateur. */
.relation-editor-svg {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.relation-editor .rm-node-editable {
  cursor: grab;
}

.relation-editor .rm-node-editable.rm-dragging {
  cursor: grabbing;
}

.relation-editor .rm-node-editable.rm-dragging .rm-node-ring {
  stroke: var(--accent-strong, #e08d98);
  stroke-width: 3.5;
}

.relation-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.relation-editor-toolbar .admin-subheading {
  margin: 0;
  flex: 1;
}

.relation-editor-dirty {
  color: #e0b052;
  font-size: 0.9rem;
  font-style: italic;
}

.relation-editor-status {
  min-height: 1.2em;
  margin: 6px 0 10px;
  font-size: 0.92rem;
  color: var(--muted, #cbbeb5);
}

.relation-editor-status.is-error {
  color: #e2a49f;
}

/* --- Liens dans l'éditeur (Task 5) ----------------------------------------- */

/* Zone de clic large et invisible le long du lien. */
.relation-editor .rm-edge-hit {
  stroke: transparent;
  stroke-width: 24;
  stroke-linecap: round;
  pointer-events: stroke;
}

.relation-editor .rm-edge {
  cursor: pointer;
}

.relation-editor .rm-edge:hover .rm-edge-line,
.relation-editor .rm-edge-selected .rm-edge-line {
  stroke-width: 5;
  opacity: 1;
}

.relation-editor .rm-edge-selected .rm-edge-line {
  filter: drop-shadow(0 0 4px rgba(224, 141, 152, 0.6));
}

/* Ligne temporaire pendant le glisser de création de lien. */
.rm-edge-temp {
  stroke: var(--accent-strong, #e08d98);
  stroke-width: 3;
  stroke-dasharray: 8 7;
  stroke-linecap: round;
  pointer-events: none;
}

/* Nœud survolé pendant la création de lien (cible valide). */
.relation-editor .rm-node.rm-link-target .rm-node-ring {
  stroke: var(--accent-strong, #e08d98);
  stroke-width: 4.5;
}

/* --- Poignée de création de lien (bord du nœud) ----------------------------- */

.rm-link-handle {
  cursor: crosshair;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.rm-node:hover .rm-link-handle,
.rm-link-handle:hover {
  opacity: 1;
}

.rm-link-handle-bg {
  fill: var(--bg-soft, #1a1518);
  stroke: var(--gold, #d9b38c);
  stroke-width: 2;
}

.rm-link-handle:hover .rm-link-handle-bg {
  stroke: var(--accent-strong, #e08d98);
}

.rm-link-handle-plus {
  font-size: 19px;
  fill: var(--gold, #d9b38c);
  pointer-events: none;
}

/* --- Poignée de suppression d'un nœud (Task 6) ------------------------------ */

.rm-delete-handle {
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.rm-node:hover .rm-delete-handle,
.rm-delete-handle:hover {
  opacity: 1;
}

.rm-delete-handle-bg {
  fill: var(--bg-soft, #1a1518);
  stroke: rgba(192, 80, 74, 0.55);
  stroke-width: 2;
}

.rm-delete-handle:hover .rm-delete-handle-bg {
  stroke: #c0504a;
}

.rm-delete-handle-cross {
  font-size: 19px;
  fill: #e2a49f;
  pointer-events: none;
}

/* Pendant un glisser de lien, neutraliser les curseurs des nœuds. */
.relation-editor-svg.rm-linking,
.relation-editor-svg.rm-linking .rm-node-editable {
  cursor: crosshair;
}

/* --- Panneau d'édition d'un lien -------------------------------------------- */

.rm-edge-panel {
  position: absolute;
  z-index: 5;
  min-width: 260px;
  max-width: 340px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong, rgba(207, 170, 140, 0.42));
  border-radius: 10px;
  background: rgba(18, 15, 17, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.rm-edge-panel-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--gold, #d9b38c);
}

.rm-edge-panel-polarity {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.rm-polarity-btn {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--line-strong, rgba(207, 170, 140, 0.42));
  border-radius: 7px;
  background: transparent;
  color: var(--muted, #cbbeb5);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.rm-polarity-btn.is-active {
  color: var(--text, #f2ebe3);
  border-width: 2px;
  padding: 4px 7px;
}

.rm-polarity-positive.is-active { border-color: #5d9e69; background: rgba(93, 158, 105, 0.18); }
.rm-polarity-negative.is-active { border-color: #c0504a; background: rgba(192, 80, 74, 0.18); }
.rm-polarity-neutral.is-active  { border-color: #8d8478; background: rgba(141, 132, 120, 0.18); }

.rm-edge-panel-label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong, rgba(207, 170, 140, 0.42));
  border-radius: 7px;
  background: rgba(18, 15, 17, 0.6);
  color: var(--text, #f2ebe3);
  font: inherit;
  font-size: 0.9rem;
}

.rm-edge-panel-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.rm-edge-panel-delete {
  color: #e2a49f;
  border-color: rgba(192, 80, 74, 0.55);
}