/* ================================================================ */
/* idf-drag-canvas v0.6.0 - Elemente frei auf einer Flaeche          */
/* ================================================================ */
/* Flaechen nebeneinander, bricht um, sobald zwei nicht mehr passen.
   Die Flaeche selbst bekommt ihre Hoehe von der Grafik darin (SVG mit
   viewBox, width 100 %); die Elemente liegen absolut darueber, ihr
   Mittelpunkt ist der Ankerpunkt (translate -50 %). Farben und Masse nur
   aus Tokens. */

.idf-drag-canvas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: flex-start;
}

/* Mehrere Zeilen (flaechen[].neueZeile): jede Zeile bricht fuer sich um,
   wie der Baustein ohne Zeilen. */
.idf-drag-canvas-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: flex-start;
  flex: 1 1 100%;
  min-width: 0;
}

.idf-drag-canvas-flaeche {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 420px;
  margin: 0;
}

/* Eine Detailansicht, die gross sein soll (flaechen[].breit): eigene Zeile,
   volle Breite. */
.idf-drag-canvas-flaeche.is-breit {
  flex-basis: 100%;
  max-width: none;
}

.idf-drag-canvas-label {
  margin: 0 0 var(--space-2);
  font-size: var(--font-xs2);
  color: var(--ink-75);
  text-align: center;
}

.idf-drag-canvas-feld {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.idf-drag-canvas-feld > svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Das Element: ein Bild oder ein Platzhalter mit Namen. touch-action nur
   hier, damit die Seite neben den Elementen weiter scrollt. Erst an den
   Mittelpunkt, dann um ihn drehen; die Drehung setzt das JS als Variable. */
.idf-drag-canvas-element {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--idf-drag-canvas-drehung, 0deg));
  line-height: 0;
  border-radius: var(--radius-xs);
  cursor: grab;
  touch-action: none;
  outline: none;
}

/* Mit Seitenverhaeltnis hat das Element eine feste Box, das Bild steht ganz
   darin; ohne bestimmt das Bild die Hoehe (height 100 % von auto ist auto). */
.idf-drag-canvas-element img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Gewaehlt ist, was den Fokus hat, auch nach einem Mausklick: der Ring
   zeigt, zu welchem Element die Griffe gehoeren. */
.idf-drag-canvas-element:focus {
  box-shadow: var(--shadow-focus);
}

/* Markiert (v0.6.0): der Zeiger steht darauf, oder jemand hebt es von
   aussen hervor (h.markieren), etwa aus einer Zeile daneben. Eine Kontur
   im IDF-Rot, die neben dem Fokus-Ring bestehen bleibt. */
.idf-drag-canvas-element.is-markiert {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Ebene des Konsumenten (v0.6.0): ueber der Grafik, unter den Elementen
   (sie steht vor ihnen im Feld). Nimmt keinen Zeiger, damit Ziehen und
   Scrollen durch sie hindurch gehen. */
.idf-drag-canvas-ebene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Griffe des gewaehlten Elements: oben rund zum Drehen, unten rechts eckig
   fuer die Groesse. Kinder des Elements, sie drehen also mit. Ohne Tooltip,
   ein Griff traegt keinen. */
.idf-drag-canvas-griff {
  display: none;
  position: absolute;
  z-index: var(--z-base);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-75);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: var(--font-xs2);
  line-height: 1;
  touch-action: none;
}

.idf-drag-canvas-element:focus .idf-drag-canvas-griff,
.idf-drag-canvas-element.is-drehend .idf-drag-canvas-griff,
.idf-drag-canvas-element.is-skalierend .idf-drag-canvas-griff {
  display: flex;
}

.idf-drag-canvas-dreher {
  left: 50%;
  bottom: 100%;
  width: var(--space-6);
  height: var(--space-6);
  margin: 0 0 var(--space-2) calc(var(--space-6) / -2);
  border-radius: var(--radius-pill);
  cursor: grab;
}

