/* ==========================================================================
   projekte.css — Section-Layout-SSOT fuer den Projekte-Tab (V2-only)

   Konsument: web/js/sections/projekte.js
   Prefix: pj-

   Verbleibender Bestand: Toolbar-Border, Card-Overrides fuer .pj-card-app
   (fixe Hoehe, Badge-Priorisierung via Container-Queries) und Firmachip.
   Detail-/Bearbeiten-Aktionen laufen ueber LoDPjDrawer.

   Cross-Cutting: .lod-section-panel/-scroll + Scrollbar-Hiding leben in
   web/styles/layout.css; .card-grid/.card-meta-anchor in components/cards/
   card.css; .dash-scroll-host-Basis in domain/dashboard/dashboard.css.
   ========================================================================== */

#tab-content-projekte > .app-scope > .app-kanban-toolbar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
 Projekt-Card (Card-Override) — fixe Hoehe, 1-zeiliger Titel mit Ellipsis
 ════════════════════════════════════════════════════════════════════════════ */

.app-scope .card-v2.pj-card-app {
  height: 180px;
  min-height: 180px;
  container-type: inline-size;
}
.app-scope .card-v2.pj-card-app .card-app-title {
  display: block;
  -webkit-line-clamp: unset;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

/* KPI-Firmen-Drill: aktiver Firmen-Filter als entfernbarer Chip im Toolbar-Slot
   (inline in der Toolbar-Zeile, kein freischwebender Balken). */
#tab-content-projekte .pj-firmachip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-2-5);
  border-radius: var(--radius-pill);
  background: var(--lod-darkblue-50);
  border: 1px solid var(--lod-darkblue-100);
  color: var(--lod-darkblue);
  /* 12.5px: bewusster Zwischenwert zwischen --fs-meta (12px) und --fs-body (13px) —
     gleiche Chip-Groesse wie .subgrid-summary. */
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
}
#tab-content-projekte .pj-firmachip:hover { background: var(--lod-darkblue-100); }
#tab-content-projekte .pj-firmachip-x { font-size: var(--fs-badge); opacity: 0.7; }
#tab-content-projekte .pj-firmachip:hover .pj-firmachip-x { opacity: 1; }
#tab-content-projekte .pj-firmachip:focus-visible { outline: 2px solid var(--lod-darkblue); outline-offset: 1px; }

/* ════════════════════════════════════════════════════════════════════════════
   Container-Queries — ANS DATEIENDE (Konvention aus dem drawer-container-
   queries-Fix: @container erhoeht die Spezifitaet nicht, Query-Bloecke gehoeren
   hinter gleich-spezifische Basis-Regeln).

   Header-Badge-Priorisierung — Projekt-Karten haben bis zu 4 Badges
   (Herkunft + Status + "X Überfällig" + Extern). Bei 250-280px Spaltenbreite
   passen sie nicht alle in eine Zeile. Statt Wrap (waere zwei-zeilig) blenden
   wir die unwichtigsten Badges aus.
   Prioritaet (sichtbar bleibt im Engpass): Status > Herkunft > Ueberfaellig > Extern.
   ════════════════════════════════════════════════════════════════════════════ */
@container (max-width: 320px) {
  .app-scope .card-v2.pj-card-app .card-app-header [data-card-badge="extern"] {
    display: none;
  }
}
@container (max-width: 250px) {
  .app-scope .card-v2.pj-card-app .card-app-header [data-card-badge="ueberfaellig"] {
    display: none;
  }
}