/* =========================================================
   MALERPLUS • PROJEKT-STUNDEN-CARD V2
   Behebt:
   - UPPERCASE+letter-spacing Labels (AI-Tell)
   - Gradient-Text auf "Arbeitskosten" (Plastic)
   - bunte Stripe-Akzente oben (zu laut)
   - grüner "+ Stunde" Button (Konsistenz: muss mp-blue sein)
   - horizontaler Scroll in gebuchten Stunden-Zeilen
   Scope: nur #view-projekte #projStundenCard
   ========================================================= */

/* =========================================================
   STATS-TILES — ruhig, Title-Case, kein Gradient, kein Stripe
   ========================================================= */
#view-projekte #projStundenCard .kpi {
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb))) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow: hidden;
}
#view-projekte #projStundenCard .kpi::before {
  content: none !important;
}
#view-projekte #projStundenCard .kpi span {
  font: 500 12px/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))) !important;
}
#view-projekte #projStundenCard .kpi strong {
  font: 600 22px/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))) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}
#view-projekte #projStundenCard .kpi-grand strong {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--mp-text, rgb(var(--mp-t1-0f172a))) !important;
  color: var(--mp-text, rgb(var(--mp-t1-0f172a))) !important;
  font-size: 22px !important;
}
#view-projekte #projStundenCard .kpi small {
  font: 500 12px/1.3 'Inter', system-ui, -apple-system, sans-serif !important;
  color: var(--mp-muted, rgb(var(--mp-t3-64748b))) !important;
  letter-spacing: -.003em !important;
  font-variant-numeric: tabular-nums !important;
}

[data-theme="dark"] #view-projekte #projStundenCard .kpi,
html.dark #view-projekte #projStundenCard .kpi {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
[data-theme="dark"] #view-projekte #projStundenCard .kpi span,
html.dark #view-projekte #projStundenCard .kpi span {
  color: #94a3b8 !important;
}
[data-theme="dark"] #view-projekte #projStundenCard .kpi strong,
[data-theme="dark"] #view-projekte #projStundenCard .kpi-grand strong,
html.dark #view-projekte #projStundenCard .kpi strong,
html.dark #view-projekte #projStundenCard .kpi-grand strong {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

/* =========================================================
   GEBUCHTE STUNDEN-ZEILE (.proj-row-std)
   Statt enger 8-Spalten-Grid → flex-wrap das sauber umbricht
   ========================================================= */
#view-projekte .proj-row.proj-row-std {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 10px !important;
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb))) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-left: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
}

/* Alle Grid-Area-Zuweisungen aufheben (flex übernimmt) */
#view-projekte .proj-row.proj-row-std > * {
  grid-area: auto !important;
}

/* Item-Größen für Flex-Layout */
#view-projekte .proj-row.proj-row-std > input[type="date"] {
  flex: 0 0 130px !important;
  min-width: 120px !important;
}
#view-projekte .proj-row.proj-row-std > input[type="text"]:nth-child(2) {
  flex: 1 1 160px !important;
  min-width: 140px !important;
}
#view-projekte .proj-row.proj-row-std > select {
  flex: 0 0 110px !important;
  min-width: 100px !important;
}
#view-projekte .proj-row.proj-row-std > input[type="number"] {
  flex: 0 0 84px !important;
  text-align: right;
}
#view-projekte .proj-row.proj-row-std > input[type="text"]:nth-of-type(2),
#view-projekte .proj-row.proj-row-std > input[type="text"][placeholder*="Beschreib"] {
  flex: 1 1 200px !important;
  min-width: 160px !important;
}
#view-projekte .proj-row.proj-row-std > .std-sum {
  flex: 0 0 100px !important;
  min-width: 90px !important;
  text-align: right;
  font: 600 14px/1 'Inter', system-ui, -apple-system, sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--mp-text, rgb(var(--mp-t1-0f172a))) !important;
}
#view-projekte .proj-row.proj-row-std > .std-badge-slot {
  flex: 0 0 auto !important;
}
#view-projekte .proj-row.proj-row-std > .btn-trash,
#view-projekte .proj-row.proj-row-std > button.btn-trash {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  color: var(--mp-muted, rgb(var(--mp-t3-64748b))) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .14s ease, color .14s ease !important;
  margin-left: auto !important;
}
#view-projekte .proj-row.proj-row-std > .btn-trash:hover {
  background: rgba(220,38,38,.10) !important;
  color: #dc2626 !important;
}

