/*
 * Gemeinsamer CSS-Baustein „Karte je Zeile" (Häppchen 14c, 27.09.2026) — EINE Datei für die interne App und das Portal.
 * Intern über <link href="/karte-liste.css">, im Portal über /portal-dateien/karte-liste.css (feste Liste in
 * module/meisterregal/portal-dateien.js). Keine Doppelung in den Modulen.
 *
 * Unter 600 px wird eine <table class="karte-liste"> zu Karten: je Zeile eine Karte, die Hauptzelle (.km-haupt, z. B.
 * Artikel oder Auftrag) über die volle Breite, die übrigen Zellen zweispaltig mit ihrer Bezeichnung (data-label), die
 * Aktionszelle (.km-aktion) als Knopfreihe am Kartenende. Keine feste Mindestbreite, kein seitliches Scrollen.
 * Ab 600 px bleibt die Tabelle eine Tabelle.
 */
.km-filter { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.km-filter > * { min-width:0; max-width:100%; }

@media (max-width: 599px) {
  table.karte-liste, table.karte-liste tbody, table.karte-liste tfoot { display:block; width:100%; }
  table.karte-liste thead { display:none; }
  table.karte-liste tr {
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:6px 12px;
    background:var(--card, #fff); border:1px solid var(--brd, #e5e5ea); border-radius:12px;
    padding:10px 12px; margin:0 0 8px;
  }
  table.karte-liste td {
    display:block; min-width:0; padding:0 !important; border:0 !important; white-space:normal !important;
    text-align:left !important; overflow-wrap:anywhere; font-size:14px;
  }
  table.karte-liste td[data-label]::before {
    content:attr(data-label); display:block; font-size:11px; font-weight:600; color:var(--txt2, #86868b);
    text-transform:uppercase; letter-spacing:.02em; margin-bottom:1px;
  }
  table.karte-liste td.km-haupt { grid-column:1 / -1; order:-1; font-weight:600; font-size:15px; }
  table.karte-liste td.km-haupt::before { display:none; }
  table.karte-liste td.km-voll { grid-column:1 / -1; }
  table.karte-liste td.km-aktion { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
  table.karte-liste td.km-aktion::before { display:none; }
  table.karte-liste td:empty { display:none; }
  /* Farbrand einer Zeile (z. B. EIN/AUS/STORNO) sitzt in der Kartenansicht an der ganzen Karte */
  table.karte-liste tr[class*="rand-"] > td:first-child { border-left:0 !important; }
  table.karte-liste tr.p-rand-ein { border-left:4px solid var(--portal-primary, #34C759); }
  table.karte-liste tr.p-rand-aus { border-left:4px solid #5B6B82; }
  table.karte-liste tr.p-rand-storno { border-left:4px solid #FF3B30; }
  table.karte-liste tr.p-rand-umbuchung { border-left:4px solid #007AFF; }
  table.karte-liste tr.p-rand-zuordnung { border-left:4px solid #8E44AD; }
  .km-filter > * { flex:1 1 140px; }
  .km-filter input, .km-filter select { width:100%; box-sizing:border-box; }
}