/* ════════════════════════════════════════════════════════════════════
   mobile.css – Responsive-Layer für die Post-App (Handy/Tablet).
   Wird über _pwa_head.html auf ALLEN Seiten geladen.
   Desktop bleibt unverändert (Regeln nur in @media).
   ════════════════════════════════════════════════════════════════════ */

/* iOS: 16px verhindert Auto-Zoom beim Fokus von Eingaben */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── Mobile Navigation (Hamburger) ──────────────────────────────────── */
.nav-hamburger { display: none; }

@media (max-width: 900px) {
  .navbar {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .5rem 1rem;
  }
  .nav-brand { flex: 1; font-size: 1.1rem; }
  .nav-hamburger {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: rgba(0,212,170,.1);
    border: 1px solid rgba(0,212,170,.3);
    border-radius: 10px;
    color: var(--color-primary);
    font-size: 1.5rem; line-height: 1;
    cursor: pointer; padding: 0;
  }
  .nav-status { display: none; }

  /* Menü als ausklappbares Panel unter der Leiste */
  .nav-links {
    display: none;
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    flex-direction: column;
    gap: .15rem;
    padding: .4rem 0 .2rem;
    border-top: 1px solid rgba(0,212,170,.18);
    margin-top: .4rem;
    max-height: 70vh;
    overflow-y: auto;
  }
  .navbar.nav-open .nav-links { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .8rem 1rem;
    min-height: 44px;
    border-radius: 10px;
    font-size: 1rem;
  }
  .nav-acct-sep { border-top: 1px solid rgba(255,255,255,.1); margin: .35rem .25rem; }
}

/* ── Allgemein: enger Außenabstand, Summen/Filter umbrechen ─────────── */
@media (max-width: 768px) {
  .main-content { padding: 1rem .8rem 3rem !important; }
  .page-header h1 { font-size: 1.4rem; }
  .sum-row, .bz-sum-row, .erl-sum-row { gap: .6rem; }
  .sum-card { min-width: 0; flex: 1 1 30%; padding: .7rem .5rem; }
  .sum-val { font-size: 1.6rem; }
  .filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .filter-btn { min-height: 40px; }

  /* Große Tap-Flächen für alle Aktionsknöpfe */
  .pdf-btn, .btn-erledigt, .view-toggle-btn, button.bez-toggle, .r-save-btn { min-height: 40px; }
}

/* ════════════════════════════════════════════════════════════════════
   LISTEN → KARTEN (schmale Bildschirme)
   Betrifft: Rechnungen/Finanzamt (.r-row), Wegheften (.list-row),
             Bezahlt (.bz-row), Erledigt (.erl-row).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Kopfzeilen der Tabellen ausblenden */
  .r-head, .list-header, .bz-head, .erl-head { display: none !important; }

  /* Tabellen-Wrapper neutralisieren (Karten haben eigene Optik) */
  .r-table-wrap, .table-wrap, .bz-table, .erl-table, .list-table {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Zeile = Karte */
  .r-row, .list-row, .list-row--4, .bz-row, .erl-row {
    display: block !important;
    grid-template-columns: none !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius) !important;
    padding: .85rem 1rem !important;
    margin-bottom: .7rem !important;
    min-height: 0 !important;
    box-shadow: var(--shadow);
  }
  .r-row > span, .list-row > *, .bz-row > *, .erl-row > * {
    display: block !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
  }

  /* Firma/Grund vollständig lesbar (Kern der Beschwerde) */
  .rc-firma, .col-firma, .bz-firma, .erl-firma { min-width: 0 !important; }
  .rc-firma-name {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    font-size: 1.05rem !important; line-height: 1.3;
  }
  .rc-firma-grund {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    font-size: .9rem !important; margin-top: .15rem;
  }
  .col-firma, .bz-firma, .erl-firma { font-size: 1.05rem !important; font-weight: 700; }

  /* Datum oben, dezent */
  .rc-datum, .col-datum, .bz-datum, .erl-datum {
    color: var(--color-text-muted) !important; font-size: .8rem !important; margin-bottom: .25rem;
  }

  /* Betrag/Frist mit Beschriftung (sonst kontextlos) */
  .rc-betrag, .col-betrag, .bz-betrag {
    font-size: 1.05rem !important; font-weight: 700; margin-top: .45rem;
  }
  .rc-betrag::before, .col-betrag::before, .bz-betrag::before {
    content: "Betrag: "; font-weight: 600; color: var(--color-text-muted); font-size: .85rem;
  }
  .rc-frist, .col-frist {
    font-size: .9rem !important; margin-top: .2rem; color: var(--color-text-muted) !important;
  }
  .rc-frist::before, .col-frist::before {
    content: "Frist: "; font-weight: 600; color: var(--color-text-muted);
  }
  .rc-frist:empty, .col-frist:empty { display: none !important; }

  /* Status / Bezahlt-Bereich linksbündig mit Abstand */
  .rc-bezahlt, .col-status, .bz-bez {
    justify-content: flex-start !important; margin-top: .5rem;
  }

  /* Aktionsleiste: umbrechen, große Buttons */
  .rc-actions, .col-action, .bz-actions, .erl-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    margin-top: .75rem !important;
    justify-content: flex-start !important;
    align-items: center;
  }
  .rc-actions .pdf-btn, .rc-actions button,
  .bz-actions .pdf-btn, .bz-actions button,
  .erl-actions .pdf-btn, .erl-actions button { min-height: 40px; }

  /* Thumbnail etwas größer & klar antippbar */
  .thumb-small { width: 46px !important; height: 62px !important; cursor: zoom-in; }

  /* Detail-/Edit-Klappbereich volle Breite */
  .r-detail, .list-detail, .bz-body, .erl-body { padding-left: 1rem !important; }
  .r-detail-field, .detail-grid { grid-template-columns: 1fr !important; }
  .r-detail input, .bez-field input { font-size: 16px !important; }

  /* Karten-Layouts, die bereits Karten sind: volle Breite/Umbruch */
  .todo-card, .pruef-card { padding: 1rem 1.1rem; }
  .todo-head, .pruef-head { gap: .5rem; }
  .todo-actions { width: 100%; justify-content: flex-start; }
}