/* (Scope-Stripes entfernt — Konsistenz mit Stripes-Off) */

/* Mobile: kompakte Card mit klarer Hierarchie
   Layout:
     [Datum]    [Mitarbeiter (full)]
     [Std]      [Beschreibung (full)]
     [Summe groß rechts]              [Trash rechts]
*/
@media (max-width: 720px) {
  #view-projekte .proj-row.proj-row-std {
    padding: 12px 14px !important;
    gap: 8px !important;
    border-left-width: 4px !important;
  }
  #view-projekte .proj-row.proj-row-std > input[type="date"] {
    flex: 0 0 130px !important;
  }
  #view-projekte .proj-row.proj-row-std > input[type="text"]:nth-child(2) {
    flex: 1 1 calc(100% - 138px) !important;
    min-width: 120px !important;
  }
  #view-projekte .proj-row.proj-row-std > select {
    flex: 1 1 100% !important;
  }
  #view-projekte .proj-row.proj-row-std > input[type="number"] {
    flex: 0 0 84px !important;
  }
  #view-projekte .proj-row.proj-row-std > input[type="text"][placeholder*="Beschreib"] {
    flex: 1 1 calc(100% - 92px) !important;
    min-width: 140px !important;
  }
  #view-projekte .proj-row.proj-row-std > .std-sum {
    flex: 1 1 auto !important;
    text-align: right !important;
    font-size: 16px !important;
    padding-top: 4px;
    border-top: 1px dashed rgba(15,23,42,.08);
    margin-top: 4px;
  }
  #view-projekte .proj-row.proj-row-std > .btn-trash {
    margin-top: 4px !important;
    border-top: 1px dashed rgba(15,23,42,.08);
    border-radius: 0 0 999px 0 !important;
  }
}

/* Mobile: Eingabe-Zeile (Footer-Form) — alles untereinander */
@media (max-width: 720px) {
  #view-projekte #projStundenCard > .proj-row {
    padding: 14px !important;
    gap: 10px !important;
  }
  #view-projekte #projStundenCard > .proj-row > .proj-input,
  #view-projekte #projStundenCard > .proj-row > .beleg-vendor-wrap {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #view-projekte #projStundenCard > .proj-row > input[type="date"].proj-input {
    flex: 1 1 100% !important;
  }
  #view-projekte #projStundenCard > .proj-row > input[type="number"].proj-input {
    flex: 1 1 100% !important;
  }
  #view-projekte #projStundenCard > .proj-row .btn-primary {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Mobile: Stats-Tiles 2-spaltig kompakter */
@media (max-width: 720px) {
  #view-projekte #projStundenCard .projekt-summen,
  #view-projekte #projStundenCard .stunden-summen,
  #view-projekte #projStundenCard .proj-split-summen {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #view-projekte #projStundenCard .kpi {
    padding: 12px !important;
  }
  #view-projekte #projStundenCard .kpi span {
    font-size: 11px !important;
  }
  #view-projekte #projStundenCard .kpi strong {
    font-size: 18px !important;
  }
}

/* =========================================================
   EINGABE-ZEILE (Add-Row, Footer-Form)
   ========================================================= */
#view-projekte #projStundenCard > .proj-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(15,23,42,.025) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin-top: 14px !important;
  box-shadow: none !important;
}

#view-projekte #projStundenCard > .proj-row > .proj-input {
  flex: 1 1 140px !important;
  min-width: 120px !important;
}
#view-projekte #projStundenCard > .proj-row > input[type="date"].proj-input {
  flex: 0 0 130px !important;
}
#view-projekte #projStundenCard > .proj-row > input[type="number"].proj-input {
  flex: 0 0 80px !important;
}
#view-projekte #projStundenCard > .proj-row > .beleg-vendor-wrap {
  flex: 1 1 180px !important;
  min-width: 160px !important;
}

