/* FotoDESK - Galerie, Zuschnitt und Seitenaufteilung.
   Baut auf main.css auf und setzt nur, was dieses Modul zusaetzlich braucht. */

.foto-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.foto-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.foto-head h1 {
  margin: 0.35rem 0 0.5rem;
  font-size: 1.35rem;
}

.foto-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  .foto-layout {
    grid-template-columns: 1fr;
  }
}

/* --- Liste --- */

.doku-liste {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.doku-zeile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  text-align: left;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25));
  border-radius: 0.6rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.doku-zeile:hover,
.doku-zeile.is-active {
  border-color: #0e97ad;
  background: rgba(14, 151, 173, 0.08);
}

.doku-zeile-titel {
  font-weight: 600;
}

.doku-zeile-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
  opacity: 0.85;
}

.badge-entwurf {
  background: rgba(148, 163, 184, 0.2);
}
.badge-abgelegt {
  background: rgba(14, 151, 173, 0.2);
}
.badge-archiviert {
  background: rgba(34, 197, 94, 0.2);
}
.badge-archivierung_fehlgeschlagen {
  background: rgba(239, 68, 68, 0.25);
}

/* --- Detail --- */

.detail-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.detail-kopf h2 {
  margin: 0.3rem 0 0.2rem;
}

.detail-unterzeile {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

.detail-aktionen {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.block {
  margin-top: 1.5rem;
}

.hinweis {
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  background: rgba(14, 151, 173, 0.12);
  font-size: 0.9rem;
}

.hinweis-fehler {
  background: rgba(239, 68, 68, 0.15);
}

.hinweis-klein {
  margin: 0.4rem 0 0.8rem;
  font-size: 0.82rem;
  opacity: 0.75;
}

.ordner-zeile,
.upload-zeile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ordner-liste {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 16rem;
  overflow-y: auto;
}

.fortschritt {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* --- Galerie --- */

.galerie {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.9rem;
}

/* Einfuegestelle beim Umsortieren; sitzt mittig in der Spaltenluecke. */
.einfuege-strich {
  position: absolute;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: #2f7bff;
  box-shadow: 0 0 6px rgba(47, 123, 255, 0.7);
  pointer-events: none;
}

.einfuege-strich[hidden] {
  display: none;
}

.foto {
  margin: 0;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25));
  border-radius: 0.6rem;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.35);
  cursor: grab;
}

.foto.wird-gezogen {
  opacity: 0.4;
}

.foto img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: #0b1220;
}

.foto figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.75rem;
}

.foto-platz {
  opacity: 0.8;
}

.foto-knoepfe {
  display: flex;
  gap: 0.3rem;
}

.btn-mini {
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
  border-radius: 0.35rem;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.3));
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.btn-mini:hover {
  border-color: #0e97ad;
}

.btn-mini-warn:hover {
  border-color: #ef4444;
  color: #ef4444;
}

/* --- Zuschnitt-Dialog --- */

.crop-dialog {
  width: min(92vw, 960px);
  border: none;
  border-radius: 0.8rem;
  padding: 0;
  background: #0f172a;
  color: #e2e8f0;
}

.crop-dialog::backdrop {
  background: rgba(2, 6, 23, 0.75);
}

.crop-dialog-body {
  padding: 1rem;
}

.crop-buehne {
  max-height: 70vh;
  overflow: hidden;
}

.crop-buehne img {
  max-width: 100%;
}

.crop-aktionen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.crop-aktionen .spacer {
  flex: 1 1 auto;
}

/* --- PDF-Vorschau im Modal --- */

.pdf-vorschau {
  width: 100%;
  height: min(72vh, 900px);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  border-radius: 0.6rem;
  background: #fff;
}

/* Ein gesperrter Knopf muss als gesperrt erkennbar sein - sonst sieht es aus,
   als reagiere er nicht. Den Grund nennt sein `title`. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Groessere Anfasser am Zuschnittrahmen ---
   Cropper.js liefert 5 px grosse Punkte; die trifft man mit der Maus kaum. Sie liegen ueber
   `left/top` plus negativem Versatz auf dem Rahmen, deshalb muss jeder Versatz die halbe neue
   Kantenlaenge tragen. Der Dialog steht als zusaetzliche Stufe davor, damit die Regeln auch
   dann gewinnen, wenn das CDN-Blatt einmal nach diesem geladen wird. */

