/* ============================================================================
   P11c: Crop-Werkzeug beim Upload (Vektor UND Kolorieren)

   Eigenstaendige Datei (gleiches Muster wie kolorier_touch.css/kolorier_
   farbwaehler.css - siehe deren Kopfkommentare): Selektoren bewusst auf
   "crop-"/"#crop-"-Namen beschraenkt, style.css bleibt unangetastet.

   Layout-Trick gegen Letterbox-Rechnerei: #crop-stage ist display:inline-block
   OHNE eigene feste Groesse - es schrumpft/waechst exakt auf die Groesse des
   <img> darin (max-width/max-height + width/height:auto erhalten das
   Seitenverhaeltnis). #crop-overlay-canvas/#crop-rect liegen darueber mit
   inset:0 und decken dadurch IMMER exakt die Bildflaeche ab, ohne
   object-fit:contain-Letterbox-Versatz wie bei der Kolorieren-Vorschau
   (kolorier_touch.js::bildBox) ausrechnen zu muessen - hier gibt es
   strukturell keinen Leerraum, der auszurechnen waere.
   ============================================================================ */

#crop-workspace .hint {
  margin-bottom: 12px;
}

#crop-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  touch-action: none;
  line-height: 0;
}

#crop-image {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

#crop-overlay-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#crop-rect {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(20, 20, 30, 0.85), 0 0 0 1px rgba(20, 20, 30, 0.85);
  box-sizing: border-box;
  cursor: move;
}

/* 44x44px Trefferflaeche (Auftrag) je Griff - der sichtbare Punkt in der
   Mitte bleibt klein, damit die Zeichnung darunter nicht verdeckt wird. */
.crop-handle {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.crop-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(20, 20, 30, 0.6);
}

.crop-handle[data-handle="nw"],
.crop-handle[data-handle="se"] { cursor: nwse-resize; }
.crop-handle[data-handle="ne"],
.crop-handle[data-handle="sw"] { cursor: nesw-resize; }
.crop-handle[data-handle="n"],
.crop-handle[data-handle="s"] { cursor: ns-resize; }
.crop-handle[data-handle="w"],
.crop-handle[data-handle="e"] { cursor: ew-resize; }

/* P12: Entzerren-Schalter (nur sichtbar mit erkanntem Viereck, siehe
   crop.js) - schlichtes natives Checkbox+Label statt eines eigenen
   Schalter-Bauteils (das gaebe es zwar schon als .switch in settings.css,
   das aber auf der Einstellungen-Seite liegt und hier nicht mitgeladen
   wird - kein Grund, dafuer eine zweite Kopie anzulegen). */
.crop-entzerren-row {
  margin-top: 10px;
}
.crop-entzerren-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.crop-entzerren-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
}

@media (max-width: 768px) {
  #crop-workspace .export-row .btn {
    min-height: 44px;
    padding: 12px 18px;
  }
}

/* ============================================================================
   P16 Teil B4 (Floras Praezisierung 2026-08-26): "Bild zuschneiden existiert
   in dieser Form nicht" - der grosse zentrale Zuschnitt-Bildschirm (Ueber-
   schrift/Hinweistext/Entzerren-Zeile/Knopfreihe) faellt als eigener
   Abschnitt komplett weg. crop.js (zeigeMini()) haengt #crop-workspace per
   appendChild in #k-file-preview um (dieselbe Node, kein Klon - IDs/Handler
   unveraendert, siehe Waechter-Test) und setzt diese Klasse. .crop-mini legt
   sich absolut UEBER die ganze Karte (deren position:relative kommt aus
   style.css) - die parallel gespiegelte #k-file-preview-img (script.js
   kalamoSchale()/mirrorFilePreview) muss dafuer nicht extra versteckt
   werden, sie liegt einfach optisch darunter.
   ============================================================================ */
#crop-workspace.crop-mini {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--k-panel, #fff);
  z-index: 2;
}
/* Ueberschrift/Hinweistext/Entzerren-Zeile/Knopfreihe bleiben im DOM
   (Waechter-Test prueft #crop-vollbild/#crop-apply/#crop-skip/#crop-
   entzerren-toggle als Text im Quelltext) - hier nur optisch verborgen, kein
   Platz mehr in der kleinen Karte (Auftrag: "existiert in dieser Form
   nicht"). Der Rahmen startet am vollen Bildrand und wirkt sofort auf die
   Mitte (crop.js liveAnwenden()) - ein Bestaetigen-Schritt entfaellt damit
   strukturell, die Knopfreihe wird nicht mehr gebraucht. */
#crop-workspace.crop-mini > h3,
#crop-workspace.crop-mini > .hint,
#crop-workspace.crop-mini > .crop-entzerren-row,
#crop-workspace.crop-mini > .export-row {
  display: none;
}
#crop-workspace.crop-mini #crop-stage {
  max-width: 100%;
  max-height: 100%;
}
#crop-workspace.crop-mini #crop-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* P12b: kurzer Hinweis-Toast bei automatisch angewendetem Zuschnitt ("Nichts
   ist still", Auftrag) - eigene Kopie von style.css' .kolorier-toast (siehe
   dortige Begruendung fuer jede einzelne Regel), NICHT von dort importiert:
   crop.css bleibt auf "crop-"-Selektoren beschraenkt (siehe Kopfkommentar),
   und dieses Modul gilt fuer Vektor UND Kolorieren gleichermassen - eine
   Abhaengigkeit auf eine Kolorieren-spezifische Klasse waere hier falsch. */
.crop-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--text-strong);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  font-size: 0.86rem;
  box-shadow: var(--shadow-strong);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.crop-toast.crop-toast-show { opacity: 1; }

/* P12b: "Zuschnitt anpassen" - lebt im Original-Panel (index.html, beide
   Verfahren), NICHT innerhalb von #crop-workspace - deshalb hier eine
   freistehende Klasse statt eines "#crop-workspace ..."-Selektors wie beim
   Rest dieser Datei. Absolut auf der Panel-Ecke platziert (die umgebende
   .preview-pair figure ist bereits position:relative, siehe style.css) -
   spart eine figcaption-Layoutaenderung, "klein" bleibt so unabhaengig vom
   figcaption-Text (Auftrag: "Kleiner Knopf"). */
.crop-anpassen-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 6px 14px;
  font-size: 0.72rem;
}

@media (max-width: 768px) {
  /* Auftrag: 44px Trefferflaeche auf Mobilgeraeten (dieselbe Vorgabe wie bei
     den Crop-Griffen/.crop-handle oben und dem export-row .btn-Ausnahme). */
  .crop-anpassen-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
  }
}