/* ============================================================
   List View — Mobile-first responsive entity list
   Ersetzt data-table fuer Entity-Listen.

   Struktur:
   .list-view                        — Container (definiert --list-columns)
     .list-header                    — Spaltenheader (hidden auf Mobile)
       .list-header__col             — Einzelne Header-Zelle
     .list-row                       — Eine Entity-Zeile
       .list-row__cols               — Grid-Bereich fuer strukturierte Spalten
         .list-row__col              — Einzelne Spaltenzelle
       .list-row__meta               — Umbruch-Bereich fuer Chips/Badges/Buttons
   ============================================================ */

/* --- Container --- */
.list-view {
  --list-columns: 1fr;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- Header (hidden auf Mobile) --- */
.list-header {
  display: none;
}

/* --- Zeile --- */
.list-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
  position: relative;
}

.list-row:has(.list-row__col--actions) {
  padding-right: 108px;
}

.list-row:last-child {
  border-bottom: none;
}

.list-row:hover {
  background: var(--color-bg-subtle);
}

.list-row--clickable {
  cursor: pointer;
}

.list-row--inactive {
  opacity: 0.5;
}

/* --- Spalten-Bereich --- */
.list-row__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-sm);
  align-items: center;
}

/* --- Einzelne Spalte --- */
.list-row__col {
  font-size: var(--font-size-base);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row__col--primary {
  font-weight: 600;
  flex: 1 1 100%;
}

.list-row__col--secondary {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.list-row__col--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.list-row__col--actions {
  position: absolute;
  right: var(--spacing-md);
  top: var(--spacing-sm);
  bottom: var(--spacing-sm);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Nur auf Desktop sichtbare Spalten */
.list-row__col--desktop {
  display: none;
}

/* --- Meta-Bereich (Umbruch-Zone) --- */
.list-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-sm);
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.list-row__meta:empty {
  display: none;
}

/* === Desktop (>= 768px) === */
@media (min-width: 768px) {
  .list-header {
    display: grid;
    grid-template-columns: var(--list-columns);
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
  }

  .list-header__col {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .list-header__col--numeric {
    text-align: right;
  }

  .list-row,
  .list-row:has(.list-row__col--actions) {
    position: static;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .list-row__cols {
    display: grid;
    grid-template-columns: var(--list-columns);
    gap: var(--spacing-sm);
  }

  .list-row__col--actions {
    position: static;
    flex-direction: row;
    justify-content: flex-end;
  }

  .list-row__col--primary {
    flex: unset;
  }

  .list-row__col--desktop {
    display: block;
  }

  .list-row__meta--desktop-hidden {
    display: none;
  }
}

/* --- Seitenvarianten (Spalten-Definitionen) --- */

.list-view--projects {
  --list-columns: 1.5fr 100px 1fr 120px 100px;
}

.list-view--trips {
  --list-columns: 90px 1fr 1fr 1.5fr 70px 90px 88px;
}

.list-view--expenses {
  --list-columns: 90px 1fr 1fr 1.5fr 1fr 90px 90px 88px;
}

.list-view--payments {
  --list-columns: 90px 120px 1.5fr 100px 100px;
}

.list-view--offers {
  --list-columns: 130px 1.5fr 90px 100px 100px;
}

.list-view--invoices {
  --list-columns: 130px 1.5fr 100px 90px 100px 100px;
}

.list-view--vehicles {
  --list-columns: 1.5fr 1fr 80px 44px;
}

.list-view--users {
  --list-columns: 1fr 1.5fr 100px 44px;
}

.list-view--locations {
  --list-columns: 1.5fr 2fr 80px 88px;
}

.list-view--team-members {
  --list-columns: 1.5fr 2fr 80px 44px;
}

.list-view--catalog {
  --list-columns: 2fr 80px 120px 88px;
}

.list-view--schedule-templates {
  --list-columns: 50px 1.5fr 1.5fr 70px 70px 88px;
}

.list-view--doc-templates {
  --list-columns: 2fr 80px 80px 130px;
}