/* ============================================================
   Mobil
   Zeilen werden zu Karten, Zusatz bekommt eine Beschriftung, weil
   die Spaltenüberschrift fehlt.
   ============================================================ */
@media (max-width: 760px) {
  .day-week-arrow {
    width: 34px;
  }

  .day-wd {
    padding: 8px 2px;
  }

  .day-wd-name {
    font-size: 0.62rem;
  }

  .day-wd-date {
    font-size: 0.85rem;
  }

  .day-wd-hours {
    font-size: 0.74rem;
  }

  .day-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .day-balance {
    min-width: 0;
  }

  .day-panel-head {
    flex-wrap: wrap;
    gap: 12px;
  }

  .day-panel-head-right {
    width: 100%;
    justify-content: space-between;
  }

  .day-grid-head {
    display: none;
  }

  .day-grid-row {
    display: grid;
    grid-template-columns: 1fr 112px;
    grid-template-areas: "project project" "lph hours" "bill bill" "note note";
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid var(--border);
    margin: 12px 0 0;
  }

  .day-grid.is-editing .day-grid-row {
    grid-template-columns: 40px 1fr 112px;
    grid-template-areas: "drag project project" "drag lph hours" "drag bill bill" "drag note remove";
  }

  .day-gc-project {
    grid-area: project;
  }

  .day-gc-lph {
    grid-area: lph;
  }

  .day-gc-hours {
    grid-area: hours;
  }

  .day-gc-bill {
    grid-area: bill;
  }

  .day-gc-note {
    grid-area: note;
  }

  .day-gc-drag {
    grid-area: drag;
  }

  .day-gc-remove {
    grid-area: remove;
  }

  .day-gc {
    padding: 0;
  }

  /* 16px verhindert den Zoom-Sprung beim Fokus in iOS Safari */
  .day-f,
  .day-lph {
    border-color: var(--border-strong);
    background: #fff;
    min-height: var(--touch);
    font-size: 16px;
  }

  .day-f-hours {
    font-size: 1.15rem;
  }

  .day-f-note {
    font-size: 15px;
  }

  .day-gc-project .day-f {
    font-family: var(--f-ui);
  }

  .day-grid:not(.is-editing) .day-f-lock {
    padding-left: 0;
  }

  .day-grid:not(.is-editing) .day-lph {
    border-color: transparent;
    background: transparent;
    padding-left: 0;
    min-height: 32px;
  }

  .day-bill-wrap {
    justify-content: flex-start;
    gap: 9px;
    min-height: 30px;
  }

  .day-bill-label {
    display: inline;
    font-size: 0.86rem;
    color: var(--muted);
  }

  .day-grid-row.is-billable {
    box-shadow: none;
    border-left: 3px solid var(--taupe-dark);
  }

  .day-icon-btn,
  .day-handle {
    width: var(--touch);
    height: var(--touch);
  }

  .day-panel-foot {
    flex-wrap: wrap;
    gap: 12px;
  }

  .day-kbd-hint {
    display: none;
  }

  .day-add-area .btn {
    width: 100%;
  }

  .day-foot-total {
    width: 100%;
    justify-content: space-between;
  }

  .day-quick-add {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Umbruch statt seitlichem Scrollen: ein Scrollbalken in einem
     schmalen Streifen ist am Handy kaum zu treffen. */
  .day-quick-chips {
    width: 100%;
    flex-wrap: wrap;
  }

  .day-chip {
    flex: 1 1 auto;
    justify-content: flex-start;
    min-height: var(--touch);
    white-space: nowrap;
  }

  .day-absence-fields {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .day-f-boxed {
    min-height: var(--touch);
    font-size: 16px;
  }
}

/* ============================================================
   Wiederverwendbare Mobil-Umwandlung für einfache Datentabellen
   (Abwesenheitseinträge, Leistungsphasen, Protokoll, Versions-
   historie): Zeilen werden zu Karten statt seitlich zu scrollen.
   Voraussetzung: <table class="responsive-table"> mit
   data-label="Spaltenname" auf jedem <td>. Bewusst als ein
   gemeinsamer Baustein statt je Tabelle eine eigene Mobil-Regel -
   genau das hat bei der Monatsübersicht zu sieben widersprüchlichen
   Fassungen geführt (siehe Commit zur Tagansicht-Aufräumung).
   ============================================================ */
@media (max-width: 760px) {
  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .responsive-table thead {
    display: none;
  }

  .responsive-table tr[hidden] {
    display: none !important;
  }

  .responsive-table tr {
    border: 1px solid var(--border);
    padding: 10px;
    margin-bottom: 12px;
    background: #fff;
  }

  .responsive-table td {
    border-bottom: 0;
    padding: 6px 0;
  }

  .responsive-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .responsive-table td[data-label=""]::before,
  .responsive-table td:not([data-label])::before {
    content: none;
  }
}