/* iPad / touch-specifieke aanpassingen voor de PWA-versie.
   Wordt na styles.css en de inline <style> geladen, dus overschrijft die.
   Op laptop heb je hier geen last van als je de PWA niet gebruikt. */

/* iOS safe-area support voor schermen met notch */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Touch targets minstens 44px hoog (Apple HIG aanbeveling) */
@media (pointer: coarse) {
  .btn, .icon-btn, .schema-action-btn, .tab {
    min-height: 44px;
  }
  .icon-btn { min-width: 44px; }

  /* Maaltijd-cellen in het weekschema iets meer ademruimte */
  .schedule-cell { min-height: 70px; }

  /* Inputs niet meer per ongeluk in-zoomen bij focus op iOS:
     iOS zoomt automatisch in als font-size < 16px */
  input[type="text"], input[type="number"], textarea, select {
    font-size: 16px !important;
  }

  /* Mobile: 1400px container is te breed voor iPad portrait;
     gebruik de volle viewport */
  .container { padding: 1rem; max-width: 100% !important; }
  #panel-database, #panel-planner, header, .tabs, .footer {
    max-width: 100% !important;
  }
}

/* Voor smalle schermen (iPad portrait, en iPhones) — extra compact */
@media (max-width: 900px) {
  .meal-builder { grid-template-columns: 1fr !important; }
  .schedule-toolbar, .lists-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .schedule-toolbar > div, .lists-toolbar > div {
    width: 100%;
  }
  .btn-row { flex-wrap: wrap; }

  /* Database lijst rijen: smaller padding */
  .product-row { padding: 0.5rem 0.7rem; }
  .product-row-img, .product-row-placeholder { width: 40px; height: 40px; }
}