/* photo.css – Foto-Feld im Formular und Zuschnitt-Overlay.
   Gehört zu ui/photo-picker.js. Die Bilddarstellung in Karten und
   Aufgaben-Zeilen steht bei den jeweiligen Komponenten (plants.css,
   tasks.css), weil dort auch deren Maße definiert sind. */

/* ─── Formularfeld ──────────────────────────────────────────────────────── */

.photo-field__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.photo-field__preview {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Knopf um das Vorschaubild (S68, Backlog #79). Füllt den Kasten vollständig,
   damit das Bild seine 100 % behält — der Knopf ist jetzt sein Bezugsrahmen.
   Kein eigener Rahmen und kein Radius: den bringt der Kasten mit, und der
   Knopf soll nicht als zweite Fläche darin erscheinen. */
.photo-field__zoom {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
}

.photo-field__zoom:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.photo-field__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-field__placeholder {
  font-size: 32px;
  line-height: 1;
}

.photo-field__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ─── Zuschnitt-Overlay ─────────────────────────────────────────────────── */

.photo-cropper__stage {
  /* Quadratisch und so breit wie der Dialog: das Fenster zeigt exakt den
     Ausschnitt, der gespeichert wird — keine Maske, kein Rand außen herum. */
  width: 100%;
  aspect-ratio: 1;
  max-width: 320px;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-alt);
}

.photo-cropper__canvas {
  width: 100%;
  height: 100%;
  display: block;
  /* Ohne das scrollt die Seite mit, sobald ein Finger über dem Bild zieht,
     und der Zuschnitt lässt sich auf dem Handy gar nicht bedienen. */
  touch-action: none;
  cursor: grab;
}

.photo-cropper__canvas:active {
  cursor: grabbing;
}

.photo-cropper__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-sm);
}

/* Drehen und Zoom in einer Zeile: beide bearbeiten dieselbe Vorschau und
   gehören darum zusammen, während die Zeile darunter den Dialog abschließt. */
.photo-cropper__controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Das Drehsymbol trägt den Knopf allein, `btn--icon` setzt die Schrift aber auf
   die kleine Stufe — für ein Zeichen ohne Text zu klein zum Treffen. */
.photo-cropper__rotate {
  flex-shrink: 0;
  font-size: var(--font-size-xl);
  line-height: 1;
}

.photo-cropper__zoom {
  flex: 1;
  min-width: 0;
  accent-color: var(--color-primary);
}

.photo-cropper__zoom:disabled {
  /* Bild zu klein zum Zoomen: sichtbar lassen, damit die Bedienleiste nicht
     springt, aber als nicht verfügbar kenntlich. */
  opacity: 0.4;
}