/* ═══════════════════════════════════════════════════════════════════
   PROVA Systems · MOBILE-POLISH v1.0 (MEGA⁴ Q2+Q3)
   Zentrales Mobile-First-Stylesheet · Touch-Target + Tablet + iOS-Fix
   Wird in alle Pages eingebunden NACH page-template.css
   ═══════════════════════════════════════════════════════════════════ */

/* iOS Safe-Area Support (iPhone X+ Notch / Dynamic Island) */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .topbar, header, .header {
    padding-top: env(safe-area-inset-top);
  }
  .bottom-nav, footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Touch-Target Minimum 44x44 (Apple HIG / WCAG 2.5.5)
   Greift bei <768px (Mobile) auf alle interaktiven Elemente */
@media (max-width: 768px) {
  button:not(.no-touch-min),
  a.btn:not(.no-touch-min),
  a.button:not(.no-touch-min),
  .clickable:not(.no-touch-min),
  input[type="button"]:not(.no-touch-min),
  input[type="submit"]:not(.no-touch-min),
  input[type="reset"]:not(.no-touch-min),
  [role="button"]:not(.no-touch-min) {
    min-height: 44px;
    min-width: 44px;
  }
  /* Form-Inputs auch grösser für Touch */
  input[type="text"]:not(.compact),
  input[type="email"]:not(.compact),
  input[type="tel"]:not(.compact),
  input[type="number"]:not(.compact),
  input[type="password"]:not(.compact),
  input[type="search"]:not(.compact),
  input[type="url"]:not(.compact),
  input[type="date"]:not(.compact),
  textarea:not(.compact),
  select:not(.compact) {
    min-height: 44px;
    font-size: 16px; /* verhindert iOS Zoom-on-Focus */
  }
}

/* Mobile Tabellen → Cards bei <600px
   Anwendung: <table class="mobile-cards"> */
@media (max-width: 600px) {
  table.mobile-cards,
  table.mobile-cards thead,
  table.mobile-cards tbody,
  table.mobile-cards tr,
  table.mobile-cards th,
  table.mobile-cards td {
    display: block;
    width: 100%;
  }
  table.mobile-cards thead {
    /* Header verstecken — Labels werden via data-label Attribut auf td gesetzt */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  table.mobile-cards tr {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    border-radius: 8px;
    background: var(--surface, var(--bg2, #1c2537));
  }
  table.mobile-cards td {
    border: none;
    padding: 6px 0;
    text-align: left;
    position: relative;
    padding-left: 40%;
  }
  table.mobile-cards td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 6px;
    width: 35%;
    font-weight: 600;
    color: var(--text2, #aab4cb);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* Mobile-Form-Polish */
@media (max-width: 768px) {
  /* Labels über Inputs (statt daneben) */
  .form-row,
  .form-grid,
  .form-group {
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* Buttons full-width auf Mobile */
  .form-actions button:not(.compact),
  .button-row button:not(.compact) {
    width: 100%;
  }
  /* Datepicker / Native-Picker bessere Höhe */
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* Image Lazy-Loading Polyfill-Hint
   Use loading="lazy" attribute on <img> for native browser support.
   Fallback via Intersection Observer in lib/mobile-polish.js */
img[loading="lazy"]:not([data-loaded]) {
  opacity: 0;
  transition: opacity 0.3s ease;
}
img[loading="lazy"][data-loaded],
img[loading="lazy"].loaded {
  opacity: 1;
}

/* Pull-to-Refresh Hint (rein visuell — Logic in JS optional) */
.pull-to-refresh {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Sticky-Position iOS-Safari-Fix
   Bei iOS sticky kann buggy sein in scrollbaren Containern.
   Klasse .sticky-safe nutzt position:-webkit-sticky als Fallback. */
.sticky-safe {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* Tablet-Layout Optimierung 769-1099px
   Sidebar bleibt voll sichtbar (Marcel-Spec P5b.X1.4)
   Aber: Cards/Grids nutzen 2 Spalten statt 3-4 */
@media (min-width: 769px) and (max-width: 1099px) {
  .grid-3, .grid-4, .grid-auto {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .container,
  .main-wrap > main,
  .main-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Mobile-Drucken (PDF-Download im Browser) */
@media print {
  .no-print, .bottom-nav, .sidebar, header.topbar, .topbar { display: none !important; }
  body { background: white !important; color: black !important; }
  .main-wrap, main { margin-left: 0 !important; }
}

/* Reduced Motion Support (DSGVO-Bürger-Wunsch + Accessibility) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus-Visible für Tastatur-Navigation (Accessibility) */
:focus-visible {
  outline: 2px solid var(--accent, #4f8ef7);
  outline-offset: 2px;
}

/* Mobile-Specific: Offline-Banner */
.prova-offline-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--warn, #f59e0b);
  color: white;
  padding: 8px 16px;
  text-align: center;
  font-size: 13px;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.prova-offline-banner.visible {
  transform: translateY(0);
}

/* iOS Viewport-Fit-Cover für Vollbild Apps */
@media (display-mode: standalone) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* MEGA³² C1: Touch-Target-Hardening (≥44×44 px nach WCAG 2.1 AA) */
.btn, .topbar-btn, .tool-button, .section-toggle, .ctx-btn,
.es-btn, .b-btn, .pricing-card a, .nav-item, .feature-card {
  min-width: 44px;
  min-height: 44px;
}

/* MEGA³² C1: Sidebar-Resize-Listener wird via JS aktiviert (siehe nav.js) */