/* Space Salles (décision DG 2026-07-16) — plan de salle 2D.
   Consultation (.salle-plan, SVG rendu serveur) + éditeur interactif (.salle-editor +
   .re-* rendus par room_editor_controller). Tokens sémantiques uniquement. */

/* ── Consultation (lecture seule) ─────────────────────────────────────────── */
.salle-plan {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--salle-canvas);
  overflow: hidden;
}
.salle-plan__svg { display: block; width: 100%; height: auto; max-height: 60vh; background: var(--salle-canvas); }
.salle-plan--empty { border-style: dashed; }
.salle-plan__empty {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4); color: var(--text-tertiary); font-size: var(--text-sm);
}
.salle-plan__empty .icon { width: 20px; height: 20px; }

/* Formes (partagées consultation + export). Défauts par type = tokens ;
   une couleur choisie par l'admin passe en attribut `fill` (override) + classe *__colored. */
.salle-plan__wall,       .re-wall       { fill: color-mix(in srgb, var(--text-primary) 72%, transparent); stroke: none; }
.salle-plan__table,      .re-table      { fill: color-mix(in srgb, var(--prestka-light) 22%, transparent); stroke: var(--prestka-light); stroke-width: 1.5; }
.salle-plan__buffet,     .re-buffet     { fill: color-mix(in srgb, var(--gold) 22%, transparent); stroke: var(--gold-stroke); stroke-width: 1.5; }
.salle-plan__door,       .re-door       { fill: color-mix(in srgb, var(--text-tertiary) 45%, transparent); stroke: var(--text-tertiary); stroke-width: 1; }
.salle-plan__stage,      .re-stage      { fill: color-mix(in srgb, var(--prestka-primary) 30%, transparent); stroke: var(--prestka-primary); stroke-width: 1.5; }
.salle-plan__bar,        .re-bar        { fill: color-mix(in srgb, var(--gold) 30%, transparent); stroke: var(--gold-stroke); stroke-width: 1.5; }
.salle-plan__dancefloor, .re-dancefloor { fill: color-mix(in srgb, var(--prestka-light) 14%, transparent); stroke: var(--prestka-light); stroke-width: 1.5; stroke-dasharray: 6 4; }
.salle-plan__plant,      .re-plant      { fill: color-mix(in srgb, var(--status-booking-accepte) 32%, transparent); stroke: var(--status-booking-accepte); stroke-width: 1.5; }
.salle-plan__column,     .re-column     { fill: color-mix(in srgb, var(--text-primary) 55%, transparent); stroke: var(--text-primary); stroke-width: 1; }
/* Couleur / matériau choisi par l'admin : le fill est porté par l'attribut, on neutralise le contour. */
.salle-plan__colored,    .re-colored    { stroke: var(--line-strong); stroke-width: 1.25; }
.salle-plan__label,      .re-label      { fill: var(--text-primary); font-family: var(--font-mono); font-size: 14px; pointer-events: none; }
.salle-plan__textlabel,  .re-textlabel  { fill: var(--text-primary); font-family: var(--font-display); font-style: italic; font-size: 18px; pointer-events: none; }

/* ── Éditeur ───────────────────────────────────────────────────────────────── */
.salle-editor { display: flex; flex-direction: column; gap: var(--space-3); }
.salle-editor__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.salle-editor__title { display: flex; align-items: baseline; gap: var(--space-3); flex: 1; min-width: 0; }
.salle-editor__title h1 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-2xl); color: var(--text-primary); margin: 0; }
.salle-editor__status { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }

.salle-editor__settings { position: relative; }
.salle-editor__settings > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.salle-editor__settings > summary::-webkit-details-marker { display: none; }
.salle-editor__settings-body {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 30;
  width: min(520px, 90vw); padding: var(--space-4); border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong); text-align: left;
}

/* Barre d'outils : palette (ajout) + actions (édition/zoom/export) */
.salle-editor__toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-solid) 60%, transparent);
}
.salle-editor__palette, .salle-editor__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.salle-editor__actions { margin-left: auto; }
.salle-editor__palette-label { font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.salle-tool { padding: 4px 10px; font-size: var(--text-xs); }
.salle-editor__sep { width: 1px; height: 20px; background: var(--line-strong); }
.salle-editor__snap { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--text-secondary); cursor: pointer; }

.salle-editor__actions .icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--radius-md); border: 1px solid var(--line-strong);
  background: var(--bg-elevated); color: var(--text-primary); cursor: pointer;
  font-size: var(--text-sm); transition: background var(--dur-fast) var(--ease-silk);
}
.salle-editor__actions .icon-btn:hover { background: var(--bg-elevated-strong); }

/* Espace de travail : scène + inspecteur */
.salle-editor__workspace { display: flex; gap: var(--space-3); align-items: stretch; }

/* Scène de l'éditeur */
.salle-editor__stage {
  position: relative; flex: 1; min-width: 0; height: 62vh; min-height: 360px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--line) 40%, transparent) 23px 24px),
    var(--salle-canvas);
  touch-action: none;
}

/* Barre feuille (taille du plan) */
.salle-editor__sheet { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.salle-editor__sheet strong { font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* Inspecteur de l'élément sélectionné */
.salle-editor__inspector {
  flex: none; width: 240px; align-self: flex-start;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-solid) 70%, transparent);
}
.salle-editor__inspector-title { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--gold); }
.salle-editor__field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: var(--text-secondary); }
.salle-editor__field .input { width: 100%; }
.salle-editor__dims { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.salle-editor__field-label { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); }
.salle-editor__swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.salle-swatch {
  width: 26px; height: 26px; flex: none; padding: 0; cursor: pointer;
  border-radius: var(--radius-md); border: 1px solid var(--line-strong);
  display: grid; place-items: center; font-size: var(--text-xs); color: var(--text-secondary);
}
.salle-swatch.is-active { outline: 2px solid var(--prestka-primary); outline-offset: 1px; }
.salle-swatch--custom { padding: 0; background: none; }
.salle-swatch--reset { background: var(--bg-elevated); }
.salle-editor__inspector-actions { display: flex; gap: var(--space-2); }
.salle-editor__inspector-actions .btn { flex: 1; justify-content: center; }
.salle-editor__svg { display: block; width: 100%; height: 100%; outline: none; cursor: crosshair; }
.salle-editor__readout {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  padding: 4px 10px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary);
  pointer-events: none;
}
.salle-editor__hint { font-size: var(--text-xs); color: var(--text-tertiary); margin: 0; }

/* Éléments SVG rendus par le contrôleur — strokes non mis à l'échelle (crisp au zoom) */
.re-frame { fill: var(--salle-canvas); stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.re-grid  { stroke: color-mix(in srgb, var(--line) 60%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.re-obj   { cursor: move; }
.re-shape { vector-effect: non-scaling-stroke; }
.re-sel   { fill: none; stroke: var(--prestka-primary); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.re-handle { fill: var(--surface-solid); stroke: var(--prestka-primary); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
.re-rot { cursor: grab; }
.re-rot-line { stroke: var(--prestka-primary); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.re-guide { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }

/* Onglet Salle du popup événement */
.event-salle { display: flex; flex-direction: column; gap: var(--space-3); }
.event-salle--empty { align-items: flex-start; gap: var(--space-2); }
.event-salle__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.event-salle__name { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-lg); color: var(--text-primary); margin: 0; }

@media (max-width: 860px) {
  .salle-editor__workspace { flex-direction: column; }
  .salle-editor__inspector { width: auto; align-self: stretch; }
}
@media (max-width: 720px) {
  .salle-editor__actions { margin-left: 0; }
  .salle-tool span { display: none; }
}