/* Backend am Handy (unter 640 px). Eingebunden über AdminPanelProvider (STYLES_AFTER).
   Filament stapelt Tabellenzeilen unterhalb von 640 px (stackedOnMobile, siehe AppServiceProvider); hier werden
   daraus kompakte Karten, und Formulare bekommen weniger Luft. Ab 640 px greift nichts davon. */
@media (max-width: 639.98px) {

  /* ---------- Tabellenzeilen als Karten: Foto links, Haupttext daneben, Auswahl rechts; darunter Status & Co., Menü rechts ---------- */
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px;
  }
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell),
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):first-child,
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):last-child {
    padding: 0; border: 0;
  }
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-cell-label {
    margin: 0; font-size: 11px; line-height: 1.2; opacity: .7;
  }

  /* Foto: ohne Beschriftung, feste Breite */
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-image) {
    order: 1; flex: 0 0 64px;
  }
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-image) > .fi-ta-cell-label { display: none; }

  /* Ein Symbol in der ersten Spalte (z. B. gelesen/ungelesen bei Anfragen): wie ein Foto vor den Haupttext */
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell + .fi-ta-cell:has(.fi-ta-icon):not(:has(.fi-ta-text)),
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:first-child:has(.fi-ta-icon):not(:has(.fi-ta-text)) {
    order: 1; flex: 0 0 auto; display: block;
  }
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell + .fi-ta-cell:has(.fi-ta-icon):not(:has(.fi-ta-text)) > .fi-ta-cell-label,
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:first-child:has(.fi-ta-icon):not(:has(.fi-ta-text)) > .fi-ta-cell-label { display: none; }

  /* Alles Weitere (Status, Notfall, Anfragen, Datum …): in einer Zeile, Beschriftung klein davor.
     Spalten, die Filament per Breakpoint ausblendet, bleiben ausgeblendet. */
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):not([class*="fi-visible"]):not([class*="fi-hidden"]):not(:has(.fi-ta-image)):not(:has(.fi-ta-actions)) {
    order: 4; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; max-width: 100%;
  }
  /* Farbige Badges (Status, Art) erklären sich selbst */
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-badge.fi-color) > .fi-ta-cell-label { display: none; }

  /* Haupttext = erste sichtbare Textzelle der Zeile: füllt die erste Zeile neben Foto und Auswahl, ohne Beschriftung */
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):not([class*="fi-visible"]):has(.fi-ta-text):not(.fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):not([class*="fi-visible"]):has(.fi-ta-text) ~ td) {
    order: 2; flex: 1 1 100%; min-width: 0; display: block; padding-right: 32px;
  }
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr:has(.fi-ta-image) > .fi-ta-cell:not(.fi-ta-selection-cell):not([class*="fi-visible"]):has(.fi-ta-text):not(.fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):not([class*="fi-visible"]):has(.fi-ta-text) ~ td) {
    flex-basis: calc(100% - 76px);
  }
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr:has(> .fi-ta-selection-cell + .fi-ta-cell > .fi-ta-cell-content > .fi-ta-col > .fi-ta-icon) > .fi-ta-cell:not(.fi-ta-selection-cell):not([class*="fi-visible"]):has(.fi-ta-text):not(.fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):not([class*="fi-visible"]):has(.fi-ta-text) ~ td) {
    flex-basis: calc(100% - 36px);
  }
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):not([class*="fi-visible"]):has(.fi-ta-text):not(.fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell):not([class*="fi-visible"]):has(.fi-ta-text) ~ td) > .fi-ta-cell-label { display: none; }

  /* Auswahlkästchen: Filament setzt es absolut oben rechts (bleibt so), der Haupttext hält rechts Platz dafür frei */
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell { top: 10px; }

  /* Zeilenmenü rechts in der zweiten Zeile */
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-actions) {
    order: 5; flex: 0 0 auto; margin-left: auto; padding: 0;
  }
  .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-actions) > .fi-ta-actions {
    justify-content: flex-end; margin: 0; padding: 0;
  }

  /* ---------- Unterseiten (Formulare): weniger Luft, Kopfzeile nicht klebend ---------- */
  .fi-main { padding-inline: 12px; }
  .fi-page-main { gap: 16px; }
  .fi-section-content { padding: 14px; }
  .fi-section-header { padding: 12px 14px; }
  .fi-sc-has-gap { gap: 14px; }
  .fi-fo-field-label-ctn { margin-bottom: 2px; }
  .fi-fo-checkbox-list-options { gap: 6px 12px; }
  .fi-header { gap: 10px; }
  .fi-header-actions-ctn { flex-wrap: wrap; gap: 8px; }
  /* Die klebende Kopfzeile (Speichern/Vorschau, siehe AdminPanelProvider) nimmt am Handy zu viel Höhe */
  .fi-page-header-main-ctn > .fi-header { position: static; margin-inline: 0; padding: 0; background: transparent; border: 0; backdrop-filter: none; }
}