/* ============================================================================
   Tabellen am Telefon – das Aussehen.

   Eigene Datei und nicht in app.css, aus einem handfesten Grund: Die Seiten,
   die die großen Tabellen tragen (allen voran `templates/ankauf.html`), sind
   Altbestand. Sie erben nicht von `base.html` und laden `app.css` nicht –
   dort hätten die Regeln also genau die Seiten nicht erreicht, für die sie
   gebaut sind. Eine Altbestandsseite bindet stattdessen diese eine Datei ein:

       <link rel="stylesheet" href="{{ url_for('static', filename='tabelle_mobil.css') }}">

   Das Verhalten steht einmal in `static/widgets.js`.
   Maßgeblich ist docs/STANDARD-TABELLEN.md.

   JEDES `var()` HIER TRÄGT EINEN RÜCKFALL, und zwar aus demselben Grund:
   Dieselben Altbestandsseiten laden auch `tokens.css` nicht. Sie bringen eine
   eigene, kürzere `:root`-Palette mit – Farben ja, Abstände und Radien nein.
   Ohne Rückfall ist `gap: var(--sp-3, 12px)` dort schlicht ungültig, und die
   Kacheln stehen ohne Abstand aneinander: aus „Stufe · Baujahr" wird
   „StufeBaujahr". Das ist genau so passiert.
   ============================================================================ */
/* ── Tabelle am Telefon: erst wählen, dann hineingehen ────────────────────
   Der Klassenvertrag zu `widgets.mobilTabelle` (static/widgets.js). Das
   Verhalten steht dort einmal, das Aussehen hier.

   Die Grenze liegt bei 860 px, nicht bei 640: Auch auf einem Tablet im
   Hochformat ist eine fünfzehnspaltige Tabelle nicht bedienbar. */
.mtab-schmal { display: none; }
@media (max-width: 860px) {
  .mtab-breit  { display: none; }
  .mtab-schmal { display: block; }
}
.mtab-karte { border: 1px solid var(--border, #d6deed); border-radius: var(--r-md, 8px);
  padding: 10px 12px; margin-bottom: var(--sp-2, 8px); cursor: pointer;
  background: var(--card, #ffffff); }
.mtab-karte:active { background: var(--bg, #f3f6fb); }
.mtab-kopf { display: flex; align-items: baseline; gap: var(--sp-2, 8px); }
.mtab-titel { font-weight: 600; flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mtab-pfeil { color: var(--muted, #56617a); font-size: 20px; line-height: 1; }
/* Die Kennzahlen der Zeile. Nebeneinander statt untereinander: Auf einem
   Telefon zählt jede Zeile Höhe, und zwei bis vier Zahlen passen quer. */
.mtab-kacheln { display: flex; flex-wrap: wrap; gap: var(--sp-3, 12px); margin-top: 6px; }
/* `flex: 0 0 auto` ist hier kein Feinschliff: Ohne die Zeile schrumpfen die
   Kacheln auf die Breite ihrer ZAHL, und die längeren Beschriftungen darüber
   laufen ineinander – aus „Stufe · Baujahr · gew. RND" wird
   „StufeBaujahrgew. RND". Flex-Elemente schrumpfen von sich aus. */
.mtab-kachel { flex: 0 0 auto; }
.mtab-kachel-l { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted, #56617a); white-space: nowrap; }
.mtab-kachel-w { font-size: var(--fs-sm, 12.5px); font-variant-numeric: tabular-nums; }
.mtab-kacheln-gross { padding: 10px 12px; border-radius: var(--r-md, 8px);
  background: var(--surface, #eef2f7); margin-bottom: var(--sp-3, 12px); gap: var(--sp-4, 16px); }
.mtab-kacheln-gross .mtab-kachel-w { font-size: 18px; font-weight: 700; }
/* Ein Wert, der Aufmerksamkeit braucht, trägt sie in der Farbe UND im Text –
   die Seite schreibt das Zeichen in `wert`, hier steht nur die Farbe. */
.mtab-kachel.ist-warn  .mtab-kachel-w { color: var(--warn, #c9820a); }
.mtab-kachel.ist-gut   .mtab-kachel-w { color: var(--success, #218a47); }
.mtab-kachel.ist-fehlt .mtab-kachel-w { color: var(--danger, #c0392b); }
.mtab-hinweis { font-size: 11px; color: var(--muted, #56617a); margin-top: 5px; }
/* Gruppe vs. Bauteil (VALDURA-431): Eine Gruppenkarte kündigt an, dass es
   weitergeht – eigener Farbton, Chevron „»" statt „›". Ohne diese Regel wären
   Gruppe und Bauteil erst nach dem Antippen zu unterscheiden, und genau das
   war die Rückmeldung zu VALDURA-428. */
.mtab-karte-gruppe { background: var(--surface, #eef2f7);
  border-left: 3px solid var(--primary, #2f52e0); }
.mtab-pfeil-gruppe { color: var(--primary, #2f52e0); font-weight: 700; }
/* Eine Gruppe ohne Treffer bleibt stehen (sonst sieht man den Filter nicht),
   tritt aber optisch zurück – dieselbe Auskunft wie die Nullen in ihren
   Kacheln, nur schon vor dem Lesen der Zahlen erkennbar. */
.mtab-karte.mtab-ohne-treffer { opacity: .55; }
/* Der Pfad ab der zweiten Ebene („Haus › Fensterelemente") – ein „zurück"
   allein sagt bei drei Ebenen nicht mehr, wo man steht. */
.mtab-pfad { font-size: 11px; color: var(--muted, #56617a); margin: -4px 0 10px; }
.mtab-pfad-trenn { opacity: .6; }
.mtab-leiste { display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
  padding-bottom: 9px; border-bottom: 1px solid var(--border, #d6deed); }
.mtab-leiste-titel { font-weight: 600; flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mtab-leiste-zahl { font-size: 11px; color: var(--muted, #56617a); white-space: nowrap; }
.mtab-blaettern { display: flex; justify-content: space-between; gap: 10px;
  margin-bottom: var(--sp-3, 12px); }
.mtab-fuss { display: flex; justify-content: space-between; gap: 10px;
  padding-top: 10px; border-top: 1px solid var(--border, #d6deed); }
/* Ein Feld je Zeile, Beschriftung darüber: Auf einem Telefon ist die volle
   Breite das Einzige, was ein Zahlenfeld gut treffbar macht. */
.mtab-block { margin-bottom: 14px; }
.mtab-feld { display: block; margin-bottom: 9px; }
.mtab-feld > span { display: block; font-size: 11px; color: var(--muted, #56617a);
  margin-bottom: 3px; }
.mtab-feld .form-input, .mtab-feld input, .mtab-feld select { width: 100%; }
.mtab-schalter { display: flex; align-items: center; gap: 9px; margin-bottom: 9px;
  font-size: 13px; }
.mtab-schalter input { width: 20px; height: 20px; flex: none; }
.mtab-breit-scroll { overflow-x: auto; }
/* Der Rumpf der geöffneten Zeile. Eigene Klasse, damit eine Seite ihn
   ansprechen kann, ohne sich an die Struktur des Widgets zu hängen. */
.mtab-detail { }