/* ============================================================
   Enoxo Planner — Responsive Layer (v4.28)
   Zentrale Mobile-Anpassungen für ALLE Seiten.
   Wird als letztes Stylesheet geladen; überschreibt gezielt
   die festen Spalten-Layouts der einzelnen Seiten.
   ============================================================ */

/* ── Handy & kleine Tablets ── */
@media (max-width: 760px) {

  /* Mehrspaltige Layouts → 1 Spalte
     (Selektoren automatisiert aus allen Seiten extrahiert) */
  .cal-layout,
  .dash-grid,
  .lt-fields,
  .mock-cols,
  .settings-layout,
  .support-layout,
  .chart-row,
  .kanban,
  .docs-layout,
  .main-grid,
  .notes-mini,
  .balance-row,
  .focus-stats,
  .hero-grid-2col,
  .overview-row {
    grid-template-columns: 1fr !important;
  }

  /* Statistik-Reihen (4 Kacheln) → 2×2 */
  .mock-stats,
  .tt-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Modals: volle Breite, scrollbar */
  .modal-box {
    width: min(560px, 94vw) !important;
    max-width: 94vw !important;
    max-height: 88vh;
    overflow-y: auto;
  }

  /* Einkaufsliste: Eingabezeile umbrechen */
  .add-row { flex-wrap: wrap; }
  .add-row input.input-field[type="text"] { flex: 1 1 100%; }
  .add-row select.input-field { max-width: none !important; flex: 1 1 55%; }
  .add-row input[type="number"].input-field { max-width: none !important; flex: 1 1 22%; }
  .add-row .btn { flex: 1 1 12%; }

  /* Fokus-Ring skaliert mit */
  .ring-svg { width: min(300px, 78vw); height: auto; }

  /* Grundabstände & Typo kompakter */
  h1.orb { font-size: 24px !important; }
  h2.orb { font-size: 20px !important; }
  main { padding-left: 14px !important; padding-right: 14px !important; }

  /* Tabellen horizontal scrollbar statt Überlauf */
  .card table, main table { display: block; overflow-x: auto; }

  /* Demo-Banner kompakt (bleibt einzeilig) */
  .demo-banner { font-size: 10px; padding: 0 8px; gap: 6px; }
  .demo-banner .btn { padding: 4px 9px; font-size: 10px; }
}

/* ── Sehr schmale Geräte ── */
@media (max-width: 430px) {
  .mock-stats, .tt-stats { grid-template-columns: 1fr 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .qa-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Touch-Geräte: iOS-Auto-Zoom verhindern + größere Ziele ── */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  .btn { min-height: 42px; }
}

/* ── Wischen zum Löschen (v4.45) ──────────────────────────── */
.pl-swipe { position:relative; touch-action:pan-y; }
.pl-swipe::after {
  content:'Löschen';
  position:absolute; top:0; right:0; bottom:0; width:96px;
  display:flex; align-items:center; justify-content:center;
  background:var(--red,#e5484d); color:#fff;
  font:700 12px 'Exo 2',system-ui,sans-serif; letter-spacing:.04em;
  border-radius:8px; opacity:0; transition:opacity .15s ease;
  pointer-events:none; z-index:-1;
}
.pl-swipe.pl-swiping::after { opacity:.55; }
.pl-swipe.pl-swipe-armed::after { opacity:1; }
.pl-swipe.pl-swiping { will-change:transform; }

/* Lösch-Knöpfe in Listen: echtes Fingerziel statt Mini-Kreuz */
@media (pointer: coarse) {
  .day-event-del, .event-del {
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:17px !important; border-radius:10px;
  }
}

/* ── Anmelden & Registrieren: mehr Luft auf schmalen Geräten ── */
@media (max-width: 760px) {
  body:has(.login-card) { padding:14px !important; }
  .login-card { padding:26px 18px !important; border-radius:16px !important; }
  .login-card .input-field { padding-left:13px !important; padding-right:13px !important; }
}

/* ── Kalender am Handy (v4.46) ────────────────────────────────
   Ursache des Abschneidens: .cal-layout bekam auf Mobil
   grid-template-columns:1fr — eine 1fr-Spur schrumpft aber nie
   unter die Mindestbreite ihres Inhalts. Die Navigationszeile
   mit "min-width:200px" auf der Monatsüberschrift plus drei
   Knöpfen war breiter als das Display, also lief das ganze
   Gitter rechts aus dem Bild und die letzte Spalte fehlte.     */
@media (max-width: 760px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr) !important; }

  /* Navigationszeile darf umbrechen und schrumpfen */
  .cal-nav-row { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
  .cal-nav-row h2 { min-width: 0 !important; flex: 1 1 auto; font-size: 17px; }
  .cal-nav-btn { padding: 8px 13px; min-height: 40px; }

  /* Gitter passt sich jetzt wirklich an */
  .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal-header-cell { padding: 8px 2px; font-size: 10px; letter-spacing: 0; }

  /* Weniger Leerraum, dafür lesbare Zahlen */
  .cal-cell { min-height: 58px; padding: 6px 3px; }
  .cal-day-num { font-size: 15px; margin-bottom: 3px; text-align: center; }
  .cal-cell.today .cal-day-num { font-size: 16px; }
}

/* Sehr schmale Geräte: Termine werden zu Punkten.
   "Ma…" sagt niemandem etwas — der volle Titel steht ohnehin
   in der Tagesliste direkt darunter. */
@media (max-width: 560px) {
  .cal-event-pill {
    display: inline-block; width: 7px; height: 7px; padding: 0;
    margin: 1px 1.5px 0 0; border-radius: 50%;
    font-size: 0; line-height: 0; overflow: hidden;
    pointer-events: none;
  }
  .cal-cell { text-align: center; }
  .cal-cell.selected { box-shadow: inset 0 0 0 2px var(--ultra, #2334B8); }
}