/* =========================================================
   Rechnungsbearbeitung Spike – app.css
   Design-Tokens exakt aus design_handoff_rechnungsbearbeitung
   ========================================================= */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Source Sans 3', sans-serif;
  color: #1A1A2E;
  background: #FAFBFC;
  font-size: 14px;
}
input, textarea, button, select {
  font-family: inherit;
}
input:focus, textarea:focus {
  border-color: #5E86A0 !important;
  box-shadow: 0 0 0 3px rgba(94,134,160,0.18) !important;
  outline: none;
}
input.low-conf:focus, textarea.low-conf:focus {
  border-color: #C99A2E !important;
  box-shadow: 0 0 0 3px rgba(201,154,46,0.18) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #C4CDD5; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   LAYOUT SHELL
   ========================================================= */
#app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* --- Sidebar --- */
#sidebar {
  width: 300px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #004580 0%, #003360 100%);
  padding: 20px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transition: width 0.2s;
}
#sidebar.hidden {
  display: none;
}

/* Sidebar brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.sidebar-brand-badge {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #004580;
  font-size: 15px;
  flex-shrink: 0;
}
.sidebar-brand-name {
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  line-height: 1;
}
.sidebar-brand-sub {
  color: rgba(255,255,255,0.6);
  font-size: 9px;
  letter-spacing: 0.3px;
}

/* Sidebar filter section */
.sidebar-section-label {
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.sidebar-status-label {
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}
.filter-checks {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 16px;
}
.filter-check-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.check-box-empty {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.5);
  box-sizing: border-box;
  flex-shrink: 0;
  display: inline-block;
}
.check-box-checked {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #004580;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.sidebar-search {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 9px 11px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  margin-bottom: 16px;
  width: 100%;
  outline: none;
}
.sidebar-search::placeholder { color: rgba(255,255,255,0.5); }
.sidebar-search:focus {
  border-color: rgba(255,255,255,0.6) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12) !important;
}
.filter-empty-hint {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  padding: 10px 4px;
  text-align: center;
}

/* Rechnungsstapel section */
.stapel-section {
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.stapel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 10px;
}
.stapel-header-label {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stapel-toggle-btn {
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Collapsed single card */
.collapsed-card {
  cursor: pointer;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 12px;
  flex-shrink: 0;
}
.collapsed-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.collapsed-card-name {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collapsed-card-sub {
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
}

/* Expanded invoice list */
.invoice-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.invoice-row {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.invoice-row.selected {
  background: rgba(255,255,255,0.2);
}
.invoice-row.reviewed {
  background: rgba(20,102,74,0.35);
}
.invoice-row-body {
  flex: 1;
  min-width: 0;
}
.invoice-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.invoice-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-row-amount {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.invoice-row-bottom {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
}
.invoice-row-ids {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}
.prufen-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #805C07;
  background: #FDF5E6;
  border: 1px solid #ecdcb4;
  padding: 1px 6px;
  border-radius: 5px;
}

/* Sidebar checkbox */
.sidebar-checkbox {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.5);
}
.sidebar-checkbox:checked {
  background: #fff;
  border-color: #fff;
}

/* Delete button */
.delete-checked-btn {
  width: 100%;
  margin-top: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: not-allowed;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}
.delete-checked-btn.enabled {
  background: #fff;
  color: #C0392B;
  border: 1px solid #fff;
  cursor: pointer;
}

/* Status dots */
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.dot-sm {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* =========================================================
   MAIN COLUMN
   ========================================================= */
#main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Header bar */
#header-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: #fff;
  border-bottom: 1px solid #DDE2E8;
  flex-shrink: 0;
}
.header-title {
  font-size: 19px;
  font-weight: 700;
  color: #1A1A2E;
}
.llm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EBF5FB;
  border: 1px solid #d4e8f4;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #155A82;
}
.llm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #155A82;
}
.spacer { flex: 1; }

/* Stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stepper-sep {
  color: #C4CDD5;
  font-size: 14px;
}
.step-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}
.step-pill.active {
  background: #004580;
}
.step-pill.done {
  background: #E8F5EF;
}
.step-pill.future {
  background: #F4F6F8;
}
.step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.step-pill.active .step-num { background: #fff; color: #004580; }
.step-pill.done .step-num { background: #14664A; color: #fff; }
.step-pill.future .step-num { background: #C4CDD5; color: #fff; }
.step-label {
  font-size: 12px;
  font-weight: 700;
}
.step-pill.active .step-label { color: #fff; }
.step-pill.done .step-label { color: #14664A; }
.step-pill.future .step-label { color: #657180; }

.abmelden-btn {
  font-size: 13px;
  font-weight: 600;
  color: #44555F;
  border: 1.5px solid #DDE2E8;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  background: #fff;
}
.abmelden-btn:hover { background: #F4F6F8; }

/* =========================================================
   KPI ROW
   ========================================================= */
#kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 22px 0;
  flex-shrink: 0;
}
.kpi-card {
  background: #fff;
  border: 1px solid #DDE2E8;
  border-radius: 10px;
  padding: 13px 16px;
}
.kpi-card.amber {
  background: #FDF8EC;
  border-color: #ecdcb4;
}
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5A6474;
  margin-bottom: 4px;
}
.kpi-card.amber .kpi-label { color: #805C07; }
.kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: #1A1A2E;
}
.kpi-card.blue .kpi-value { color: #155A82; }
.kpi-card.amber .kpi-value { color: #805C07; }

/* All-reviewed banner */
#all-reviewed-banner {
  margin: 14px 22px 0;
  background: #E8F5EF;
  border: 1px solid #bfe4d2;
  border-radius: 10px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
#all-reviewed-banner span {
  font-size: 13px;
  color: #14664A;
  flex: 1;
}
.weiter-btn {
  background: #14664A;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* =========================================================
   WORK AREA
   ========================================================= */
#work-area {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
  padding-top: 16px;
  overflow: hidden;
}

/* Form panel */
#form-panel {
  overflow-y: auto;
  padding: 4px 22px 22px;
  min-height: 0;
}