/* "+ Stunde" Button — mp-blue solid (statt grünem Gradient) */
#view-projekte #projStundenCard > .proj-row .btn-primary {
  flex: 0 0 auto !important;
  background: var(--mp-blue, #2bb0ff) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0 22px !important;
  height: 44px !important;
  font: 600 14.5px/1 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -.005em !important;
  box-shadow:
    0 1px 2px rgba(43,176,255,.16),
    0 6px 18px rgba(43,176,255,.20) !important;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
#view-projekte #projStundenCard > .proj-row .btn-primary:hover {
  background: #20a3ee !important;
  transform: translateY(-1px) !important;
}

[data-theme="dark"] #view-projekte #projStundenCard > .proj-row,
html.dark #view-projekte #projStundenCard > .proj-row {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] #view-projekte #projStundenCard > .proj-row .btn-primary,
html.dark #view-projekte #projStundenCard > .proj-row .btn-primary {
  background: #5fc3ff !important;
  color: rgb(var(--mp-t1-0b0f19)) !important;
}

/* =========================================================
   STATS-CARD CONTAINER (4 Tiles) — Modernisiert in MP-20261003-019 (siehe unten)
   ========================================================= */

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  #view-projekte #projStundenCard > .proj-row .btn-primary,
  #view-projekte .proj-row.proj-row-std,
  #view-projekte .proj-row.proj-row-std > .btn-trash {
    transition: none !important;
  }
}

/* =========================================================
   2026-05-12 ULTIMATE OVERRIDE — Desktop-Stunden-Row Single-Line
   Root-Cause: .proj-input { width: 100% } in legacy projekte.css
   zwingt jedes Child auf volle flex-Breite → flex-wrap legt jedes
   Element auf eigene Zeile. Hier explicit width:auto durchsetzen
   und flex-basis aus den Selektor oben respektieren.
   ========================================================= */
@media (min-width: 880px) {
  #view-projekte .proj-row.proj-row-std > .proj-input,
  #view-projekte .proj-row.proj-row-std > .std-edit,
  #view-projekte .proj-row.proj-row-std > input,
  #view-projekte .proj-row.proj-row-std > select {
    width: auto !important;
    max-width: none !important;
  }
  /* Desktop-Layout: 1-Zeile Grid wieder herstellen für >= 880px */
  #view-projekte .proj-row.proj-row-std {
    display: grid !important;
    grid-template-columns: 130px minmax(140px, 1.2fr) 110px min-content 92px minmax(180px, 1.6fr) 110px 36px !important;
    grid-template-areas: "date ma scope badge std desc sum trash" !important;
    align-items: center !important;
    gap: 8px 10px !important;
  }
  #view-projekte .proj-row.proj-row-std > input[type="date"] { grid-area: date; }
  #view-projekte .proj-row.proj-row-std > select.std-edit-mitarbeiter,
  #view-projekte .proj-row.proj-row-std > select:nth-of-type(1) { grid-area: ma; }
  #view-projekte .proj-row.proj-row-std > select:nth-of-type(2) { grid-area: scope; }
  #view-projekte .proj-row.proj-row-std > .std-badge-slot { grid-area: badge; }
  #view-projekte .proj-row.proj-row-std > .std-stunden-wrap { grid-area: std; min-width: 0; }
  #view-projekte .proj-row.proj-row-std > input[placeholder*="Beschreib"] { grid-area: desc; }
  #view-projekte .proj-row.proj-row-std > .std-sum { grid-area: sum; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
  #view-projekte .proj-row.proj-row-std > .btn-trash { grid-area: trash; }
}

/* =========================================================
   2026-05-12 Gap-Trim: hidden Cards strikt display:none,
   damit der Tab-Inhalt nahtlos unter den Tabs sitzt.
   ========================================================= */
#view-projekte .projekt-detail-stack > [hidden] { display: none !important; }
/* KPI-Grid + erste Sub-Card näher an die Tabs ziehen — die 16px-gap der
   .projekt-detail-stack reicht, kein zusätzlicher Margin obenan. */
