/* =========================================================
   MALERPLUS • PROJEKT-MATERIAL-CARD V2 (MP-20261003-021)
   Design System & Neuer MalerPlus Standard:
   - 6 KPI-Summen-Kacheln mit Soft-Tint-Lucide-SVGs
   - Veredelte Erfassungsleiste mit Lucide-Labels & .mp-stdfield
   - Zero-Emoji-Rule (keine rohen Emojis in Buttons oder Hinweisen)
   - Währungs-Invariante 0 Dollar ($ = 0), durchgängig Euro (€)
   - 100% ID-, Selektor- und Funktionsschutz
   - Responsive Desktop, Tablet (768/820/1024) und Smartphone (390)
   - Vollständige Dark-Mode-Parität
   Scope: nur #view-projekte #projMaterialCard
   ========================================================= */

/* =========================================================
   1. KPI-SUMMEN-KACHELN (.material-summen)
   ========================================================= */
#view-projekte #projMaterialCard .material-summen,
#view-projekte #projMaterialCard .projekt-summen.material-summen,
#view-projekte #projMaterialCard .proj-split-summen.material-summen {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

#view-projekte #projMaterialCard .material-summen .kpi {
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb, 255, 255, 255))) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  position: relative !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

#view-projekte #projMaterialCard .material-summen .kpi:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(43, 176, 255, 0.3) !important;
}

#view-projekte #projMaterialCard .material-summen .kpi::before {
  content: none !important;
  display: none !important;
}

/* ── Icon-Container mit Soft-Tint-Hintergrund ───────────── */
#view-projekte #projMaterialCard .material-summen .mp-kpi-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform .15s ease !important;
}

#view-projekte #projMaterialCard .material-summen .kpi:hover .mp-kpi-icon {
  transform: scale(1.05) !important;
}

#view-projekte #projMaterialCard .material-summen .mp-kpi-icon svg {
  display: block !important;
}

/* Farbvarianten der Soft-Tint-Icons */
#view-projekte #projMaterialCard .material-summen .mp-kpi-icon--blue {
  background: rgba(43, 176, 255, 0.12) !important;
  color: #0284c7 !important;
}
#view-projekte #projMaterialCard .material-summen .mp-kpi-icon--amber {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #d97706 !important;
}
#view-projekte #projMaterialCard .material-summen .mp-kpi-icon--indigo {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #4f46e5 !important;
}
#view-projekte #projMaterialCard .material-summen .mp-kpi-icon--purple {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #9333ea !important;
}
#view-projekte #projMaterialCard .material-summen .mp-kpi-icon--cyan {
  background: rgba(6, 182, 212, 0.12) !important;
  color: #0891b2 !important;
}
#view-projekte #projMaterialCard .material-summen .mp-kpi-icon--green {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
}

/* ── Kachel-Inhalt ──────────────────────────────────────── */
#view-projekte #projMaterialCard .material-summen .mp-kpi-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#view-projekte #projMaterialCard .material-summen .mp-kpi-content .mp-kpi-label {
  font: 500 11.5px/1.3 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -.003em !important;
  text-transform: none !important;
  color: var(--mp-muted, rgb(var(--mp-t3-64748b, 100, 116, 139))) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#view-projekte #projMaterialCard .material-summen .mp-kpi-content strong {
  font: 700 18px/1.15 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -.018em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--mp-text, rgb(var(--mp-t1-0f172a, 15, 23, 42))) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Abweichung Ampel-Klassen */
#view-projekte #projMaterialCard .material-summen #projMatSollDiff.mp-diff-neg {
  color: #ef4444 !important;
}
#view-projekte #projMaterialCard .material-summen #projMatSollDiff.mp-diff-pos {
  color: #10b981 !important;
}
#view-projekte #projMaterialCard .material-summen #projMatSollDiff.mp-diff-zero {
  color: var(--mp-muted, rgb(var(--mp-t3-64748b, 100, 116, 139))) !important;
}

/* =========================================================
   2. HEADER-BUTTONS MIT LUCIDE-ICONS (.mp-btn-with-icon)
   ========================================================= */