/* Invoice header (title + badges) */
.invoice-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ECEEF1;
}
.invoice-title {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A2E;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-success { background: #E8F5EF; color: #14664A; }
.badge-warning { background: #FDF5E6; color: #805C07; }
.badge-danger  { background: #FDEDEB; color: #C0392B; }
.badge-info    { background: #EBF5FB; color: #155A82; }
.badge-primary { background: #E6EEF5; color: #004580; }

/* =========================================================
   RG FORMULAR
   ========================================================= */
.form-section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #5E86A0;
  margin: 0 0 13px;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-bottom: 24px;
}
.form-grid-2.mb14 {
  margin-bottom: 14px;
}
.form-field { /* single field wrapper */ }
.form-field-full {
  grid-column: 1 / -1;
}
.field-label {
  font-size: 12px;
  font-weight: 600;
  color: #5A6474;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.form-mb14 { margin-bottom: 14px; }
.form-mb24 { margin-bottom: 24px; }
.field-hint {
  font-size: 11px;
  color: #8B95A3;
  margin-top: 4px;
}

/* Input styles */
.inp-base {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid #DDE2E8;
  background: #fff;
  font-size: 14px;
  color: #1A1A2E;
  font-family: inherit;
  outline: none;
}
.inp-base:focus {
  border-color: #5E86A0;
  box-shadow: 0 0 0 3px rgba(94,134,160,0.18);
}
.inp-low {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1.5px solid #C99A2E;
  background: #FDF8EC;
  font-size: 14px;
  color: #1A1A2E;
  font-family: inherit;
  outline: none;
  box-shadow: 0 0 0 3px rgba(201,154,46,0.12);
}
.inp-low:focus {
  border-color: #C99A2E;
  box-shadow: 0 0 0 3px rgba(201,154,46,0.18);
}
.inp-ro {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid #E4E8ED;
  background: #F4F6F8;
  font-size: 14px;
  color: #5A6474;
  font-family: inherit;
  outline: none;
}
.inp-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
textarea.inp-base, textarea.inp-low {
  min-height: 60px;
  resize: vertical;
  line-height: 1.4;
}

/* Confidence pill */
.conf-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.conf-green { background: #E8F5EF; color: #14664A; }
.conf-amber { background: #FDF5E6; color: #805C07; }
.conf-red   { background: #FDEDEB; color: #C0392B; }

/* Skonto segmented toggle */
.skonto-toggle {
  display: flex;
}
.skonto-toggle button {
  flex: 1;
  padding: 9px 0;
  border: 1px solid #DDE2E8;
  background: #fff;
  color: #5A6474;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.skonto-toggle button:first-child {
  border-radius: 8px 0 0 8px;
}
.skonto-toggle button:last-child {
  border-radius: 0 8px 8px 0;
  border-left: none;
}
.skonto-toggle button.active {
  background: #004580;
  color: #fff;
  border-color: #004580;
}

/* Aufteilung */
.aufteilung-label {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13px;
  color: #1A1A2E;
  font-weight: 600;
  margin-bottom: 0;
}
.aufteilung-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #004580;
  cursor: pointer;
}
.tooltip-q {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.2px solid #A7B0BC;
  color: #8B95A3;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}
.split-panel {
  margin-top: 4px;
}
/* 5e.1: Split-Grid 4 Spalten, per-Row-Labels */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 36px;
  gap: 8px;
  margin-bottom: 10px;
  align-items: end;
}
.split-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.split-cell-label {
  font-size: 12px;
  font-weight: 600;
  color: #5A6474;
  margin-bottom: 5px;
}
/* Alte Klassen: totes CSS, rückwärtskompatibel */
.split-row-header { display: none; }
.split-nr { display: none; }
.split-col-label { font-size: 11px; font-weight: 600; color: #8B95A3; }
.split-inp {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid #DDE2E8;
  background: #fff;
  font-size: 14px;
  color: #1A1A2E;
  font-family: inherit;
  outline: none;
}
.split-inp:focus {
  border-color: #5E86A0;
  box-shadow: 0 0 0 3px rgba(94,134,160,0.18);
}
.split-remove {
  width: 32px;
  height: 32px;
  border: 1px solid #DDE2E8;
  background: #fff;
  border-radius: 8px;
  color: #C0392B;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.add-split-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #004580;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.add-split-btn:hover { text-decoration: underline; }
.split-sum {
  font-size: 12px;
  color: #8B95A3;
}
.split-sum strong { color: #1A1A2E; }
.split-sum-ok { color: #14664A; }
.split-sum-ok strong { color: #14664A; }
.split-sum-err { color: #C0392B; }
.split-sum-err strong { color: #C0392B; }
.split-inp-err {
  border-color: #C0392B !important;
  box-shadow: 0 0 0 2px rgba(192,57,43,0.15);
}
.split-inp-warn {
  border-color: #C99A2E !important;
  background: #FDF8EC !important;
  box-shadow: 0 0 0 3px rgba(201,154,46,0.12) !important;
}
.split-field-err {
  font-size: 11px;
  color: #C0392B;
}
/* Fehlerzeile unter split-row – gleiche Grid-Struktur, kein Höheneinfluss auf den Row-Grid */
.split-err-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 36px;
  gap: 8px;
  margin-top: -6px;
  margin-bottom: 6px;
}
/* Kreditor warn banner */
.kreditor-warn {
  margin-top: 18px;
  background: #FDF8EC;
  border: 1px solid #ecdcb4;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: #805C07;
}

/* "aus OCR" pill */
.ocr-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #155A82;
  background: #EBF5FB;
  border: 1px solid #cfe4f1;
  padding: 1px 6px;
  border-radius: 5px;
}

/* Anhänge section */
.upload-ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F4F6F8;
  border: 1px solid #E4E8ED;
  border-radius: 8px;
  padding: 12px 14px;
}
.upload-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #DDE2E8;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #1A1A2E;
  cursor: pointer;
  font-family: inherit;
}
.upload-hint {
  font-size: 12px;
  color: #8B95A3;
}

/* Form bottom actions */
.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid #ECEEF1;
}
.speichern-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #44555F;
  border: 1.5px solid #DDE2E8;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* Naht 5a: Busy-Disable für Prüfen-Screen-Aktionen (Doppelklick-Schutz sichtbar) */
.speichern-btn:disabled,
.geprueft-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Collapsible accordions – Kreditor/WIE anlegen: Box-Rahmen */
.accordion-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #DDE2E8;
  border-radius: 8px;
  padding: 12px 16px;
  background: #fff;
  user-select: none;
}
.accordion-trigger.open {
  border-radius: 8px 8px 0 0;
}
.accordion-chevron {
  color: #657180;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.accordion-chevron.open {
  transform: rotate(90deg);
}
.accordion-title {
  font-size: 14px;
  color: #1A1A2E;
}
.accordion-plus {
  color: #44555F;
  font-weight: 700;
  font-size: 15px;
}
.accordion-body {
  border: 1px solid #DDE2E8;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 16px;
  background: #FAFBFC;
}
/* Rohdaten-Trigger: komplett rahmenlos */
.rohdaten-trigger {
  border: none;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
}
.rohdaten-trigger.open {
  border-radius: 0; /* kein Flat-Bottom – Body erscheint getrennt mit margin */
}
.rohdaten-body {
  border: 1px solid #DDE2E8;
  border-radius: 8px;
  margin-top: 6px;
  padding: 14px 16px;
  background: #1A1A2E;
}
.rohdaten-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #C4CDD5;
}
.accordions-wrap {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================================================
   RG BELEG (right sticky panel)
   ========================================================= */
#beleg-panel {
  border-left: 1px solid #DDE2E8;
  padding: 4px 18px 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.beleg-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.beleg-chrome {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 320px;
  background: #fff;
  border: 1px solid #DDE2E8;
  border-radius: 10px;
  overflow: hidden;
  font-family: 'Source Sans 3', sans-serif;
}
.beleg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #DDE2E8;
  background: #F4F6F8;
  flex-shrink: 0;
}
.beleg-header-label {
  font-size: 13px;
  font-weight: 700;
  color: #44555F;
}
.beleg-filename {
  font-size: 11px;
  color: #657180;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
}
.beleg-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #5A6474;
}
.beleg-nav-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #DDE2E8;
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  color: #44555F;
}
.beleg-page-label {
  font-size: 12px;
  font-weight: 600;
  min-width: 46px;
  text-align: center;
}
.beleg-viewer {
  flex: 1;
  overflow: auto;
  background: #9aa3ad;
  padding: 18px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.beleg-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.beleg-paper {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  padding: 36px 36px 46px;
}
.beleg-paper-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 36px;
}
.beleg-paper-text-block { flex: 1; }
.beleg-paper-line-dark {
  height: 13px;
  width: 60%;
  background: #1A1A2E;
  border-radius: 2px;
  margin-bottom: 11px;
}
.beleg-paper-line-light {
  height: 8px;
  background: #C4CDD5;
  border-radius: 2px;
  margin-bottom: 6px;
}
.beleg-paper-logo {
  width: 68px;
  height: 36px;
  background: #E6EEF5;
  border: 1px solid #cfdcea;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #004580;
  letter-spacing: 0.5px;
}
.beleg-paper-subline1 {
  height: 12px;
  width: 42%;
  background: #44555F;
  border-radius: 2px;
  margin-bottom: 8px;
}
.beleg-paper-subline2 {
  height: 8px;
  width: 30%;
  background: #C4CDD5;
  border-radius: 2px;
  margin-bottom: 28px;
}
.beleg-striped {
  height: 220px;
  border-radius: 4px;
  background: repeating-linear-gradient(135deg, #F4F6F8, #F4F6F8 9px, #EAEEF2 9px, #EAEEF2 18px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.beleg-striped-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #7c8896;
  letter-spacing: 0.5px;
  text-align: center;
}
.beleg-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  align-items: flex-end;
}
.beleg-footer-lines { flex: 1; }
.beleg-footer-line {
  height: 7px;
  background: #DDE2E8;
  border-radius: 2px;
  margin-bottom: 6px;
}
.beleg-footer-summe {
  text-align: right;
}
.beleg-footer-summe-label {
  font-size: 11px;
  color: #8B95A3;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px;
}
.beleg-footer-summe-val {
  font-size: 20px;
  font-weight: 700;
  color: #1A1A2E;
}

/* Beleg + action buttons */
.beleg-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-shrink: 0;
}
.geprueft-btn {
  flex: 1;
  background: #004580;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.geprueft-btn:hover { background: #003a6e; }
.pdf-btn {
  flex-shrink: 0;
  background: #fff;
  color: #44555F;
  border: 1.5px solid #DDE2E8;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* =========================================================
   UPLOAD & ABSCHLUSS PLACEHOLDER SCREENS
   ========================================================= */
#screen-upload, #screen-abschluss {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px 28px;
}
.screen-heading {
  font-size: 20px;
  font-weight: 700;
  color: #1A1A2E;
  margin-bottom: 6px;
}
.screen-sub {
  font-size: 13px;
  color: #5A6474;
  margin-bottom: 22px;
}
.kuerzel-label {
  font-size: 13px;
  color: #8B95A3;
  margin-bottom: 14px;
}
.kuerzel-label strong { color: #44555F; }
.upload-card {
  border: 1px solid #DDE2E8;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 0;
}
.upload-card-body {
  padding: 18px 20px 10px;
}

/* Drag & Drop: Upload-Screen (Seite 1) */
.upload-card.drop-active {
  border-color: #004580;
}
.upload-card.drop-active .dnd-zone {
  border-color: #004580;
  background: #EBF5FB;
  box-shadow: 0 0 0 3px rgba(0, 69, 128, 0.13);
}

/* Klassische Drop-Zone-Box */
.dnd-zone {
  border: 2px dashed #C5CDD8;
  border-radius: 10px;
  padding: 28px 20px 22px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  margin-bottom: 16px;
  cursor: default;
}
.dnd-zone-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.dnd-icon {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.dnd-text {
  font-size: 14px;
  font-weight: 600;
  color: #44555F;
  margin-bottom: 4px;
  pointer-events: none;
}
.dnd-sub {
  font-size: 12px;
  color: #8B95A3;
  margin-bottom: 2px;
  pointer-events: none;
}
.dnd-meta {
  font-size: 11px;
  color: #A0AAB4;
  margin-top: 8px;
  pointer-events: none;
}

/* Drag & Drop: Anhänge-Bereich (Seite 2) */
.attach-drop-zone {
  border: 2px dashed #C5CDD8;
  border-radius: 10px;
  padding: 14px 16px 12px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.attach-drop-zone.drop-active {
  border-color: #004580;
  background: #EBF5FB;
  box-shadow: 0 0 0 3px rgba(0, 69, 128, 0.13);
}
.letsgo-btn {
  background: #004580;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
}
.letsgo-btn:hover { background: #003a6e; }

/* Table on Abschluss */
.abschluss-table {
  border: 1px solid #DDE2E8;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 26px;
}
.abschluss-table-header {
  display: grid;
  grid-template-columns: 1.4fr 1fr 96px 110px 140px;
  background: #F4F6F8;
  border-bottom: 2px solid #DDE2E8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #44555F;
}
.abschluss-table-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 96px 110px 140px;
  border-bottom: 1px solid #ECEEF1;
  align-items: center;
}
.th, .td { padding: 11px 16px; }
.td-right { text-align: right; }
.td-center { text-align: center; }
.pdf-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.pdf-dl-btn.enabled {
  background: #fff;
  color: #004580;
  border: 1px solid #cfdcea;
}
.pdf-dl-btn.disabled {
  background: #F4F6F8;
  color: #A7B0BC;
  border: 1px solid #E4E8ED;
  cursor: not-allowed;
}
.stapel-abschliessen {
  width: 100%;
  border-radius: 8px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: not-allowed;
  background: #F4F6F8;
  color: #A7B0BC;
  border: 1px solid #E4E8ED;
}
.stapel-abschliessen.active {
  background: #14664A;
  color: #fff;
  border: none;
  cursor: pointer;
}
.verwerfen-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #C0392B;
  border: 1.5px solid #f0d2cd;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.download-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
.download-all-btn.disabled {
  background: #F4F6F8;
  color: #A7B0BC;
  border: 1px solid #E4E8ED;
  cursor: not-allowed;
}
.download-all-btn.enabled {
  background: #004580;
  color: #fff;
  border: none;
  cursor: pointer;
}
.pa-export-btn {
  width: 100%;
  background: #004580;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* Etappe 4: gesperrter PA-Export (Design-Handoff disabled-Pattern) */
.pa-export-btn.disabled {
  background: #F4F6F8;
  color: #A7B0BC;
  border: 1px solid #E4E8ED;
  cursor: not-allowed;
}

/* Etappe 3: Spinner fuer synchronen Extraktions-Ladezustand */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   5e: Design-Nachzug
   ============================================================ */

/* 5e.2: Duplikat-Zeile in Sidebar (rot, höchste Priorität über .selected/.reviewed) */
.invoice-row.duplicate {
  background: rgba(192,57,43,0.45) !important;
}
.collapsed-card.duplicate {
  background: rgba(192,57,43,0.45);
}

/* 5e.4: Download-Buttons nebeneinander (gleiche Optik wie PA-Export) */
.abschluss-dl-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: #44555F;
  border: 1.5px solid #DDE2E8;
  border-radius: 8px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.abschluss-dl-btn:hover:not(:disabled) {
  background: #F4F6F8;
}
.abschluss-dl-btn.disabled,
.abschluss-dl-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 5e.4: Abschließen-Button (primär, blau) */
.abschliessen-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #004580;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.abschliessen-btn.disabled,
.abschliessen-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #C4CDD5;
}

/* 5e.4: Verwerfen-Button (destruktiv, rot outline) */
.verwerfen-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: #C0392B;
  border: 1.5px solid #f0d2cd;
  border-radius: 8px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.verwerfen-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 5e.1: Kreditor-Speichern-Button */
.kred-speichern-btn {
  background: #004580;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.kred-speichern-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Login-Zwischenseite (Naht 5g – Entra-OIDC, Variante b)
   --------------------------------------------------------------------------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FAFBFC;
  padding: 24px;
}
.login-card {
  background: #fff;
  border: 1px solid #E4E9EE;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,69,128,0.08);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.login-logo img {
  height: 48px;
  width: auto;
}
.login-title {
  font-size: 20px;
  font-weight: 700;
  color: #1B2733;
  margin: 0 0 4px;
}
.login-sub {
  font-size: 15px;
  font-weight: 600;
  color: #45535F;
  margin: 0 0 8px;
}
.login-hint {
  font-size: 13px;
  color: #6B7A88;
  margin: 0 0 24px;
}
.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #004580;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.login-btn:hover {
  background: #003360;
}
.login-btn svg {
  background: #fff;
  padding: 2px;
  border-radius: 3px;
}
.login-note {
  font-size: 12px;
  color: #8A97A3;
  margin: 20px 0 0;
}
.login-note-icon {
  vertical-align: -2px;
  margin-right: 3px;
  color: #8A97A3;
}
/* K-02: sichtbarer Fehlerhinweis bei fehlgeschlagenem Login (/login?error=...) */
.login-error {
  font-size: 13px;
  font-weight: 600;
  color: #B02A2A;
  background: #FCEBEA;
  border: 1px solid #F0C2BE;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 20px;
  text-align: left;
}

/* =========================================================
   T8: Draft-Save "Speichern"-Button (neben Geprüft & weiter)
   Visuell identisch mit .pdf-btn ("Original öffnen") – grey secondary
   ========================================================= */
.speichern-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #44555F;
  border: 1.5px solid #DDE2E8;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.speichern-btn:hover:not(:disabled) { background: #F4F6F8; }
.speichern-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* =========================================================
   T10: Completed-Info (unterhalb Buttons wenn manual_override)
   ========================================================= */
.completed-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #14664A;
  margin-top: 8px;
  font-weight: 500;
}

/* =========================================================
   T9: Duplikat-Modal
   ========================================================= */
.duplikat-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,26,46,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.duplikat-modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.duplikat-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #C0392B;
  margin-bottom: 14px;
}
.duplikat-modal-body {
  font-size: 14px;
  color: #1A1A2E;
  line-height: 1.55;
  margin-bottom: 16px;
}
.duplikat-modal-details {
  background: #F5F7FA;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: #1A1A2E;
}
.dm-label {
  font-weight: 600;
  color: #5A6474;
  margin-right: 4px;
}
.duplikat-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
.dm-korrigieren-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid #DDE2E8;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #44555F;
  cursor: pointer;
  font-family: inherit;
}
.dm-korrigieren-btn:hover { background: #F5F7FA; }
.dm-verwerfen-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #C0392B;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.dm-verwerfen-btn:hover { background: #A93226; }