/*
 * Lieferschein-Sign-Dialog (v9.5)
 * Vollbild-Modal mit PDF.js-Renderer + Element-Layer.
 */

/* ---- Overlay + Shell ---- */
.lssign-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 14, 22, 0.92);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}

.lssign-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0d1117;
  color: #e6edf3;
  min-height: 0;
}

/* ---- Toolbar ---- */
.lssign-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.lssign-title {
  font-size: 16px;
  font-weight: 600;
  color: #f0f6fc;
}
.lssign-tools {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
/* v9.5.1: Touch-Targets >= 44x44 - Apple Human Interface Guidelines.
   touch-action: manipulation entfernt 300ms-Tap-Delay auf iOS und verhindert
   Pinch-Zoom-Gesten in den Buttons. */
.lssign-tool {
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  padding: 11px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  min-height: 44px;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s;
}
.lssign-tool:hover { background: #30363d; border-color: #484f58; }
.lssign-tool.active {
  background: #1f6feb;
  border-color: #58a6ff;
  color: #fff;
}
.lssign-tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lssign-tool-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: #30363d;
  margin: 0 4px;
}
.lssign-del { color: #ff7b72; }
.lssign-del:not(:disabled):hover { background: #4a1f1f; border-color: #f85149; }

.lssign-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.lssign-zbtn {
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  touch-action: manipulation;
}
.lssign-zbtn:hover { background: #30363d; }
.lssign-zoom-val {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #8b949e;
  min-width: 50px;
  text-align: center;
}
.lssign-close {
  background: transparent;
  color: #8b949e;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px 14px;
  margin-left: 6px;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}
.lssign-close:hover { color: #f85149; }

/* ---- Stage (Scroll-Bereich) ---- */
/* v9.5.1: touch-action: pan-y erlaubt vertikales Scrollen mit zwei Fingern,
   ohne dass das Pinch-Zoom oder Doppelt-Tap-Zoom triggert. Pinch zum
   PDF-Skalieren ist nicht implementiert; User nutzt die +/- Buttons. */
.lssign-stage {
  flex: 1 1 auto;
  overflow: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: #010409;
  min-height: 0;
  /* v9.7: war 'pan-y' (nur vertikal scrollen) -> auf 'auto', damit auch
     horizontal gescrollt werden kann wenn das PDF auf Smartphone breiter
     als der Viewport ist. Pinch-Zoom auf der Stage ist weiterhin nicht
     gewuenscht; das wird ueber .lssign-elems separat geregelt. */
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
}
.lssign-loading,
.lssign-error {
  color: #8b949e;
  font-size: 15px;
  margin-top: 80px;
  text-align: center;
}
.lssign-error {
  color: #ff7b72;
  white-space: pre-wrap;
}

/* ---- Eine PDF-Seite ---- */
.lssign-page {
  position: relative;
  background: #fff;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
}
.lssign-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lssign-elems {
  position: absolute;
  inset: 0;
  /* Layer ist klickbar, sonst kommen die Werkzeug-Klicks nicht durch */
  cursor: crosshair;
}
/* Wenn kein Tool aktiv: Standard-Cursor */
.lssign-elems:not(.tool-active) { cursor: default; }

/* ---- Element-Basis ---- */
.lse {
  position: absolute;
  border: 1px dashed transparent;
  user-select: none;
  -webkit-user-select: none;
}
.lse:hover {
  border-color: rgba(31, 111, 235, 0.5);
}
.lse.selected {
  border: 1px solid #1f6feb;
  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.3);
}
/* v9.5.1: Resize-Handle fuer Touch-Bedienung deutlich groesser (24x24).
   touch-action: none verhindert, dass die Resize-Geste den Stage scrollt. */
.lse-resize {
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 24px;
  height: 24px;
  background: #1f6feb;
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: nwse-resize;
  display: none;
  z-index: 2;
  touch-action: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.lse.selected .lse-resize { display: block; }

/* ---- Text-Element ---- */
.lse-text {
  cursor: move;
  background: rgba(255, 255, 255, 0.0);
}
.lse-text input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #101820;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 22px;
}
.lse-text input:focus { background: rgba(31, 111, 235, 0.06); }

/* ---- Signatur-Element ---- */
.lse-sign {
  cursor: move;
  background: transparent;
}
.lse-sign img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ---- Freihand-Stroke-Element ---- */
.lse-stroke {
  cursor: move;
}
.lse-stroke-cv {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  background: transparent;
}

/* ---- Footer ---- */
.lssign-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #161b22;
  border-top: 1px solid #30363d;
  flex: 0 0 auto;
}
.lssign-hint {
  flex: 1;
  font-size: 12px;
  color: #8b949e;
  line-height: 1.4;
}
.lssign-cancel,
.lssign-ok {
  padding: 12px 22px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #c9d1d9;
  cursor: pointer;
  font-size: 15px;
  min-height: 44px;
  touch-action: manipulation;
}
.lssign-cancel:hover { background: #30363d; }
.lssign-ok {
  background: #238636;
  border-color: #2ea043;
  color: #fff;
  font-weight: 600;
}
.lssign-ok:hover { background: #2ea043; }
.lssign-ok:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---- Signatur-Pad (Modal im Modal) ---- */
.lssign-pad-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lssign-pad-shell {
  background: #fff;
  color: #101820;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  width: min(95vw, 640px);
  max-width: 95vw;
  overflow: hidden;
}
.lssign-pad-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f6f8fa;
  border-bottom: 1px solid #d0d7de;
}
.lssign-pad-title {
  font-weight: 600;
  font-size: 15px;
}
.lssign-pad-clear {
  background: #fff;
  border: 1px solid #d0d7de;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  min-height: 44px;
  touch-action: manipulation;
}
.lssign-pad-clear:hover { background: #f0f3f6; }
.lssign-pad-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  background: #fff;
  background-image:
    linear-gradient(to right, transparent 0, transparent calc(50% - 1px), #e6e6e6 calc(50% - 1px), #e6e6e6 50%, transparent 50%),
    linear-gradient(to bottom, transparent calc(75% - 1px), #cfcfcf calc(75% - 1px), #cfcfcf 75%, transparent 75%);
  cursor: crosshair;
  touch-action: none;
}
.lssign-pad-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  background: #f6f8fa;
  border-top: 1px solid #d0d7de;
}
.lssign-pad-cancel,
.lssign-pad-ok {
  padding: 12px 22px;
  border-radius: 6px;
  border: 1px solid #d0d7de;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  min-height: 44px;
  touch-action: manipulation;
}
.lssign-pad-cancel:hover { background: #f0f3f6; }
.lssign-pad-ok {
  background: #2da44e;
  color: #fff;
  border-color: #2c974b;
  font-weight: 600;
}
.lssign-pad-ok:hover { background: #2c974b; }

/* ---- Touch-/Stift-Support ----
   v9.5.1: Stage erlaubt vertikales Scrollen mit Touch.
   Element-Layer erbt pan-y, blockiert es aber wenn ein Werkzeug aktiv ist
   (sonst wuerden Stroke-Bewegungen als Scroll interpretiert).
   Element-Bodies (.lse) und Stroke-Canvas haben generell touch-action: none,
   damit Drag/Resize/Drawing klar von Browser-Gesten getrennt sind. */
.lssign-elems {
  /* v9.5.1: Layer hat immer mindestens pan-y, damit User auch ohne aktives
     Werkzeug vertikal scrollen kann (statt Doppel-Tap-Zoom auszuloesen). */
  touch-action: pan-y;
}
.lssign-elems.tool-active {
  /* Werkzeug aktiv: Browser darf die Geste nicht als Scroll re-klassifizieren */
  touch-action: none;
}
.lse,
.lse-stroke-cv,
.lse-resize {
  touch-action: none;
}

/* ---- Sign-Button im Lieferschein-Info-Block des Slot-Dialogs ---- */
.lieferschein-info .li-actions button.li-sign {
  background: #238636;
  color: #fff;
  border-color: #2ea043;
  font-weight: 600;
}
.lieferschein-info .li-actions button.li-sign:hover {
  background: #2ea043;
}
body.light-mode .lieferschein-info .li-actions button.li-sign {
  background: #2da44e;
  border-color: #2c974b;
  color: #fff;
}

/* ---- Sign-Option im Popover (Klick auf Slot-Card-Badge) ---- */
.ls-action-pop .ls-pop-btn.ls-pop-sign {
  background: rgba(46, 160, 67, 0.18);
  font-weight: 600;
  color: #56d364;
}
body.light-mode .ls-action-pop .ls-pop-btn.ls-pop-sign {
  background: rgba(45, 164, 78, 0.12);
  color: #1f7a3a;
}

/* ---- v9.5: Abgeschlossene Lieferscheine im Slot-/Pipeline-Detail ---- */
.ls-abg-wrap {
  background: rgba(46, 160, 67, 0.10);
  border: 1px solid rgba(46, 160, 67, 0.45);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.ls-abg-head {
  font-size: 12px;
  font-weight: 600;
  color: #56d364;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ls-abg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(46, 160, 67, 0.18);
}
.ls-abg-item:first-of-type { border-top: none; padding-top: 2px; }
.ls-abg-icon {
  font-size: 18px;
  flex: 0 0 auto;
}
.ls-abg-info {
  flex: 1;
  min-width: 0;
}
.ls-abg-title {
  font-size: 13px;
  font-weight: 600;
  color: #c9d1d9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-abg-meta {
  font-size: 11px;
  color: #8b949e;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.ls-abg-meta span:not(:first-child)::before {
  content: "·";
  margin-right: 6px;
  opacity: 0.6;
}
.ls-abg-dl {
  background: #238636;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  touch-action: manipulation;
}
.ls-abg-dl:hover { background: #2ea043; color: #fff; }

.ls-abg-edit {
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  flex: 0 0 auto;
  white-space: nowrap;
  margin-right: 6px;
  min-height: 40px;
  touch-action: manipulation;
}
.ls-abg-edit:hover { background: #30363d; border-color: #484f58; }
body.light-mode .ls-abg-edit {
  background: #fff;
  color: #101820;
  border-color: #d0d7de;
}
body.light-mode .ls-abg-edit:hover { background: #f0f3f6; }

body.light-mode .ls-abg-wrap {
  background: rgba(45, 164, 78, 0.08);
  border-color: rgba(45, 164, 78, 0.4);
}
body.light-mode .ls-abg-head { color: #1f7a3a; }
body.light-mode .ls-abg-title { color: #101820; }
body.light-mode .ls-abg-meta { color: #57606a; }
body.light-mode .ls-abg-dl { background: #2da44e; }
body.light-mode .ls-abg-dl:hover { background: #2c974b; }

/* ---- Light-Mode-Anpassung ---- */
body.light-mode .lssign-shell { background: #fff; color: #101820; }
body.light-mode .lssign-bar { background: #f6f8fa; border-bottom-color: #d0d7de; }
body.light-mode .lssign-title { color: #101820; }
body.light-mode .lssign-tool { background: #fff; color: #101820; border-color: #d0d7de; }
body.light-mode .lssign-tool:hover { background: #f0f3f6; }
body.light-mode .lssign-tool.active { background: #0969da; color: #fff; border-color: #0969da; }
body.light-mode .lssign-zbtn { background: #fff; color: #101820; border-color: #d0d7de; }
body.light-mode .lssign-stage { background: #e8ecef; }
body.light-mode .lssign-foot { background: #f6f8fa; border-top-color: #d0d7de; }
body.light-mode .lssign-cancel { background: #fff; color: #101820; border-color: #d0d7de; }
body.light-mode .lssign-cancel:hover { background: #f0f3f6; }
body.light-mode .lssign-hint { color: #57606a; }
body.light-mode .lssign-zoom-val { color: #57606a; }