/* Nur Media-Queries. Wird nach style.css geladen, überschreibt also gezielt.
   form.html/print.css bleiben außen vor — deren feste Maße braucht die
   PDF-Erzeugung. */

@media (max-width: 640px) {
  main { padding: 12px; }
  header { padding: 12px; gap: 8px; }
  header h1 { font-size: 17px; }

  /* Tabellen sind am Desktop richtig. Am Handy wird jede Zeile zur Karte:
     der Kopf verschwindet, jede Zelle trägt ihre Spaltenüberschrift selbst
     (data-label, gesetzt in app.js). */
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; left: -9999px; }
  table { border: 0; }
  tbody tr {
    border: 1px solid #eaecf0;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
  }
  tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border: 0;
    padding: 5px 0;
    text-align: right;
  }
  tbody td::before {
    content: attr(data-label);
    color: #667085;
    font-size: 12px;
    text-align: left;
    flex: 0 0 42%;
  }
  /* Ohne data-label (z.B. die Aktions-Zelle) keine leere Beschriftungsspalte. */
  tbody td:not([data-label])::before { content: none; }
  tbody td.actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    /* Am Desktop stehen die drei Knöpfe bewusst in einer Zeile; auf 375px
       zwingt das die ganze Seite in horizontales Scrollen. */
    white-space: normal;
  }
  tbody td:empty { display: none; }

  /* Diese Deckel sind Desktop-Spaltenbreiten. Als Karte muss der Wert
     stattdessen umbrechen dürfen, sonst schiebt eine lange Coach-Liste oder
     ein langer Statustext die Seite über den Bildschirmrand hinaus. */
  .status-cell, .coaches-cell { max-width: none; }
  tbody td { min-width: 0; overflow-wrap: anywhere; }

  /* Fingergerechte Ziele. 44px ist die Untergrenze, unter der Antippen
     unzuverlässig wird. */
  input, select, button, .btn-link { min-height: 44px; }
  .btn-link.small, button.small { min-height: 38px; }
  button, .btn-link { width: 100%; text-align: center; }
  td.actions .btn-link, td.actions button { width: auto; }
  .tab-btn { width: auto; }
  /* Ein bildschirmbreiter Löschen-Knopf direkt unter dem Betragsfeld wird
     zwangsläufig irgendwann versehentlich getroffen. */
  button.remove { width: auto; align-self: flex-start; }
  button.cal-nav { width: auto; }

  .tabs { flex-wrap: wrap; width: 100%; }
  .md-status { margin-left: 0; width: 100%; }
  header { gap: 10px; }

  /* Lange Event-Titel in den Reminder-Links dürfen umbrechen statt zu schieben. */
  .reminder-links a { overflow-wrap: anywhere; }
  .chip .chip-text { max-width: 100%; }

  .filter-bar { flex-direction: column; align-items: stretch; }
  .form-row { flex-direction: column; align-items: stretch; }
  .form-row .grow { min-width: 0; }

  /* Event-Editor: Kalender darf nicht über den Rand laufen. */
  .calendar-wrap { flex-direction: column; }
  .coach-amount-row { flex-wrap: wrap; }
  .coach-amount-row .name { min-width: 0; width: 100%; }
  .coach-amount-row input { width: 100%; }
  .coach-amount-row .total { margin-left: 0; }
  #per-day-table input { width: 100%; }

  .capbar { height: 10px; }
}

/* Der Kalender hat feste 34px-Spalten und sprengt schmale Displays. Gilt
   unabhängig vom Breakpoint, weil er auch im Querformat eng wird. */
@media (max-width: 720px) {
  .calendar { width: 100%; max-width: 300px; }
  /* Ohne feste Breite dehnt der erste Nav-Knopf sich und schiebt den Monat
     aus der Mitte. */
  .cal-head { gap: 8px; }
  .cal-head > * { flex: 0 0 auto; }
  button.cal-nav { width: 44px; min-height: 40px; }
  .cal-weekdays, .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  button.cal-day { width: 100%; height: 40px; }
}