#view-projekte #projektDetailWrapper > #projKpiGrid:not([hidden]) {
  margin-top: 0 !important;
}
#view-projekte #projektDetailWrapper > .card:first-of-type:not([hidden]) {
  margin-top: 0 !important;
}
/* 2026-05-13 Whitespace-Trim auf Projekt-Detail-View (aggressive):
   User-Sichtprüfung: ~150-200px Whitespace zwischen Tab-Bar und KPI-Grid
   trotz vorigen Patches. Wahrscheinlich akkumuliert sich gap+margin+padding
   mehrerer Wrapper-Layers. Catch-all-Reduce gegen alle bekannten Stellen. */
#view-projekte .view-container {
  gap: 12px !important;
}
#view-projekte #projTabsNav {
  margin: 0 0 4px 0 !important;
}
#view-projekte #projHeaderSentinel {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#view-projekte #projWorkspaceHeader {
  padding: 12px 16px !important;
  margin: 0 0 8px !important;
}
#view-projekte #projWorkspaceHeader:empty {
  display: none !important;
}
#view-projekte #projektDetailWrapper {
  margin-top: 0 !important;
}
#view-projekte .projekt-detail-stack {
  gap: 12px !important;
}
#view-projekte #projektDetailWrapper > [hidden],
#view-projekte .projekt-detail-stack [hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* =========================================================
   2026-05-12 STD-STUNDEN-WRAP + QUICK-BUTTONS DESKTOP-FIX
   Quick-Buttons ½/1/2/4/8 hatten 5×28px = ~152px Breite,
   aber die Grid-Spalte std war nur 92px → 3-zeiliger Wrap.
   Lösung: Spalte breiter machen + Buttons in einer Zeile.
   ========================================================= */
@media (min-width: 880px) {
  /* Spaltenbreite std auf 168px hochziehen → 5 Quick-Buttons + Padding passen */
  #view-projekte .proj-row.proj-row-std {
    grid-template-columns: 130px minmax(140px, 1.2fr) 110px min-content 168px minmax(180px, 1.6fr) 110px 36px !important;
  }
  /* Quick-Buttons strict in einer Zeile, kein wrap */
  #view-projekte .proj-row.proj-row-std .std-quick-buttons {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  #view-projekte .proj-row.proj-row-std .std-quick {
    flex: 1 1 0 !important;
    min-width: 26px !important;
    padding: 4px 4px !important;
  }
  /* Number-Input volle Wrap-Breite (statt 100% des wrappers) */
  #view-projekte .proj-row.proj-row-std .std-stunden-wrap .std-edit-stunden {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   2026-05-12 ADD-FORM (.proj-row ohne -std) DESKTOP-LAYOUT
   Die Eingabe-Zeile zum Hinzufügen einer Stunde war auf
   Desktop voll-breit pro Element. Single-Line forcieren.
   Children-Reihenfolge:
     1 input[type=date]              Datum
     2 .beleg-vendor-wrap > select   Mitarbeiter
     3 select                        Scope
     4 input[type=number]            Std
     5 input[type=text]              Beschreibung
     6 button.btn-primary            + Stunde
   ========================================================= */
