/* ===================================================================
 * Mantik-Schema Pattern CSS: list-view
 *
 * Stylt die Bausteine aus patterns/list-view.html. Verbindlich.
 * Apps die das Pattern uebernehmen, MUESSEN diese CSS-Datei laden
 * (nach tokens.css + base.css + components.css, vor app.css).
 *
 * Klassen-Namensraum: m-page, m-searchbar, m-search-input,
 * m-filters, m-filter-chip, m-grid, m-grid-empty, m-meta.
 * ================================================================== */

/* Haupt-Container - der gesamte Inhalt unter dem Header.
 *
 * VOLLE BREITE ist der Normalfall (Nutzer-Vorgabe 2026-07-23, Buglog #1687:
 * "das darf bei keiner App so sein"). Eine Arbeitsoberflaeche - Tabellen,
 * Listen, eingebettete Werkzeuge - soll den Bildschirm nutzen, den der Nutzer
 * hat. Die frueher feste Grenze von 1400px liess auf breiten Schirmen links und
 * rechts leere Streifen stehen und schnuerte eingebettete Werkzeuge sogar
 * ZWEIMAL ein (aeussere Seite + eigene Grenze).
 *
 * Eine Obergrenze ist nur fuer LESE-Inhalte sinnvoll (Fliesstext wird ab etwa
 * 80 Zeichen je Zeile schwer lesbar). Die wird dann ausdruecklich gewaehlt:
 * <main class="m-page m-page-lesen"> - eine bewusste Entscheidung je Seite,
 * keine stille Vorgabe fuer alle. */
.m-page {
  padding: var(--space-5);
  max-width: none;
  margin: 0;
}

/* Lese-Breite: NUR fuer Fliesstext-Seiten ausdruecklich dazusetzen. */
.m-page-lesen {
  max-width: var(--container-default);
  margin: 0 auto;
}

/* Stand-Text im Header (Anzahl, Zeitstempel, ...) */
.m-meta {
  font-size: var(--font-size-sm);
  color: var(--text-soft);
}

/* Suchleiste: eigene Zeile, nicht im Header. Kompakt, nicht fett. */
.m-searchbar {
  margin-bottom: var(--space-3);
}
.m-search-input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) 2.25rem;
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 0.6rem center;
  background-size: 16px 16px;
}
.m-search-input::placeholder { color: var(--text-mute); }
.m-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Filter-Chip-Leiste - Schnellfilter direkt unter der Suche */
.m-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.m-filter-chip {
  font-size: var(--font-size-xs);
}
.m-filter-chip.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* Grid - auto-fill Karten-Layout */
.m-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

/* Empty-State - sichtbar nur wenn Liste leer ist */
.m-grid-empty {
  text-align: center;
  color: var(--text-soft);
}

/* Zoom-Knopfgruppe im Header (A- 100% A+) */
.m-zoomgroup {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.m-zoomgroup .m-btn { min-width: 2.4rem; padding: 0.2rem 0.5rem; font-family: var(--font-mono); }

/* Build-Info am Fuss - Version + Build-Stempel + Host */
.m-buildinfo {
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--font-size-xs);
  /* text-soft, not text-mute: the footer stands on --bg, not on a card.
     Measured 2026-10-04 with axe on the mailbox of mantik-feedback:
     #6b6b6b on #e9e9e5 is 4.38:1, below the 4.5:1 of WCAG AA. */
  color: var(--text-soft);
  font-family: var(--font-mono);
}
.m-buildinfo-sep { opacity: 0.5; }

/* Listen-Karte (Standard fuer Listen-Items) */
.m-list-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.m-list-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.m-list-card:focus-visible { border-color: var(--accent); }
.m-list-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.m-list-card-name {
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}
.m-list-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-soft);
  font-family: var(--font-mono);
}
.m-list-card-note {
  font-size: var(--font-size-sm);
  color: var(--text-mute);
}