/* ==========================================================================
   Handy-Scan (TASKS V1.8, documents/scan, scanner_controller.js): Aufnahme mit Live-Rahmen,
   Ecken nachziehen (Griffe mit 44-px-Trefferfläche), Seitenliste mit Filter
   ========================================================================== */
.scan__panel + .scan__panel { margin-top: var(--s-space-4); }
.scan .alert { margin-bottom: var(--s-space-3); }

/* ---------- Aufnahme ---------- */
.scan__stage {
  position: relative; display: grid; place-items: center; min-height: 240px; padding: var(--s-space-2);
  border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); background: var(--s-surface-2); overflow: hidden;
}
.scan__frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.scan__frame[hidden], .scan__placeholder[hidden], .scan__shutter[hidden] { display: none; }
.scan__video { display: block; max-width: 100%; max-height: 62vh; border-radius: var(--s-radius); }
.scan__overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scan__placeholder {
  display: grid; justify-items: center; gap: var(--s-space-3); max-width: 36ch;
  padding: var(--s-space-5) var(--s-space-4); text-align: center; color: var(--s-text-2);
}
.scan__placeholder-icon { color: var(--s-accent); }

/* Auslöser wie in einer Kamera-App: runder Knopf unten auf dem Bild */
.scan__shutter {
  position: absolute; left: 50%; bottom: var(--s-space-4); transform: translateX(-50%);
  width: 68px; height: 68px; padding: 0; border: 4px solid var(--s-surface); border-radius: var(--s-radius-pill);
  background: var(--s-accent); box-shadow: var(--s-shadow-pop); cursor: pointer;
}
.scan__shutter:hover { background: var(--s-accent-hover); }
.scan__shutter:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--s-ring), var(--s-shadow-pop); }

.scan__hint { min-height: 1.5em; margin: var(--s-space-3) 0; font-size: var(--s-text-sm); color: var(--s-text-2); }
.scan__file { position: relative; cursor: pointer; }
.scan__file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.scan__file:focus-within { outline: 2px solid var(--s-accent); outline-offset: 2px; }
.scan__auto[hidden] { display: none; }

/* ---------- Ecken nachziehen ---------- */
.scan__editor-wrap { display: flex; justify-content: center; margin: var(--s-space-4) 0; }
.scan__editor { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.scan__edit-canvas { display: block; border-radius: var(--s-radius); }
.scan__handle {
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: var(--s-touch); height: var(--s-touch); padding: 0; transform: translate(-50%, -50%);
  border: 0; border-radius: var(--s-radius-pill); background: transparent; cursor: grab; touch-action: none;
}
.scan__handle:active { cursor: grabbing; }
.scan__handle-dot {
  width: 22px; height: 22px; border: 3px solid var(--s-accent); border-radius: var(--s-radius-pill);
  background: var(--s-surface); box-shadow: var(--s-shadow-pop);
}
.scan__handle:focus-visible { outline: none; }
.scan__handle:focus-visible .scan__handle-dot { box-shadow: 0 0 0 4px var(--s-ring); }

/* ---------- Seiten ---------- */
.scan__filters { flex-wrap: wrap; }
.scan__list { display: grid; gap: var(--s-space-2); margin: var(--s-space-4) 0; padding: 0; list-style: none; }
.scan__page {
  display: flex; align-items: center; gap: var(--s-space-3); padding: var(--s-space-2) var(--s-space-3);
  border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); background: var(--s-surface);
}
.scan__thumb {
  flex: none; width: auto; height: auto; max-width: 56px; max-height: 72px;
  border-radius: 2px; background: var(--s-paper); box-shadow: var(--s-shadow-paper);
}
.scan__page-label { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; }
.scan__page-actions { display: flex; gap: var(--s-space-1); }
.scan__result { margin-top: var(--s-space-4); }
.scan__result .scan__result-icon { display: none; }
.scan__result.alert--success .scan__result-icon--success,
.scan__result.alert--danger .scan__result-icon--error { display: block; }
.scan .progress { margin-top: var(--s-space-4); }

@media (max-width: 767.98px) {
  .scan__video { max-height: 58vh; }
  /* Vier Filter passen auf 375 px nicht nebeneinander: zwei pro Zeile */
  .scan__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan__page-actions { gap: 0; }
}