/* ================================================================
   # MOBILE RESPONSIVE — Touch-Optimierung für Gastronomen
   ================================================================ */

/* ── Basis-Mobile-Optimierungen ── */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
    --topbar-h: 56px;
    --space-3: 16px;
    --space-4: 20px;
  }

  /* Touch-Targets: Mindestens 44px */
  button, .btn, .nav-item, .form-control, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }

  /* Typography: Größer auf Mobile */
  body {
    font-size: 16px; /* Verhindert iOS-Zoom bei Input-Fokus */
    line-height: 1.6;
  }

  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }

  /* ── SIDEBAR: Mobile Drawer ── */
  #sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    height: 64px;
    flex-direction: row;
    padding: 8px 16px;
    z-index: 1000;
    border-top: 1px solid var(--sidebar-border);
    border-right: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar .sidebar-brand,
  #sidebar .sidebar-section-title,
  #sidebar .sidebar-footer {
    display: none;
  }

  #sidebar .sidebar-nav {
    flex-direction: row;
    gap: 8px;
    width: 100%;
    justify-content: space-around;
  }

  #sidebar .nav-item {
    flex-direction: column;
    padding: 6px 12px;
    gap: 4px;
    min-width: 64px;
    text-align: center;
  }

  #sidebar .nav-item svg {
    width: 24px;
    height: 24px;
  }

  #sidebar .nav-item span {
    font-size: 11px;
    white-space: nowrap;
  }

  /* ── MAIN CONTENT: Padding anpassen ── */
  #main {
    margin-left: 0;
    margin-bottom: 64px; /* Platz für Bottom-Nav */
    padding: 16px;
    min-height: calc(100vh - 64px - 56px);
  }

  /* ── TOPBAR: Kompakter ── */
  #topbar {
    height: 56px;
    padding: 0 16px;
  }

  #topbar-title {
    font-size: 16px;
  }

  /* ── CARDS: Volle Breite ── */
  .card {
    padding: 16px;
    margin-bottom: 12px;
  }

  .card-title {
    font-size: 15px;
  }

  /* ── FORMULARE: Touch-freundlich ── */
  .form-control {
    padding: 12px 16px;
    font-size: 16px; /* iOS-Zoom verhindern */
    border-radius: 10px;
  }

  .form-label {
    font-size: 14px;
    margin-bottom: 6px;
  }

  /* ── BUTTONS: Größere Touch-Flächen ── */
  .btn {
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 10px;
  }

  .btn-sm {
    padding: 8px 12px;
    font-size: 14px;
  }

  /* ── TABLES: Horizontal Scroll ── */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }

  table {
    font-size: 14px;
  }

  th, td {
    padding: 12px 8px;
    white-space: nowrap;
  }

  /* ── MODALS: Vollbild auf Mobile ── */
  .modal-overlay {
    padding: 16px;
  }

  .modal {
    max-height: 90vh;
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .modal.active {
    transform: translateY(0);
  }

  /* ── ACCORDION: Touch-freundlich ── */
  .step-header {
    padding: 16px;
    min-height: 56px;
  }

  .step-title {
    font-size: 15px;
  }

  .step-body {
    padding: 16px;
  }

  /* ── DOCUMENT GRID: 2 Spalten ── */
  .documents-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .document-thumbnail {
    height: 120px;
  }

  /* ── UPLOAD AREA: Größer ── */
  .upload-area {
    padding: 32px 16px;
  }

  .upload-area svg {
    width: 48px;
    height: 48px;
  }

  /* ── TOAST: Oben statt unten ── */
  #toast {
    top: 16px;
    bottom: auto;
    left: 16px;
    right: 16px;
    transform: translateY(-100px);
  }

  #toast.show {
    transform: translateY(0);
  }

  /* ── AUTH OVERLAY: Vollbild ── */
  .auth-layout {
    flex-direction: column;
  }

  .auth-side {
    padding: 24px;
    min-height: 30vh;
  }

  .auth-title {
    font-size: 24px;
  }

  .auth-form-wrap {
    padding: 24px;
  }

  /* ── WELCOME SCREEN ── */
  .kb-welcome-inner {
    padding: 0 24px;
  }

  .kb-welcome-name {
    font-size: 28px;
  }

  /* ── PLATFORM IMPORT: Stacked ── */
  .platform-import-section {
    padding: 12px;
  }

  .platform-upload-area {
    padding: 24px 16px;
  }

  /* ── Z-BON CONTINUITY: Kompakt ── */
  .z-bon-warning {
    padding: 12px;
    font-size: 13px;
  }

  /* ── LEDGER: Kompakte Zeilen ── */
  .ledger-row {
    padding: 12px;
  }

  .ledger-amount {
    font-size: 15px;
  }

  /* ── DASHBOARD CARDS ── */
  .dashboard-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dashboard-card {
    padding: 16px;
  }

  .dashboard-card .amount {
    font-size: 24px;
  }
}

/* ── Extra-Kleine Geräte (iPhone SE, etc.) ── */
@media (max-width: 375px) {
  body {
    font-size: 15px;
  }

  #sidebar .nav-item span {
    font-size: 10px;
  }

  .documents-grid {
    grid-template-columns: 1fr;
  }

  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
}

/* ── Landscape-Optimierung ── */
@media (max-height: 500px) and (orientation: landscape) {
  #sidebar {
    height: 48px;
  }

  #main {
    margin-bottom: 48px;
  }

  .modal {
    max-height: 80vh;
  }
}

/* ── iOS-Spezifische Fixes ── */
@supports (-webkit-touch-callout: none) {
  /* iOS: Kein Zoom bei Input-Fokus */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* iOS: Smooth Scrolling */
  .scroll-page {
    -webkit-overflow-scrolling: touch;
  }

  /* iOS: Safe Area für Notch */
  #topbar {
    padding-top: env(safe-area-inset-top, 0);
  }

  #sidebar {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* ── Android-Spezifische Fixes ── */
@supports (not (-webkit-touch-callout: none)) {
  /* Android: Ripple-Effekt für Buttons */
  .btn, .nav-item, .step-header {
    position: relative;
    overflow: hidden;
  }

  .btn::after,
  .nav-item::after,
  .step-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
  }

  .btn:active::after,
  .nav-item:active::after,
  .step-header:active::after {
    opacity: 1;
  }
}

/* ── Touch-Feedback ── */
@media (hover: none) {
  .btn:active,
  .nav-item:active,
  .step-header:active,
  .document-card:active {
    transform: scale(0.98);
    transition: transform 0.1s;
  }
}

/* ── Prevent Pull-to-Refresh auf iOS ── */
body {
  overscroll-behavior-y: none;
}

/* ── Scrollbar-Styling (Mobile) ── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 2px;
}