#view-projekte #projMaterialCard .btn-secondary.mp-btn-with-icon,
#view-projekte #projMaterialCard .btn-primary.mp-btn-with-icon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 14px !important;
  font: 600 13px/1 'Inter', system-ui, -apple-system, sans-serif !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
  white-space: nowrap !important;
}

#view-projekte #projMaterialCard .btn-secondary.mp-btn-with-icon svg,
#view-projekte #projMaterialCard .btn-primary.mp-btn-with-icon svg {
  flex-shrink: 0 !important;
}

#view-projekte #projMaterialCard .btn-primary.mp-btn-with-icon {
  background: linear-gradient(120deg, #2bb0ff 0%, #1f93e6 60%, #1278c8 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(43, 176, 255, 0.28) !important;
}
#view-projekte #projMaterialCard .btn-primary.mp-btn-with-icon:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(43, 176, 255, 0.38) !important;
}

#view-projekte #projMaterialCard .btn-secondary.mp-btn-with-icon {
  background: rgba(148, 163, 184, 0.08) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  color: var(--mp-text, rgb(var(--mp-t1-0f172a, 15, 23, 42))) !important;
}
#view-projekte #projMaterialCard .btn-secondary.mp-btn-with-icon:hover {
  background: rgba(148, 163, 184, 0.16) !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   3. VEREDELTE ERFASSUNGSLEISTE (.proj-beleg-add)
   ========================================================= */
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add,
html body #view-projekte #projMaterialCard #projRechnungenCard .proj-beleg-add,
html body #view-projekte.mp-baustellen-golden #projMaterialCard #projRechnungenCard .proj-beleg-add {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 12px 14px !important;
  padding: 16px 18px !important;
  background: rgba(var(--mp-flaeche-rgb, 255, 255, 255), 0.75) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  box-sizing: border-box !important;
  margin-top: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: none !important;
}

/* Einzelnes Form-Feld (.mp-stdfield) */
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield,
html body #view-projekte #projMaterialCard #projRechnungenCard .proj-beleg-add > .mp-stdfield,
html body #view-projekte.mp-baustellen-golden #projMaterialCard #projRechnungenCard .proj-beleg-add > .mp-stdfield {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield > label,
html body #view-projekte #projMaterialCard #projRechnungenCard .proj-beleg-add > .mp-stdfield > label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font: 700 11px/1.2 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: rgb(var(--mp-t2-475569, 71, 85, 105)) !important;
  padding-left: 2px !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield > label svg,
html body #view-projekte #projMaterialCard #projRechnungenCard .proj-beleg-add > .mp-stdfield > label svg {
  opacity: 0.72 !important;
  flex-shrink: 0 !important;
}

/* Feld-Bereiche für Grid-Layout */
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--date   { grid-area: date !important; }
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--vendor { grid-area: vendor !important; }
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--scope  { grid-area: scope !important; }
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--netto  { grid-area: netto !important; }
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--mwst   { grid-area: mwst !important; }
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--desc   { grid-area: desc !important; }
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield-btn    { grid-area: btn !important; }

/* Feldbreiten Desktop (≥ 1101px) */
@media (min-width: 1101px) {
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add,
  html body #view-projekte #projMaterialCard #projRechnungenCard .proj-beleg-add,
  html body #view-projekte.mp-baustellen-golden #projMaterialCard #projRechnungenCard .proj-beleg-add {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--date   { flex: 0 0 148px !important; }
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--vendor { flex: 1 1 180px !important; min-width: 150px !important; }
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--scope  { flex: 0 0 190px !important; min-width: 180px !important; }
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--netto  { flex: 0 0 110px !important; }
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--mwst   { flex: 0 0 95px !important; }
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield--desc   { flex: 2 1 180px !important; min-width: 160px !important; }
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield-btn    { flex: 0 0 auto !important; width: auto !important; }
}

/* Inputs und Selects */
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield > .proj-input,
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .beleg-vendor-wrap > .proj-input,
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .mp-input-suffix > .proj-input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: rgb(var(--mp-flaeche-rgb, 255, 255, 255)) !important;
  color: rgb(var(--mp-t1-1e2430, 30, 36, 48)) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  margin: 0 !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}

