/* Beleg-Vergleich (Kreditoren Phase 1, Read-only-Vorschau) */

/* --border-color ist auf dieser Seite sonst nirgends definiert — ohne Alias fallen
   alle Rahmen weg (invalid at computed-value time; Fund Leergut-Review 06.07.) */
body { --border-color: var(--card-border, rgba(127, 127, 135, 0.35)); }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Volle Bildschirmbreite — die beiden Papiere sollen sich gross gegenueberstehen (User-Wunsch 03.07.) */
.container { max-width: none; margin: 0 auto; padding: 16px 22px; }

.zuord-legende {
  font-size: 0.82rem; color: var(--text-secondary);
  border: 1px dashed var(--border-color); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 12px; line-height: 1.9;
}

.demo-banner {
  background: rgba(4, 179, 214, 0.12);
  border: 1px solid rgba(4, 179, 214, 0.35);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.card-title {
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.count-badge {
  background: rgba(4, 179, 214, 0.15);
  color: #04b3d6;
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 0.8rem;
}

/* Worklist */
.worklist-items { display: flex; flex-direction: column; gap: 8px; }
.wl-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  width: 100%;
  font: inherit;
  min-height: 44px;
}
.wl-item:hover { border-color: #04b3d6; }
.wl-item.active { border-color: #04b3d6; background: rgba(4, 179, 214, 0.08); }
.wl-lief { font-weight: 600; }
.wl-nr { color: var(--text-secondary); }
.wl-datum { color: var(--text-secondary); font-size: 0.85rem; margin-left: auto; }

.status-pill {
  border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 600;
}
.status-verlinkt { background: rgba(52, 199, 89, 0.15); color: #34c759; }
.status-wartet_auf_ware { background: rgba(255, 159, 10, 0.15); color: #ff9f0a; }
.status-unparsed { background: rgba(142, 142, 147, 0.2); color: var(--text-secondary); }
.status-gutschrift, .status-storno { background: rgba(175, 82, 222, 0.15); color: #af52de; }

/* Split-View */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; } }

.we-karte {
  border: 1px solid var(--border-color); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 8px; font-size: 0.9rem;
}
.we-karte .we-meta { color: var(--text-secondary); font-size: 0.82rem; }

/* ===== Abgleich-Bloecke (v7): LS-Tabelle | RE-Tabelle je Lieferschein ===== */
.re-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.re-kopf-titel { font-size: 1rem; }

/* Jede Lieferung als klar erkennbarer KASTEN (leicht graeulich, User-Wunsch 05.07.) —
   Gesamtlayout kompakter, damit mehr auf den Bildschirm passt */
.ab-block {
  background: rgba(127, 127, 135, 0.045);
  border: 1px solid rgba(127, 127, 135, 0.45);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.ab-block.kandidat { border-style: dashed; }
.ab-block summary {
  cursor: pointer; padding: 8px 12px; min-height: 38px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  list-style: none; user-select: none; font-size: 0.88rem;
  background: rgba(127, 127, 135, 0.07);
  border-bottom: 1px solid rgba(127, 127, 135, 0.25);
}
.ab-block:not([open]) summary { border-bottom: none; }
.ab-block summary::-webkit-details-marker { display: none; }
.ab-block summary::before { content: '▸'; color: var(--text-secondary); transition: transform 0.15s; }
.ab-block[open] summary::before { transform: rotate(90deg); }
.ab-body { padding: 0 12px 12px; }
.ab-btn-zeile { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }

.beleg-btn {
  border: 1px solid var(--border-color); background: transparent; color: var(--text-primary);
  border-radius: 999px; padding: 4px 11px; cursor: pointer; font: inherit; font-size: 0.78rem;
  min-height: 36px;
}
.beleg-btn:hover { border-color: #04b3d6; color: #04b3d6; }
.beleg-btn.kandidat-btn { border-style: dashed; color: #ff9f0a; }

.ab-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .ab-grid { grid-template-columns: 1fr; } }
.ab-seite-titel { font-weight: 600; font-size: 0.82rem; margin-bottom: 4px; }

/* Vergleichstabellen: einheitlich, mit VERTIKALEN Trennlinien.
   Bewusst kraeftigere Linienfarbe als var(--border-color) — die Theme-Randfarbe
   ist im Light-Mode bei 1px-Zellrahmen praktisch unsichtbar (User-Feedback 05.07.). */
.vgl-table { --tline: rgba(127, 127, 135, 0.38); width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.vgl-table th, .vgl-table td {
  padding: 4px 8px; text-align: left;
  border-bottom: 1px solid var(--tline);
  border-right: 1px solid var(--tline);
}
.vgl-table tbody tr { cursor: pointer; }
.vgl-table tbody tr:hover td { background: rgba(4, 179, 214, 0.05); }
.vgl-table tbody tr.zeile-markiert td { background: rgba(4, 179, 214, 0.12); }
.vgl-table tbody tr.zeile-markiert td:first-child { box-shadow: inset 3px 0 0 #04b3d6; }

/* Popover "RUDI zu dieser Position fragen" */
.pos-popover {
  position: absolute; z-index: 950;
  background: var(--card-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(127, 127, 135, 0.45); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  padding: 6px; display: flex; gap: 6px;
}
.pos-popover button {
  border: 0; background: transparent; color: var(--text-primary);
  font: inherit; font-size: 0.82rem; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  min-height: 36px;
}
.pos-popover button:hover { background: rgba(4, 179, 214, 0.12); color: #04b3d6; }
.vgl-table th:first-child, .vgl-table td:first-child { border-left: 1px solid var(--tline); }
.vgl-table thead th {
  color: var(--text-secondary); font-weight: 600; font-size: 0.75rem; text-transform: uppercase;
  border-top: 1px solid var(--tline);
  background: rgba(128, 128, 128, 0.05);
}
/* innerer Tabellen-Scrollbalken nur noch auf schmalen Screens (Desktop: volle Breite, kein Quetschen) */
@media (max-width: 1100px) { .ab-seite { overflow-x: auto; } }
.vgl-table .num { text-align: right; white-space: nowrap; }
.vgl-table tr.unsicher td { color: #ff9f0a; }

.zelle-match { background: rgba(52, 199, 89, 0.22); font-weight: 600; }
.zelle-gepaart { background: rgba(52, 199, 89, 0.08); }
.legende-swatch { border-radius: 4px; padding: 1px 8px; }

/* Leergut/Pfand-Sektion je Lieferung (getrennt von der Ware, wird berechnet) */
.pfand-grid {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed rgba(127, 127, 135, 0.45);
}
.pfand-table { max-width: 560px; }
.pfand-hinweis { font-weight: 400; font-size: 0.75rem; color: var(--text-secondary); }
.kg-hinweis { color: var(--text-secondary); font-size: 0.78rem; font-weight: 400; }

/* Beleg-Panel: fixiertes Overlay rechts — kein Layout-Sprung beim Ein-/Ausblenden */
.beleg-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 900;
  width: min(46vw, 900px);
  background: var(--card-bg);
  backdrop-filter: blur(18px) saturate(1.15); /* Glas bleibt, aber gescrollter Inhalt scheint nicht mehr stoerend durch */
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-left: 1px solid var(--border-color);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
  display: flex; flex-direction: column;
}
.beleg-panel.klein { width: min(26vw, 480px); }
@media (max-width: 900px) { .beleg-panel, .beleg-panel.klein { width: 100vw; } }

/* Bei offenem Panel: Seite behaelt die VOLLE Breite (nichts wird gequetscht/
   umgebrochen) und wird horizontal scrollbar — der User schiebt sich den
   gewuenschten Ausschnitt neben die Rechnung (User-Wunsch 05.07., v2).
   Beim Oeffnen verspringt nichts: scrollX bleibt 0, Layout unveraendert. */
/* Scrollraum setzt JS exakt (body.style.minWidth = Container + Panel + Puffer) —
   CSS-Naeherungen reichten nicht bis zur letzten Tabellenspalte (User-Test 05.07.) */
.beleg-panel-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border-color); font-weight: 600;
}
.beleg-panel-btns { display: flex; gap: 6px; }
.beleg-panel-btns button {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border-color);
  background: transparent; color: var(--text-primary); cursor: pointer; font-size: 1rem;
}
.beleg-panel-btns button:hover { border-color: #04b3d6; color: #04b3d6; }
.beleg-panel-body { flex: 1; overflow: auto; padding: 12px; }
.beleg-panel-body object { width: 100%; height: 100%; min-height: 70vh; border: 0; }
.beleg-panel-body img {
  width: 100%; display: block; margin-bottom: 12px; border-radius: 8px;
  border: 1px solid var(--border-color); cursor: zoom-in;
  max-width: none; /* JS steuert die Breite beim Zoomen (>100%) */
}
.beleg-panel-body.gezoomt img { cursor: zoom-out; }

.block-summe {
  margin-left: auto; font-weight: 700; font-size: 0.95rem;
  color: var(--text-primary);
}
.vgl-table tfoot .summen-zeile td {
  font-weight: 700; background: rgba(128, 128, 128, 0.06);
  border-top: 2px solid var(--tline);
}

/* Lieferungen als Aufklapp-Karten (Sammelrechnungen) */
.we-acc {
  border: 1px solid var(--border-color); border-radius: 12px;
  margin-bottom: 10px; overflow: hidden;
}
.we-acc.kandidat { border-style: dashed; }
.we-acc summary {
  cursor: pointer; padding: 12px 14px; min-height: 44px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  list-style: none; user-select: none;
}
.we-acc summary::-webkit-details-marker { display: none; }
.we-acc summary::before { content: '▸'; color: var(--text-secondary); transition: transform 0.15s; }
.we-acc[open] summary::before { transform: rotate(90deg); }
.we-acc-body { padding: 0 14px 14px; }
.acc-fotos { margin-left: auto; color: var(--text-secondary); font-size: 0.82rem; }

.zuord-badge { border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; font-weight: 600; }
.zuord-badge.gruen { background: rgba(52, 199, 89, 0.15); color: #34c759; }
.zuord-badge.gelb  { background: rgba(255, 159, 10, 0.15); color: #ff9f0a; }

/* Lieferschein-Papiere GROSS */
.ls-preview-wrap { display: flex; flex-direction: column; gap: 10px; }
.ls-preview {
  width: 100%; border: 1px solid var(--border-color); border-radius: 10px;
  padding: 0; background: rgba(128,128,128,0.05); cursor: zoom-in; overflow: hidden;
}
.ls-preview img { width: 100%; object-fit: contain; display: block; } /* volle Spaltenbreite — lesbar ohne Lightbox */

/* LS-Zeilen-Tabelle (Vision, unbestaetigt) */
.ls-zeilen { margin-bottom: 12px; }
.ls-zeilen-titel { font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.ki-hinweis { font-weight: 400; font-size: 0.78rem; color: var(--text-secondary); }
.ls-zeilen-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ls-zeilen-table th, .ls-zeilen-table td { padding: 6px 10px; border-bottom: 1px dashed var(--border-color); text-align: left; }
.ls-zeilen-table th { color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; }
.ls-zeilen-table .num { text-align: right; white-space: nowrap; }
.ls-zeilen-table tr.unsicher td { color: #ff9f0a; }
.waren-label { color: var(--text-secondary); font-size: 0.82rem; margin: 12px 0 4px; }

.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 8px; }
.foto-thumb {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border-color);
  cursor: pointer; background: rgba(128,128,128,0.08);
  padding: 0;
}
.foto-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.foto-typ { font-size: 0.7rem; color: var(--text-secondary); text-align: center; margin-top: 2px; }

.re-meta { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.re-meta strong { color: var(--text-primary); }
.badge-typ { font-size: 0.75rem; color: var(--text-secondary); }

.pdf-wrap { height: 76vh; min-height: 560px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-color); }
.pdf-wrap object, .pdf-wrap iframe { width: 100%; height: 100%; border: 0; }
.pdf-fallback { padding: 20px; color: var(--text-secondary); }
.pdf-fallback a { color: #04b3d6; }
.pdf-tab-link { display: inline-block; margin-top: 6px; font-size: 0.82rem; color: #04b3d6; text-decoration: none; }
@media (max-width: 900px) { .pdf-wrap { height: 60vh; min-height: 420px; } }

/* Positions-Tabelle */
.table-scroll { overflow-x: auto; }
.pos-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 560px; }
.pos-table th, .pos-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-color); text-align: left; }
.pos-table th { color: var(--text-secondary); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; }
.pos-table .num { text-align: right; }
.pos-table tr.ls-gruppe td {
  background: rgba(4, 179, 214, 0.08);
  font-weight: 600; font-size: 0.85rem;
  border-bottom: 1px solid var(--border-color);
  padding-top: 10px;
}

.ls-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ls-chip {
  background: rgba(4, 179, 214, 0.12); color: #04b3d6;
  border-radius: 999px; padding: 1px 9px; font-size: 0.75rem;
}

.empty-hint { color: var(--text-secondary); font-size: 0.9rem; padding: 8px 0; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: flex-start; justify-content: center;
  overflow: auto; padding: 24px;
}
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 8px; cursor: zoom-in; margin: auto; }
.lightbox.zoomed img { max-width: none; max-height: none; width: 170vw; cursor: zoom-out; margin: 0; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); color: #fff;
  border: 0; font-size: 1.2rem; cursor: pointer;
}

.loading-state { text-align: center; padding: 40px; color: var(--text-secondary); }
.hidden { display: none !important; }

/* ===== Mengen-Ampel (Toleranz LS <-> RE, 06.07.2026) ===== */
.vgl-table th.ampel-col, .vgl-table td.ampel-col { width: 24px; min-width: 24px; text-align: center; padding-left: 4px; padding-right: 4px; }
.ampel-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; }
.ampel-gruen { background: #2da44e; }
.ampel-gelb  { background: #d4a72c; }
.ampel-rot   { background: #cf222e; }
.ampel-grau  { background: rgba(127,127,135,.55); }
.ampel-mini { margin-left: 10px; font-size: .78rem; display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
.ampel-mini .ampel-dot { width: 9px; height: 9px; margin-right: 3px; }
.zuord-legende .ampel-dot { margin: 0 2px; }