.crop-dialog .cropper-point {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #0e97ad;
  border: 2px solid #fff;
  opacity: 1;
  box-shadow: 0 1px 4px rgba(2, 6, 23, 0.55);
}

.crop-dialog .cropper-point.point-n {
  top: -8px;
  margin-left: -8px;
}

.crop-dialog .cropper-point.point-s {
  bottom: -8px;
  margin-left: -8px;
}

.crop-dialog .cropper-point.point-w {
  left: -8px;
  margin-top: -8px;
}

.crop-dialog .cropper-point.point-e {
  right: -8px;
  margin-top: -8px;
}

.crop-dialog .cropper-point.point-nw {
  top: -8px;
  left: -8px;
}

.crop-dialog .cropper-point.point-ne {
  top: -8px;
  right: -8px;
}

.crop-dialog .cropper-point.point-sw {
  bottom: -8px;
  left: -8px;
}

/* Die Ecke unten rechts ist bei Cropper von Haus aus groesser und behaelt diesen Vorsprung. */
.crop-dialog .cropper-point.point-se {
  width: 22px;
  height: 22px;
  bottom: -11px;
  right: -11px;
}

/* Cropper legt hinter die Ecke unten rechts eine unsichtbare, doppelt so grosse Trefferflaeche.
   Die bleibt: sie hilft genau bei dem, worum es hier geht. */

/* Auch die Kanten dazwischen sollen greifbar sein, nicht nur die Punkte. */
.crop-dialog .cropper-line {
  opacity: 0.35;
}

.crop-dialog .cropper-line.line-n,
.crop-dialog .cropper-line.line-s {
  height: 8px;
}

.crop-dialog .cropper-line.line-n {
  top: -4px;
}

.crop-dialog .cropper-line.line-s {
  bottom: -4px;
}

.crop-dialog .cropper-line.line-w,
.crop-dialog .cropper-line.line-e {
  width: 8px;
}

.crop-dialog .cropper-line.line-w {
  left: -4px;
}

.crop-dialog .cropper-line.line-e {
  right: -4px;
}

.crop-position {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-left: 0.5rem;
}

/* --- Rechnungsscan (rechnungen.html) ---
   Wird fast nur am Handy bedient: eine Spalte, groessere Tippflaechen. */

.scan-shell {
  max-width: 760px;
  margin-inline: auto;
}

.scan-titel {
  margin: 0.35rem 0 0.5rem;
  font-size: 1.35rem;
}

.scan-schritt .section-divider:not(:first-child) {
  margin-top: 1.25rem;
}

.scan-shell .btn-mini {
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
}

.scan-art {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 520px) {
  .scan-art {
    grid-template-columns: 1fr;
  }
}

.scan-ziel,
.scan-fotos-kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.scan-ziel-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.scan-ziel-name.is-leer {
  color: var(--text-muted);
  font-weight: 400;
}

.scan-aktion .btn-primary {
  width: 100%;
  padding-block: 0.8rem;
  font-size: 1rem;
}

.scan-warnung {
  color: var(--danger);
  font-weight: 600;
}

.scan-liste {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scan-zeile {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
}

.scan-zeile.is-fehler {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.scan-zeile-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.scan-seiten {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.scan-seite {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.scan-seite img {
  height: 72px;
  width: auto;
  max-width: 96px;
  object-fit: cover;
  border-radius: 0.3rem;
  background: #000;
}

.scan-status {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.scan-status--laeuft {
  color: var(--accent);
}

.scan-status--ok {
  color: var(--success);
  font-weight: 600;
}

.scan-status--fehler {
  color: var(--danger);
  font-weight: 600;
}

.scan-datei,
.scan-meldung {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.scan-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.scan-zusammenfassung {
  margin: 0.4rem 0 0;
  font-weight: 600;
}

.ordner-kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ordner-browser .ordner-liste {
  max-height: 20rem;
}

.ordner-browser .ordner-liste .btn-mini {
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
}

.ordner-link-zeile {
  display: flex;
  gap: 0.5rem;
}

.ordner-link-zeile input {
  flex: 1;
  min-width: 0;
}

.foto-head-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}