#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield > .proj-input:focus,
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .beleg-vendor-wrap > .proj-input:focus,
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .mp-input-suffix > .proj-input:focus {
  outline: none !important;
  border-color: #2bb0ff !important;
  box-shadow: 0 0 0 3px rgba(43, 176, 255, 0.18) !important;
}

/* Custom Dropdown Trigger Parität mit proj-input (MP-20261004-001) */
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .mp-dropdown,
html body #view-projekte #projMaterialCard #projRechnungenCard .proj-beleg-add .mp-stdfield .mp-dropdown {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .mp-dropdown-trigger,
html body #view-projekte #projMaterialCard #projRechnungenCard .proj-beleg-add .mp-stdfield .mp-dropdown-trigger {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: rgb(var(--mp-flaeche-rgb, 255, 255, 255)) !important;
  color: rgb(var(--mp-t1-1e2430, 30, 36, 48)) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}

#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .mp-dropdown-trigger:focus,
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .mp-dropdown.open .mp-dropdown-trigger {
  border-color: #2bb0ff !important;
  box-shadow: 0 0 0 3px rgba(43, 176, 255, 0.18), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  outline: none !important;
}

/* Händler-Wrapper */
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .beleg-vendor-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  height: auto !important;
  min-width: 0 !important;
}

/* MwSt Input-Suffix */
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-input-suffix {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-input-suffix > .proj-input {
  padding-right: 26px !important;
  text-align: right !important;
}
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-input-suffix > span {
  position: absolute !important;
  right: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mp-muted, rgb(var(--mp-t3-64748b, 100, 116, 139))) !important;
  pointer-events: none !important;
}

#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add #projBelegNetto {
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
}

/* ── Primary Action Button ("+ Beleg") ──────────────────── */
#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield-btn {
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 11px !important;
  border: none !important;
  cursor: pointer !important;
  font: 700 13px/1 'Inter', system-ui, -apple-system, sans-serif !important;
  color: #ffffff !important;
  background: linear-gradient(120deg, #2bb0ff 0%, #1f93e6 60%, #1278c8 100%) !important;
  box-shadow: 0 4px 14px rgba(43, 176, 255, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(43, 176, 255, 0.45) !important;
}

#view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(43, 176, 255, 0.3) !important;
}

/* =========================================================
   4. TIP-BOX (.mp-tip) - ENTFERNT MP-20261003-026
   ========================================================= */
#view-projekte #projRechnungenCard .mp-tip {
  display: none !important;
}

/* =========================================================
   5. BUTTON "RECHNUNG EINLESEN" IM MALERPLUS PRIMARY STANDARD
   ========================================================= */
#view-projekte #projRechnungenCard #btnProjRechnungImport,
#view-projekte #projRechnungenCard .mp-header-actions .btn-primary {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  cursor: pointer !important;
  font: 700 13px/1 'Inter', system-ui, -apple-system, sans-serif !important;
  color: #ffffff !important;
  background: linear-gradient(120deg, #2bb0ff 0%, #1f93e6 60%, #1278c8 100%) !important;
  box-shadow: 0 3px 10px rgba(43, 176, 255, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}

#view-projekte #projRechnungenCard #btnProjRechnungImport:hover,
#view-projekte #projRechnungenCard .mp-header-actions .btn-primary:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px rgba(43, 176, 255, 0.45) !important;
}

#view-projekte #projRechnungenCard #btnProjRechnungImport:active,
#view-projekte #projRechnungenCard .mp-header-actions .btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(43, 176, 255, 0.3) !important;
}

#view-projekte #projRechnungenCard #btnProjRechnungImport svg {
  display: block !important;
  flex-shrink: 0 !important;
}

/* =========================================================
   6. BELEG-TABELLE & VEREDELTE LISTENANSICHT (MP-20261003-030)
   ========================================================= */
#view-projekte #projRechnungenCard .belege-scroll table.doc-table {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-top: 4px !important;
}

#view-projekte #projRechnungenCard .belege-scroll table.doc-table th:first-child,
#view-projekte #projRechnungenCard .belege-scroll table.doc-table td:first-child {
  min-width: 220px !important;
  width: 36% !important;
}

#view-projekte #projRechnungenCard .belege-scroll table.doc-table th:nth-child(2),
#view-projekte #projRechnungenCard .belege-scroll table.doc-table td:nth-child(2) {
  min-width: 100px !important;
  width: 12% !important;
  white-space: nowrap !important;
}