/* Lösch-Button in Kontoauszug-Liste (alle Größen) */
.ka-del-btn {
  background: none; border: none; color: #fca5a5; cursor: pointer;
  font-size: 1.05rem; padding: .3rem; line-height: 1; min-width: 40px; min-height: 36px;
}
.ka-del-btn:hover { color: var(--color-danger); }
.pk-restore-btn {
  background: rgba(0,212,170,.12); color: var(--color-primary);
  border: 1.5px solid rgba(0,212,170,.45); border-radius: 999px;
  padding: .4rem .9rem; font-size: .82rem; font-weight: 700; cursor: pointer; min-height: 38px;
}
.pk-restore-btn:hover { background: rgba(0,212,170,.2); }

/* ── Kontoauszüge: Karten/Stapeln auf dem Handy ─────────────────────── */
@media (max-width: 768px) {
  .ka-drop-zone { padding: 1.6rem 1rem !important; margin-bottom: 1.2rem !important; }

  /* Verlaufs-Kopfzeile aus, Zeilen werden Karten */
  .ka-history-head { display: none !important; }
  .ka-history-row {
    display: block !important; grid-template-columns: none !important;
    position: relative;
    border: 1px solid var(--color-border-soft) !important;
    border-radius: var(--radius) !important;
    background: var(--color-surface) !important;
    padding: .8rem 1rem !important; margin-bottom: .6rem !important;
  }
  .ka-history-row > span { display: block !important; text-align: left !important;
    white-space: normal !important; overflow: visible !important; }
  .ka-history-row > span:nth-child(2) { font-weight: 700; color: var(--color-text); font-size: 1rem; }
  .ka-history-row > span:nth-child(3)::before { content: "Buchungen: "; color: var(--color-text-muted); font-size: .8rem; }
  .ka-history-row > span:nth-child(4)::before { content: "Auto ✓: "; color: var(--color-text-muted); font-size: .8rem; }
  .ka-history-row > span:nth-child(5)::before { content: "Vorschläge: "; color: var(--color-text-muted); font-size: .8rem; }
  .ka-history-row > span:nth-child(6) { position: absolute; top: .5rem; right: .5rem; width: auto !important; }

  /* Match-/Buchungszeilen stapeln */
  .ka-match, .ka-buch-row {
    display: block !important; grid-template-columns: none !important;
  }
  .ka-match > div, .ka-buch-row > span { display: block !important; text-align: left !important; white-space: normal !important; }
  .ka-match-vwz { max-width: none !important; white-space: normal !important; }
  .ka-match-betrag { text-align: left !important; margin-top: .3rem; }
  .ka-match-actions { justify-content: flex-start !important; margin-top: .5rem; flex-wrap: wrap; }
  .ka-btn-ja, .ka-btn-nein { min-height: 40px; }
}

/* Sehr schmale Telefone */
@media (max-width: 380px) {
  .sum-card { flex: 1 1 45%; }
  .nav-brand .nav-title { font-size: 1rem; }
}