/* data_engine: Tabellen als Karten auf kleinen Bildschirmen (< 640px).
   Opt-in: nur Tabellen mit der Klasse .engine-mobile-cards (gesetzt ueber mobile_cards=True in der Table-Config bzw. "mobile_cards": True in einer Table-Card).
   Je Spalte (Spalten-Dict) optional:  "mobile_hide": True  (auf dem Handy ausblenden)   "mobile_full": True  (ueber die ganze Kartenbreite)
   Die erste Spalte ist der Kartentitel. Desktop und alle anderen Tabellen bleiben unveraendert. */
@media (max-width: 639px) {
  .engine-mobile-cards, .engine-mobile-cards tbody, .engine-mobile-cards tr, .engine-mobile-cards td { display: block; width: 100%; box-sizing: border-box; }
  .engine-mobile-cards { border-collapse: separate; }
  .engine-mobile-cards thead { display: none; }
  .engine-mobile-cards tbody { padding: 8px; }
  .engine-mobile-cards tr {
    height: auto !important; margin: 0 0 10px; padding: 10px 12px;
    background: var(--brand-surface, #fff); border: 1px solid var(--brand-border, #e2e8f0); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 8px; align-items: end;
  }
  .engine-mobile-cards td { padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0; white-space: normal !important; overflow-wrap: anywhere; }
  .engine-mobile-cards td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-text-muted, #64748b);
  }
  /* Titel (erste Spalte), "mobile_full" und Aktionen: ganze Breite */
  .engine-mobile-cards td:first-child, .engine-mobile-cards td.mc-full, .engine-mobile-cards td.mc-actions { grid-column: 1 / -1; }
  .engine-mobile-cards td:first-child { font-weight: 700; font-size: 1rem; }
  .engine-mobile-cards td:first-child::before { display: none; }
  .engine-mobile-cards td.mc-hide { display: none; }
  .engine-mobile-cards td.mc-actions { padding-top: 6px !important; border-top: 1px solid var(--brand-border, #e2e8f0) !important; width: 100%; }
  /* Eingabefelder: gross genug fuer den Daumen, 16px verhindert das Zoomen auf iOS */
  .engine-mobile-cards input[type=number], .engine-mobile-cards input[type=text], .engine-mobile-cards select {
    width: 100% !important; min-height: 44px; font-size: 16px; text-align: right;
  }
  .engine-mobile-cards td > div.flex { justify-content: flex-start !important; }
  .engine-mobile-cards td.text-right, .engine-mobile-cards td.text-center { text-align: left !important; }
  /* Summenzeile / Fusszeile */
  .engine-mobile-cards tbody.mc-footer tr { background: var(--brand-light, #f1f5f9); }
  /* Tabellenkopf-Rahmen darf mitwachsen */
  .engine-table-card .overflow-x-auto:has(.engine-mobile-cards) { overflow-x: visible; }
}