#view-projekte #projRechnungenCard .belege-scroll table.doc-table th:nth-child(3),
#view-projekte #projRechnungenCard .belege-scroll table.doc-table td:nth-child(3) {
  min-width: 85px !important;
  width: 11% !important;
  white-space: nowrap !important;
}

#view-projekte #projRechnungenCard .belege-scroll table.doc-table th:nth-child(4),
#view-projekte #projRechnungenCard .belege-scroll table.doc-table td:nth-child(4) {
  min-width: 95px !important;
  width: 13% !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#view-projekte #projRechnungenCard .belege-scroll table.doc-table th:nth-child(5),
#view-projekte #projRechnungenCard .belege-scroll table.doc-table td:nth-child(5) {
  min-width: 90px !important;
  width: 11% !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#view-projekte #projRechnungenCard .belege-scroll table.doc-table th:nth-child(6),
#view-projekte #projRechnungenCard .belege-scroll table.doc-table td:nth-child(6) {
  min-width: 135px !important;
  width: 17% !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#view-projekte #projRechnungenCard .belege-scroll table.doc-table th {
  font: 700 11px/1.2 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--mp-muted, rgb(var(--mp-t3-64748b, 100, 116, 139))) !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: transparent !important;
}

#view-projekte #projRechnungenCard .belege-scroll table.doc-table td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  font-size: 13.5px !important;
  transition: background .15s ease !important;
}

#view-projekte #projRechnungenCard .belege-scroll table.doc-table tbody tr.mp-beleg-tr:hover td {
  background: rgba(43, 176, 255, 0.03) !important;
}

/* Spalten-Inhalte */
#view-projekte #projRechnungenCard .mp-beleg-vendor-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#view-projekte #projRechnungenCard .mp-beleg-iconbox {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  background: rgba(148, 163, 184, 0.08) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #64748b !important;
  transition: transform .15s ease !important;
}

#view-projekte #projRechnungenCard .belege-scroll table.doc-table tbody tr.mp-beleg-tr:hover .mp-beleg-iconbox {
  transform: scale(1.05) !important;
}

#view-projekte #projRechnungenCard .mp-beleg-iconbox--pdf {
  background: rgba(43, 176, 255, 0.1) !important;
  border-color: rgba(43, 176, 255, 0.24) !important;
  color: #0284c7 !important;
}

#view-projekte #projRechnungenCard .mp-beleg-iconbox--photo {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.24) !important;
  color: #d97706 !important;
}

#view-projekte #projRechnungenCard .mp-beleg-vendor-texts {
  min-width: 0 !important;
  overflow: hidden !important;
}

#view-projekte #projRechnungenCard .mp-beleg-vendor-title {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--mp-text, rgb(var(--mp-t1-0f172a, 15, 23, 42))) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#view-projekte #projRechnungenCard .mp-beleg-vendor-sub {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--mp-muted, rgb(var(--mp-t3-64748b, 100, 116, 139))) !important;
  margin-top: 1px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#view-projekte #projRechnungenCard .mp-beleg-td-datum {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mp-muted, rgb(var(--mp-t3-64748b, 100, 116, 139))) !important;
  white-space: nowrap !important;
}

/* Soft-Badges für Belegtyp */
#view-projekte #projRechnungenCard .mp-beleg-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font: 800 11px/1.4 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

#view-projekte #projRechnungenCard .mp-beleg-badge--zusatz {
  background: #fff7ed !important;
  color: #ea580c !important;
  border: 1px solid rgba(249, 115, 22, 0.2) !important;
}

#view-projekte #projRechnungenCard .mp-beleg-badge--angebot {
  background: rgba(43, 176, 255, 0.12) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(43, 176, 255, 0.22) !important;
}

/* Beträge */
#view-projekte #projRechnungenCard .mp-beleg-netto {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--mp-text, rgb(var(--mp-t1-0f172a, 15, 23, 42))) !important;
  font-variant-numeric: tabular-nums !important;
}

#view-projekte #projRechnungenCard .mp-beleg-mwst {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mp-muted, rgb(var(--mp-t3-64748b, 100, 116, 139))) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Aktionsbuttons */
#view-projekte #projRechnungenCard .mp-beleg-act-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