@media (min-width: 880px) {
  /* Premium Add-Form: konsistente Heights, klarer Form-Container,
     sauberer Visual-Flow von links (Datum) nach rechts (Submit). */
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) {
    display: grid !important;
    grid-template-columns: 140px minmax(160px, 1.4fr) 120px 110px minmax(220px, 1.8fr) auto !important;
    grid-template-areas: "date ma scope std desc add" !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    background: linear-gradient(180deg, rgba(248,250,252,.6) 0%, rgba(255,255,255,.4) 100%) !important;
    border: 1px solid rgba(15,23,42,.06) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(15,23,42,.03) !important;
  }
  /* ALLE Form-Children: konsistente Höhe + Box-Modell, kein width:100% Vererbung */
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > input,
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > select,
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > .beleg-vendor-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    border: 1px solid #E5E7EB !important;
    background: rgb(var(--mp-flaeche-rgb)) !important;
    color: rgb(var(--mp-t1-1e2430)) !important;
    margin: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
  }
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > input:focus,
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > select:focus,
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) .beleg-vendor-wrap > select:focus,
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) .beleg-vendor-wrap > input:focus {
    outline: none !important;
    border-color: #2bb0ff !important;
    box-shadow: 0 0 0 3px rgba(43,176,255,.15) !important;
  }

  /* Date */
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > input[type="date"] {
    grid-area: date;
  }
  /* Mitarbeiter (Wrapper enthält select + manueller Input) */
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > .beleg-vendor-wrap {
    grid-area: ma;
    min-width: 0 !important;
    padding: 0 !important;       /* Wrapper hat Border, innere Inputs sind nackt */
    height: 44px !important;
    background: transparent !important;
    border: none !important;
  }
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > .beleg-vendor-wrap > select,
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > .beleg-vendor-wrap > input {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    border: 1px solid #E5E7EB !important;
    background: rgb(var(--mp-flaeche-rgb)) !important;
    color: rgb(var(--mp-t1-1e2430)) !important;
    box-sizing: border-box !important;
  }
  /* Scope */
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > select#projStundenScope {
    grid-area: scope;
  }
  /* Std (Number-Input rechts-aligned mit "h" als Visual-Hinweis via after-pseudo) */
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > input#projStundenStunden {
    grid-area: std;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  /* Beschreibung */
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > input#projStundenText {
    grid-area: desc;
  }
  /* + Stunde Button — premium pill, größer als die Inputs für klare Action-Hierarchie */
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > button#btnProjStundeAdd {
    grid-area: add;
    width: auto !important;
    height: 44px !important;
    padding: 0 22px !important;
    background: linear-gradient(135deg, #2bb0ff 0%, #1f9eef 100%) !important;
    background-image: linear-gradient(135deg, #2bb0ff 0%, #1f9eef 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font: 700 14px/1 'Inter', system-ui, -apple-system, sans-serif !important;
    letter-spacing: -.005em !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow:
      0 1px 2px rgba(43,176,255,.18),
      0 6px 18px rgba(43,176,255,.22) !important;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease !important;
  }
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > button#btnProjStundeAdd:hover {
    filter: brightness(1.04);
    box-shadow:
      0 2px 4px rgba(43,176,255,.22),
      0 10px 24px rgba(43,176,255,.28) !important;
    transform: translateY(-1px);
  }
  #view-projekte #projStundenCard > .proj-row:not(.proj-row-std) > button#btnProjStundeAdd:active {
    transform: translateY(0);
  }
}

/* =========================================================
   MALERPLUS MODERN STUNDEN SECTION (MP-20261003-019)
   - 4 KPI-Kacheln mit farbigen Lucide-Icons (Blue, Amber, Indigo, Green)
   - Euro-Währungsstandard (ReceiptEuro, 0 Dollarzeichen)
   - Hochwertige Erfassungsleiste mit Lucide-Labels & Fokus-Ringen
   - Auto-Stunden als Info-Pille mit Tabellenziffern
   - Button "+ Stunde" im MalerPlus Primary Gradient mit Plus-Icon
   - 100% Dark-Mode- und Responsive-Parität (Desktop 4 Spalten, Tablet/Mobile 2x2)
   ========================================================= */

/* ── KPI-Kacheln Container (Desktop 4 Spalten) ─────────── */
#view-projekte #projStundenCard .stunden-summen,
#view-projekte #projStundenCard .projekt-summen.stunden-summen,
#view-projekte #projStundenCard .proj-split-summen.stunden-summen {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  margin-top: 14px !important;
}

/* ── Einzelne KPI-Kachel ────────────────────────────────── */
html:not(#mpkk):not(#mpkk-2):not(#mpkk-3):not(#mpkk-4) body #view-projekte #projStundenCard .stunden-summen .kpi,
#view-projekte #projStundenCard .stunden-summen .kpi {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  background: rgb(var(--mp-flaeche-rgb, 255, 255, 255)) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  min-height: auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

html:not(#mpkk):not(#mpkk-2):not(#mpkk-3):not(#mpkk-4) body #view-projekte #projStundenCard .stunden-summen .kpi:hover,
#view-projekte #projStundenCard .stunden-summen .kpi:hover {
  border-color: rgba(43, 176, 255, 0.4) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-1px) !important;
}