.idf-drag-canvas-groesse {
  left: 100%;
  top: 100%;
  width: var(--space-3);
  height: var(--space-3);
  margin: calc(var(--space-3) / -2) 0 0 calc(var(--space-3) / -2);
  border-radius: var(--radius-xs);
  cursor: nwse-resize;
}

.idf-drag-canvas-element.is-drehend,
.idf-drag-canvas-element.is-drehend .idf-drag-canvas-dreher {
  cursor: grabbing;
}

.idf-drag-canvas-element.is-dragging {
  cursor: grabbing;
  box-shadow: var(--shadow-drag);
  z-index: var(--z-overlay);
}

/* Touch: ein Brustlogo ist auf dem Handy wenige Pixel hoch (gemessen 29 x 8
   px fuer 80 mm auf dem Poloshirt), zu klein fuer einen Finger. Die
   Trefferflaeche waechst auf 44 px, die Grafik bleibt so gross, wie das
   Motiv ist. Nach Eingabeart, nie per Media-Query (infrastructure/input-mode). */
html[data-input-mode="touch"] .idf-drag-canvas:not(.is-gesperrt) .idf-drag-canvas-element::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* Die Griffe bekommen auf Touch dieselben 44 px. Sie liegen ueber der
   Trefferflaeche des Elements (z-index oben), sonst griffe der Finger am
   Griff das Element und schoebe es. */
html[data-input-mode="touch"] .idf-drag-canvas-griff::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.idf-drag-canvas-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2px;
  overflow: hidden;
  border: 1px dashed var(--ink-75);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--white) 75%, transparent);
  color: var(--ink);
  font-size: var(--font-xs);
  line-height: 1.15;
  text-align: center;
  word-break: break-word;
}

/* Hilfslinien (etwa Mitte und Schulternaht): gestrichelt, nur solange ein
   Element gewaehlt ist. Die Linienfarbe setzt der Konsument ueber die
   Variable, passend zu seinem Untergrund; die Beschriftung steht auf einem
   hellen Grund und bleibt damit auf jedem Untergrund lesbar. */
.idf-drag-canvas-hilfslinie {
  display: none;
  position: absolute;
  pointer-events: none;
  border: 0 dashed var(--idf-drag-canvas-hilfslinie, var(--ink-75));
}

.idf-drag-canvas-hilfslinie.is-senkrecht {
  top: 0;
  bottom: 0;
  border-left-width: 1px;
}

.idf-drag-canvas-hilfslinie.is-waagerecht {
  left: 0;
  right: 0;
  border-top-width: 1px;
}

.idf-drag-canvas.is-auswahl .idf-drag-canvas-hilfslinie {
  display: block;
}

.idf-drag-canvas-hilfslinie-label {
  position: absolute;
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--white) 85%, transparent);
  color: var(--ink);
  font-size: var(--font-xs2);
  line-height: 1.4;
  white-space: nowrap;
}

.idf-drag-canvas-hilfslinie.is-senkrecht > .idf-drag-canvas-hilfslinie-label {
  top: 0;
  left: var(--space-1);
}

.idf-drag-canvas-hilfslinie.is-waagerecht > .idf-drag-canvas-hilfslinie-label {
  left: 0;
  bottom: var(--space-1);
}

/* Masstext unter dem gewaehlten Element (opts.masstext). Steht im Feld,
   nicht im Element, und dreht deshalb nicht mit. */
.idf-drag-canvas-mass {
  position: absolute;
  z-index: var(--z-overlay);
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-xs);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: var(--font-xs2);
  line-height: 1.35;
  text-align: center;
  white-space: pre;
  pointer-events: none;
}

/* Nur zeigen: gesperrt im Fenster oder statisch in einer Listen-Zelle. */
.idf-drag-canvas.is-gesperrt .idf-drag-canvas-element,
.idf-drag-canvas-feld.is-statisch .idf-drag-canvas-element {
  cursor: default;
}

.idf-drag-canvas-feld.is-statisch .idf-drag-canvas-platzhalter {
  font-size: 0;
}