/* modules/mobile.css – iOS / PWA Optimierungen */
/* ════════════════════════════════════════════════════════
   iOS / PWA Optimierungen
   ════════════════════════════════════════════════════════ */

/* Font-Rendering & Tap-Verhalten */
html {
  -webkit-text-size-adjust: 100%;       /* Kein Auto-Zoom bei Rotation */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { -webkit-tap-highlight-color: transparent; } /* Kein graues Tap-Flackern */

/* Smooth Momentum-Scrolling */
body, .table-wrap { -webkit-overflow-scrolling: touch; }

/* iOS Input-Zoom verhindern: Inputs brauchen min. 16px */
@media (max-width: 768px) {
  input[type=text], input[type=password], input[type=number], select, textarea {
    font-size: 16px;
    padding: 11px 12px;
  }
}

/* Touch-Targets: min. 44px Höhe auf Touch-Geräten */
@media (pointer: coarse) {
  .btn, .nav-link, .shop-tab, .tab { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 38px; }
  .overview-row, .zutat-chip, .extra-item-chip, .zutat-check-row { min-height: 44px; }
  .toggle-wrap { padding: 6px 0; }
}

/* Hover-Effekte nur auf Geräten mit Maus */
@media (hover: none) {
  .nav-link:hover { background: transparent; color: #666; }
  .nav-link.active { background: var(--green-l); color: var(--green-d); }
  .shop-tab:hover { border-color: var(--border); background: #fff; }
  .shop-tab.active { background: var(--green-l); border-color: var(--green); }
  .overview-row:hover { border-color: var(--border); }
  .zutat-check-row:hover { border-color: var(--border); }
}

/* Active-Feedback für Touch */
.btn:active, .overview-row:active, .zutat-chip:active,
.extra-item-chip:active, .shop-tab:active, .menu-item2:active {
  transform: scale(0.985);
  transition: transform .06s;
}

/* PWA Standalone: oberer Rand hinter Dynamic Island einfärben */
@media (display-mode: standalone) {
  body {
    background: var(--bg);
  }
  /* Weißer Bereich hinter Dynamic Island (passend zur Topbar) */
  body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--safe-top);
    background: #fff;
    z-index: 60;
  }
  .topbar { box-shadow: 0 1px 0 var(--border); border-bottom: none; }
}

/* Mobile Layout-Verbesserungen */
@media (max-width: 640px) {
  .page { padding: 1rem .75rem; }
  .card { padding: 1rem; border-radius: var(--r); }
  .topbar { padding-left: calc(1rem + var(--safe-left)); padding-right: calc(1rem + var(--safe-right)); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
}

/* Sehr kleine Screens: Nav nur mit Icons */
@media (max-width: 420px) {
  .nav-link span { display: none; }
  .nav-link { font-size: 17px; padding: 5px 13px; }

  /* Tabellen horizontal scrollbar statt gequetscht */
  .table-wrap { overflow-x: auto; border-radius: var(--r); }
  .table-wrap table { min-width: 560px; }

  /* Modals: full-width bottom sheet Gefühl */
  #edit-overlay > div, #user-edit-overlay > div {
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    margin: auto 0 0 0 !important;
    max-height: 92vh;
    overflow-y: auto;
    padding-bottom: calc(1.5rem + var(--safe-bottom)) !important;
  }
  #edit-overlay, #user-edit-overlay { padding: 0 !important; display: flex; align-items: flex-end; }

  /* Toast über Home-Indikator */
  .toast { bottom: calc(1.25rem + var(--safe-bottom)); }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}