/* ── KPI Icon ───────────────────────────────────────────── */
#view-projekte #projStundenCard .stunden-summen .mp-kpi-icon {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#view-projekte #projStundenCard .stunden-summen .mp-kpi-icon svg {
  width: 19px !important;
  height: 19px !important;
}
#view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--blue {
  background: rgba(43, 176, 255, 0.12) !important;
  color: #0284c7 !important;
}
#view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--amber {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #d97706 !important;
}
#view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--indigo {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #4f46e5 !important;
}
#view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--green {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
}

/* ── KPI Content ────────────────────────────────────────── */
#view-projekte #projStundenCard .stunden-summen .mp-kpi-content {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#view-projekte #projStundenCard .stunden-summen .mp-kpi-content .mp-kpi-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgb(var(--mp-t3-6b7280, 100, 116, 139)) !important;
  line-height: 1.25 !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}
#view-projekte #projStundenCard .stunden-summen .mp-kpi-content strong {
  display: block !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
  color: rgb(var(--mp-t1-1e2430, 30, 36, 48)) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#view-projekte #projStundenCard .stunden-summen .mp-kpi-content small {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgb(var(--mp-t3-6b7280, 100, 116, 139)) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Erfassungsleiste (.proj-stunden-add) Container ─────── */
#view-projekte #projStundenCard > .proj-row.proj-stunden-add {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 12px 14px !important;
  background: rgb(var(--mp-f2-f7f8fa, 248, 250, 252)) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  margin-top: 14px !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03) !important;
  box-sizing: border-box !important;
}

#view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex: 1 1 150px;
  min-width: 0;
}

#view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield > label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !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;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield > label svg {
  opacity: 0.7 !important;
  flex-shrink: 0 !important;
}

/* ── Feldbreiten Desktop/Tablet ─────────────────────────── */
#view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--date  { flex: 0 0 148px !important; }
#view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--scope { flex: 0 0 120px !important; }
#view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--time  { flex: 0 0 108px !important; }
#view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--num   { flex: 0 0 105px !important; }
#view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--ma    { flex: 1 1 180px !important; }
#view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--desc  { flex: 2 1 200px !important; }

/* ── Input/Select Felder ────────────────────────────────── */
#view-projekte #projStundenCard > .proj-row.proj-stunden-add .mp-stdfield > .proj-input,
#view-projekte #projStundenCard > .proj-row.proj-stunden-add .mp-stdfield .beleg-vendor-wrap > .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 #projStundenCard > .proj-row.proj-stunden-add .mp-stdfield > .proj-input:focus,
#view-projekte #projStundenCard > .proj-row.proj-stunden-add .mp-stdfield .beleg-vendor-wrap > .proj-input:focus {
  outline: none !important;
  border-color: #2bb0ff !important;
  box-shadow: 0 0 0 3px rgba(43, 176, 255, 0.18) !important;
}

/* ── MA-Wrapper ─────────────────────────────────────────── */
#view-projekte #projStundenCard > .proj-row.proj-stunden-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;
}

/* ── "Std. (auto)" Info-Pille ───────────────────────────── */
#view-projekte #projStundenCard > .proj-row.proj-stunden-add #projStundenStunden {
  background: rgba(43, 176, 255, 0.06) !important;
  border-color: rgba(43, 176, 255, 0.25) !important;
  color: #0284c7 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 700 !important;
}

#view-projekte #projStundenCard > .proj-row.proj-stunden-add #projStundenPause {
  text-align: right !important;
}

/* ── Button "+ Stunde" ──────────────────────────────────── */
#view-projekte #projStundenCard > .proj-row.proj-stunden-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 #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(43, 176, 255, 0.45) !important;
}
#view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(43, 176, 255, 0.3) !important;
}

/* ── Responsive Tablet & Mobile ─────────────────────────── */
@media (max-width: 900px) {
  #view-projekte #projStundenCard .stunden-summen,
  #view-projekte #projStundenCard .projekt-summen.stunden-summen,
  #view-projekte #projStundenCard .proj-split-summen.stunden-summen {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 820px) {
  #view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--time,
  #view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--num {
    flex: 1 1 calc(50% - 7px) !important;
  }
  #view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--date,
  #view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--scope {
    flex: 1 1 calc(50% - 7px) !important;
  }
  #view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--ma,
  #view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield--desc {
    flex: 1 1 100% !important;
  }
}