#view-projekte #projRechnungenCard .mp-beleg-btn-edit {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: #ffffff !important;
  color: var(--mp-text, rgb(var(--mp-t1-0f172a, 15, 23, 42))) !important;
  font: 700 12px/1 'Inter', system-ui, -apple-system, sans-serif !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all .15s ease !important;
}

#view-projekte #projRechnungenCard .mp-beleg-btn-edit:hover {
  border-color: rgba(43, 176, 255, 0.5) !important;
  color: #0284c7 !important;
  background: rgba(43, 176, 255, 0.04) !important;
  box-shadow: 0 2px 6px rgba(43, 176, 255, 0.12) !important;
  transform: translateY(-1px) !important;
}

#view-projekte #projRechnungenCard .mp-beleg-btn-del {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: #ffffff !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all .15s ease !important;
  padding: 0 !important;
}

#view-projekte #projRechnungenCard .mp-beleg-btn-del:hover {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Mobile-Cards */
#view-projekte #projRechnungenCard .mp-beleg-card-v2 {
  background: var(--mp-card, #ffffff) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

#view-projekte #projRechnungenCard .mp-beleg-card-v2:hover {
  border-color: rgba(43, 176, 255, 0.3) !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06) !important;
}

/* =========================================================
   6. RESPONSIVE ANPASSUNGEN (TABLET & MOBILE)
   ========================================================= */
@media (max-width: 1100px) {
  #view-projekte #projMaterialCard .material-summen,
  #view-projekte #projMaterialCard .projekt-summen.material-summen,
  #view-projekte #projMaterialCard .proj-split-summen.material-summen {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Tablet (641px - 1100px): Harmonisches 12-Spalten-Raster in 2 Zeilen */
@media (min-width: 641px) and (max-width: 1100px) {
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add,
  html body #view-projekte #projMaterialCard #projRechnungenCard .proj-beleg-add,
  html body #view-projekte.mp-baustellen-golden #projMaterialCard #projRechnungenCard .proj-beleg-add {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-areas:
      "date date date vendor vendor vendor vendor vendor scope scope scope scope"
      "netto netto netto mwst mwst desc desc desc desc desc btn btn" !important;
    gap: 12px 14px !important;
  }
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield-btn {
    align-self: flex-end !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  #view-projekte #projMaterialCard .material-summen,
  #view-projekte #projMaterialCard .projekt-summen.material-summen,
  #view-projekte #projMaterialCard .proj-split-summen.material-summen {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add,
  html body #view-projekte #projMaterialCard #projRechnungenCard .proj-beleg-add,
  html body #view-projekte.mp-baustellen-golden #projMaterialCard #projRechnungenCard .proj-beleg-add {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "date scope"
      "vendor vendor"
      "netto mwst"
      "desc desc"
      "btn btn" !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  #view-projekte #projMaterialCard .material-summen,
  #view-projekte #projMaterialCard .projekt-summen.material-summen,
  #view-projekte #projMaterialCard .proj-split-summen.material-summen {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (max-width: 380px) {
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add,
  html body #view-projekte #projMaterialCard #projRechnungenCard .proj-beleg-add,
  html body #view-projekte.mp-baustellen-golden #projMaterialCard #projRechnungenCard .proj-beleg-add {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "date"
      "vendor"
      "scope"
      "netto"
      "mwst"
      "desc"
      "btn" !important;
  }
  #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > * {
    width: 100% !important;
  }
}

/* =========================================================
   7. DARK-MODE PARITÄT
   ========================================================= */
html.dark #view-projekte #projMaterialCard .material-summen .kpi,
[data-theme="dark"] #view-projekte #projMaterialCard .material-summen .kpi {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

html.dark #view-projekte #projMaterialCard .material-summen .kpi:hover,
[data-theme="dark"] #view-projekte #projMaterialCard .material-summen .kpi:hover {
  border-color: rgba(43, 176, 255, 0.4) !important;
}

html.dark #view-projekte #projMaterialCard .material-summen .mp-kpi-content strong,
[data-theme="dark"] #view-projekte #projMaterialCard .material-summen .mp-kpi-content strong {
  color: #f1f5f9 !important;
}

