/* ClipVault - Global responsive overrides
 *
 * Ziel: bestehende Desktop-Layouts nicht „umzuschreiben“, sondern Mobile UX
 * auf allen Seiten zu verbessern (Navigation, Layout, Tabellen, Forms, Modals).
 */

/* Safer defaults on small screens */
html { -webkit-text-size-adjust: 100%; }

@media (max-width: 720px) {
  /* ── Layout / Spacing ──────────────────────────────────────────────────── */
  body { overflow-x: hidden; }

  /* Avoid header overlaps: let nav shrink/scroll, keep logo & user menu visible */
  header { flex-wrap: nowrap !important; }
  header .logo { flex-shrink: 0 !important; }
  header .user-menu { flex-shrink: 0 !important; }
  header .main-nav { min-width: 0 !important; flex: 1 1 auto !important; }

  .page,
  .container,
  .content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Most pages use fixed header height 56px */
  header {
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 12px !important;
  }

  /* ── Top navigation: horizontal scroll instead of wrapping/off-screen ──── */
  header .main-nav,
  header nav.main-nav,
  .main-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-left: 8px !important;
  }
  header .main-nav::-webkit-scrollbar { height: 0; }
  .nav-link { flex: 0 0 auto; }

  /* ── Buttons / Touch targets ───────────────────────────────────────────── */
  .btn,
  button,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
  }

  /* Make wide action rows stack nicely */
  .btn-row,
  .actions,
  .action-row,
  .modal-actions,
  .auf-card-actions {
    flex-wrap: wrap !important;
  }

  /* Cutter: Aufträge (Tabs + Actions) */
  .c-tab { min-height: 44px; }
  .c-tab-badge { min-width: 20px; height: 20px; font-size: 11px; }
  .auf-card-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Cutter: Upload im Auftrag (mobil gut tappbar) */
  .ac-dropzone { min-height: 56px; }
  .upload-panel .btn.btn-accent { width: 100%; justify-content: center; }
  .ac-upload-row { gap: 8px !important; }
  .upload-panel .btn { width: 100%; justify-content: center; }
  .ac-dropzone { min-height: 56px; display: flex; align-items: center; justify-content: center; }

  /* ── Forms: full width ─────────────────────────────────────────────────── */
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=number],
  input[type=file],
  select,
  textarea {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── Tables: allow horizontal scroll ───────────────────────────────────── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td { white-space: nowrap; }

  /* ── Cards / panels ────────────────────────────────────────────────────── */
  .detail-panel,
  .admin-detail-panel {
    border-radius: 14px !important;
  }

  /* ── Generic modal sizing ──────────────────────────────────────────────── */
  .modal {
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    padding: 20px 18px 18px !important;
  }
}