/* ============================================================================
   Raevius — gedeelde responsive/mobiele laag
   ----------------------------------------------------------------------------
   Eén bestand, ingelinkt ná de inline <style> van elke pagina. Alles binnen
   @media (max-width: 768px) — desktop blijft dus exact zoals het was.
   Doel: essentiële info, grote tikbare knoppen (≥44px), volle breedte, geen
   horizontaal scrollen, en formuliervelden die niet inzoomen op iOS (≥16px).
   ============================================================================ */

/* Globale baseline (alle schermen) — media mag nooit de viewport oprekken. */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
* { -webkit-tap-highlight-color: rgba(28, 56, 41, 0.15); }

@media (max-width: 768px) {

  /* Niets mag breder zijn dan het scherm */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* ── Navigatie: van één strakke balk naar nette wrap ────────────────── */
  nav {
    height: auto !important;
    padding: 10px 14px !important;
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .logo { font-size: 18px !important; letter-spacing: 2px !important; }
  .logo-tagline { display: none !important; }

  .nav-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px !important;
  }
  .nav-links {
    order: 3;
    width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    margin-left: 0 !important;
    white-space: nowrap;
    padding: 9px 13px;
    background: rgba(250, 247, 242, 0.07);
    border-radius: 8px;
    font-size: 14px !important;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .venue-switcher { flex: 1 1 auto; min-height: 44px; font-size: 14px !important; }
  .venue-name { font-size: 14px !important; }
  .user-chip { margin-left: auto; padding: 6px 12px !important; }
  .user-email {
    max-width: 46vw; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .logout-link { font-size: 20px !important; padding: 6px 10px !important; }

  /* ── Container: volledige breedte, AI-paneel-marge weg ──────────────── */
  .container {
    padding: 16px !important;
    padding-right: 16px !important;     /* override dashboard's 420px reservering */
    padding-bottom: 96px !important;    /* ruimte voor het ingeklapte AI-paneel */
    max-width: 100% !important;
  }

  /* ── Page header stapelt netjes ─────────────────────────────────────── */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
    margin-bottom: 24px !important;
  }
  .page-title { font-size: 22px !important; }

  /* ── E-mailkaart: van rij naar kolom met volle-breedte knoppen ──────── */
  .email-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
  }
  /* Preview op mobiel: max 3 regels met ellipsis (anders wordt de kaart hoog) */
  .email-preview {
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .email-actions {
    margin-left: 0 !important;
    margin-top: 14px !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .email-actions form { width: 100%; display: flex; }
  .email-actions button,
  .email-actions .btn-accept,
  .email-actions .btn-decline,
  .email-actions .btn-suggest,
  .email-actions .btn-negotiate {
    width: 100% !important;
    min-height: 46px;
    font-size: 15px !important;
    padding: 12px 18px !important;
  }

  /* ── AI-paneel: volle breedte onderaan ──────────────────────────────── */
  #ai-panel {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
  }
  #ai-messages { height: 190px !important; }

  /* ── Modals passen binnen het scherm ────────────────────────────────── */
  .modal-box {
    width: 92vw !important;
    max-width: 92vw !important;
    max-height: 88vh;
    overflow-y: auto;
  }
  .modal-actions { flex-direction: column !important; }
  .modal-actions button { width: 100%; min-height: 46px; }

  /* ── Cards (settings / onboarding / 2FA) ────────────────────────────── */
  .card { padding: 18px !important; }

  /* ── Primaire knoppen overal goed tikbaar ───────────────────────────── */
  .btn-primary { min-height: 46px; padding: 13px 22px !important; }

  /* ── Settings 2-koloms grid stort naar 1 kolom op mobiel ─────────────── */
  .form-row { grid-template-columns: 1fr !important; }

  /* ── Formuliervelden: vol breed, ≥16px (geen iOS-zoom) ──────────────── */
  /* !important nodig om class-specifieke per-pagina-regels te beat'en
     (die anders zoom op iOS triggeren bij <16px). */
  input, select, textarea { font-size: 16px !important; }
  input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=tel], select, textarea {
    width: 100%;
    min-height: 46px;
  }

  /* ── Brede tabellen (logs/audit) horizontaal scrollbaar ─────────────── */
  table, .logs-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Extra fijnafstelling op heel kleine schermen */
@media (max-width: 480px) {
  .page-title { font-size: 20px !important; }
  .nav-links a { font-size: 13px !important; }
  .email-sender { font-size: 14px !important; }
}