html.dark #view-projekte #projMaterialCard .material-summen .mp-kpi-content .mp-kpi-label,
[data-theme="dark"] #view-projekte #projMaterialCard .material-summen .mp-kpi-content .mp-kpi-label {
  color: #94a3b8 !important;
}

html.dark #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--blue,
[data-theme="dark"] #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--blue {
  background: rgba(43, 176, 255, 0.18) !important;
  color: #38bdf8 !important;
}
html.dark #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--amber,
[data-theme="dark"] #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--amber {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
}
html.dark #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--indigo,
[data-theme="dark"] #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--indigo {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #818cf8 !important;
}
html.dark #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--purple,
[data-theme="dark"] #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--purple {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #c084fc !important;
}
html.dark #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--cyan,
[data-theme="dark"] #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--cyan {
  background: rgba(6, 182, 212, 0.18) !important;
  color: #22d3ee !important;
}
html.dark #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--green,
[data-theme="dark"] #view-projekte #projMaterialCard .material-summen .mp-kpi-icon--green {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
}

/* Erfassungsleiste Dark-Mode */
html.dark #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add,
[data-theme="dark"] #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

html.dark #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield > label,
[data-theme="dark"] #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add > .mp-stdfield > label {
  color: #cbd5e1 !important;
}

html.dark #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield > .proj-input,
html.dark #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .beleg-vendor-wrap > .proj-input,
html.dark #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .mp-input-suffix > .proj-input,
[data-theme="dark"] #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield > .proj-input,
[data-theme="dark"] #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .beleg-vendor-wrap > .proj-input,
[data-theme="dark"] #view-projekte #projRechnungenCard > .proj-row.proj-beleg-add .mp-stdfield .mp-input-suffix > .proj-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-tip,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-tip {
  background: rgba(43, 176, 255, 0.08) !important;
  border-color: rgba(43, 176, 255, 0.25) !important;
  color: #e2e8f0 !important;
}

/* Beleg-Tabelle & Cards Dark-Mode */
html.dark #view-projekte #projRechnungenCard .belege-scroll table.doc-table th,
[data-theme="dark"] #view-projekte #projRechnungenCard .belege-scroll table.doc-table th {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

html.dark #view-projekte #projRechnungenCard .belege-scroll table.doc-table td,
[data-theme="dark"] #view-projekte #projRechnungenCard .belege-scroll table.doc-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark #view-projekte #projRechnungenCard .belege-scroll table.doc-table tbody tr.mp-beleg-tr:hover td,
[data-theme="dark"] #view-projekte #projRechnungenCard .belege-scroll table.doc-table tbody tr.mp-beleg-tr:hover td {
  background: rgba(43, 176, 255, 0.06) !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-iconbox,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-iconbox {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-iconbox--pdf,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-iconbox--pdf {
  background: rgba(43, 176, 255, 0.16) !important;
  border-color: rgba(43, 176, 255, 0.3) !important;
  color: #38bdf8 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-iconbox--photo,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-iconbox--photo {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fbbf24 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-vendor-title,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-vendor-title {
  color: #f1f5f9 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-vendor-sub,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-vendor-sub {
  color: #94a3b8 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-td-datum,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-td-datum {
  color: #94a3b8 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-netto,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-netto {
  color: #f1f5f9 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-mwst,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-mwst {
  color: #94a3b8 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-badge--zusatz,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-badge--zusatz {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-badge--angebot,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-badge--angebot {
  background: rgba(43, 176, 255, 0.18) !important;
  color: #38bdf8 !important;
  border-color: rgba(43, 176, 255, 0.3) !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-btn-edit,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-btn-edit {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-btn-edit:hover,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-btn-edit:hover {
  border-color: rgba(43, 176, 255, 0.5) !important;
  color: #38bdf8 !important;
  background: rgba(43, 176, 255, 0.1) !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-btn-del,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-btn-del {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #94a3b8 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-btn-del:hover,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-btn-del:hover {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
}

html.dark #view-projekte #projRechnungenCard .mp-beleg-card-v2,
[data-theme="dark"] #view-projekte #projRechnungenCard .mp-beleg-card-v2 {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}