/* ServiceHub Redesign - Mobile Listen als Karten (Breakpoint <=640px).
   Rein optisch, additiv. Die Listen-Tabellen liegen in section.table-wrap (oft
   KLASSENLOSE table) und/oder als .data-table vor; auf dem Handy laufen sie
   horizontal ueber. Hier werden ihre Zeilen zu gestapelten Karten. Tap auf die
   Zeile oeffnet weiterhin den Detail-Drawer (volle Daten). PTE-Grid (.pte-table)
   ist ausgenommen. Nichts wird versteckt, das eine Funktion traegt. Light + Dark. */

@media (max-width: 640px) {
  /* Kopfzeile ausblenden (Spaltenlabels sind auf Mobile redundant) */
  .table-wrap table:not(.pte-table) thead,
  .data-table:not(.pte-table) thead { display: none; }

  /* Tabelle/Body als Block */
  .table-wrap table:not(.pte-table),
  .table-wrap table:not(.pte-table) tbody,
  .data-table:not(.pte-table),
  .data-table:not(.pte-table) tbody { display: block; width: 100%; }

  /* jede Zeile = Karte */
  .table-wrap table:not(.pte-table) tbody tr,
  .data-table:not(.pte-table) tbody tr {
    display: block;
    border: 1px solid var(--border, #EEE5DC);
    border-radius: 12px;
    margin: 0 0 8px;
    padding: 8px 12px;
    background: var(--surface, #FFFFFF);
    box-shadow: 0 1px 2px rgba(120, 80, 50, .06);
  }

  /* Zellen gestapelt, ohne Tabellen-Hoehe/Border */
  .table-wrap table:not(.pte-table) tbody td,
  .data-table:not(.pte-table) tbody td {
    display: block;
    border: none;
    height: auto;
    min-height: 0;
    padding: 2px 0;
    font-size: 13px;
    white-space: normal;
    text-align: left;
    max-width: 100%;
  }

  /* leere Zellen nehmen keinen Platz */
  .table-wrap table:not(.pte-table) tbody td:empty,
  .data-table:not(.pte-table) tbody td:empty { display: none; }

  /* Checkbox-Zelle kompakt + die Karte nicht horizontal scrollen lassen */
  .table-wrap table:not(.pte-table) tbody td:has(input[type="checkbox"]),
  .data-table:not(.pte-table) tbody td:has(input[type="checkbox"]) {
    display: inline-block;
    padding: 0 8px 4px 0;
  }
  .table-wrap:has(table:not(.pte-table)) { overflow-x: visible; }
}

@media (max-width: 640px) {
  [data-theme="dark"] .table-wrap table:not(.pte-table) tbody tr,
  [data-theme="dark"] .data-table:not(.pte-table) tbody tr { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
}