@media (max-width: 520px) {
  #view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield {
    flex: 1 1 100% !important;
  }
  #view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield-btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── Dark-Mode ──────────────────────────────────────────── */
html.dark:not(#mpkk):not(#mpkk-2):not(#mpkk-3):not(#mpkk-4) body #view-projekte #projStundenCard .stunden-summen .kpi,
[data-theme="dark"]:not(#mpkk):not(#mpkk-2):not(#mpkk-3):not(#mpkk-4) body #view-projekte #projStundenCard .stunden-summen .kpi,
[data-theme="dark"] #view-projekte #projStundenCard .stunden-summen .kpi,
html.dark #view-projekte #projStundenCard .stunden-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:not(#mpkk):not(#mpkk-2):not(#mpkk-3):not(#mpkk-4) body #view-projekte #projStundenCard .stunden-summen .kpi:hover,
[data-theme="dark"]:not(#mpkk):not(#mpkk-2):not(#mpkk-3):not(#mpkk-4) body #view-projekte #projStundenCard .stunden-summen .kpi:hover,
[data-theme="dark"] #view-projekte #projStundenCard .stunden-summen .kpi:hover,
html.dark #view-projekte #projStundenCard .stunden-summen .kpi:hover {
  border-color: rgba(43, 176, 255, 0.4) !important;
}
[data-theme="dark"] #view-projekte #projStundenCard .stunden-summen .mp-kpi-content strong,
html.dark #view-projekte #projStundenCard .stunden-summen .mp-kpi-content strong {
  color: #f1f5f9 !important;
}
[data-theme="dark"] #view-projekte #projStundenCard .stunden-summen .mp-kpi-content .mp-kpi-label,
html.dark #view-projekte #projStundenCard .stunden-summen .mp-kpi-content .mp-kpi-label {
  color: #94a3b8 !important;
}
[data-theme="dark"] #view-projekte #projStundenCard .stunden-summen .mp-kpi-content small,
html.dark #view-projekte #projStundenCard .stunden-summen .mp-kpi-content small {
  color: #94a3b8 !important;
}

[data-theme="dark"] #view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--blue,
html.dark #view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--blue {
  background: rgba(43, 176, 255, 0.18) !important;
  color: #38bdf8 !important;
}
[data-theme="dark"] #view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--amber,
html.dark #view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--amber {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] #view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--indigo,
html.dark #view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--indigo {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #818cf8 !important;
}
[data-theme="dark"] #view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--green,
html.dark #view-projekte #projStundenCard .stunden-summen .mp-kpi-icon--green {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
}

[data-theme="dark"] #view-projekte #projStundenCard > .proj-row.proj-stunden-add,
html.dark #view-projekte #projStundenCard > .proj-row.proj-stunden-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;
}
[data-theme="dark"] #view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield > label,
html.dark #view-projekte #projStundenCard > .proj-row.proj-stunden-add > .mp-stdfield > label {
  color: #cbd5e1 !important;
}
[data-theme="dark"] #view-projekte #projStundenCard > .proj-row.proj-stunden-add .mp-stdfield > .proj-input,
[data-theme="dark"] #view-projekte #projStundenCard > .proj-row.proj-stunden-add .mp-stdfield .beleg-vendor-wrap > .proj-input,
html.dark #view-projekte #projStundenCard > .proj-row.proj-stunden-add .mp-stdfield > .proj-input,
html.dark #view-projekte #projStundenCard > .proj-row.proj-stunden-add .mp-stdfield .beleg-vendor-wrap > .proj-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] #view-projekte #projStundenCard > .proj-row.proj-stunden-add #projStundenStunden,
html.dark #view-projekte #projStundenCard > .proj-row.proj-stunden-add #projStundenStunden {
  background: rgba(43, 176, 255, 0.12) !important;
  border-color: rgba(43, 176, 255, 0.3) !important;
  color: #38bdf8 !important;
}