/* Globale mobile-verbeteringen voor coord-pagina's.
   Wordt op alle coord-pagina's geladen via <link rel="stylesheet" href="/mobile-tweaks.css"/>. */

@media (max-width: 768px) {
  /* Tap-target minimum 44px voor alle knoppen */
  button, .btn, a.btn {
    min-height: 40px;
  }

  /* Headers laten wrappen ipv overlappen */
  header > div {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  header .btn, header a.btn {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }

  /* Modals niet groter dan viewport, scroll binnenin */
  .modal-box, [role="dialog"] > div {
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Brede tabellen: scrollen in plaats van overflowen */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.no-mobile-scroll { display: table; overflow: visible; white-space: normal; }

  /* Sticky first column op tabellen waar dat zin heeft */
  table.matrix th.path-col,
  table.matrix td.path-col {
    position: sticky;
    left: 0;
    background: white;
    z-index: 2;
  }

  /* Form controls: voorkom zoom op iOS bij focus */
  input[type=text], input[type=email], input[type=tel],
  input[type=number], input[type=password], input[type=date],
  input[type=time], textarea, select {
    font-size: 16px !important;
  }

  /* Yippie-cards in grid: 1 kolom mobiel */
  #yList.grid, .yippies-grid {
    grid-template-columns: 1fr !important;
  }

  /* Bulk-actie bar: compacter */
  #bulkBar {
    flex-wrap: wrap;
    max-width: calc(100vw - 24px);
    font-size: 12px !important;
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  #bulkBar button { padding: 7px 10px !important; font-size: 11px !important; }
}

/* Extra smal scherm (<400px): nog compactere headers */
@media (max-width: 400px) {
  header .max-w-5xl, header .max-w-4xl, header .max-w-6xl, header .max-w-screen-xl, header .max-w-screen-lg {
    padding: 0 10px;
  }
  .btn, button.btn { padding: 6px 10px !important; font-size: 11px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Page-specific mobile-fixes (audit follow-up)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* /weekrooster/: planning-grid wordt enorm op mobiel — laat horizontaal scrollen
     en maak cellen klein-functioneel met touch-friendly tap-zones */
  body .week-table, body #gridContainer table, body #weekTable {
    font-size: 11px;
  }
  body .week-table td, body #gridContainer td {
    min-width: 100px; padding: 6px 4px !important;
  }
  /* Sidebar in weekrooster: full-width onder grid */
  body #sidebarPanel { min-width: auto !important; width: 100% !important; }

  /* /dagverslag/: brede formulieren stack tegen elkaar — sticky save bar
     onderaan voor primary action */
  body .dv-form-grid { grid-template-columns: 1fr !important; }
  body .dv-sticky-save {
    position: sticky; bottom: 0; background: white;
    padding: 10px 14px; border-top: 1px solid #E5E7EB;
    box-shadow: 0 -4px 12px rgba(0,0,0,.05); z-index: 30;
  }

  /* /roosterpdf/: lokalen-grid stack-layout */
  body .lokalen-grid, body .activiteiten-grid {
    grid-template-columns: 1fr !important;
  }

  /* /yippies/profiel/: sidebar omslaan naar volledige stack */
  body .profiel-grid {
    grid-template-columns: 1fr !important;
  }

  /* /yippies/rollen/ matrix: kleinere padding, vaste compacte cell-grootte */
  table.matrix th, table.matrix td {
    padding: 10px 6px !important; font-size: 12px;
  }
  table.matrix th.path-col, table.matrix td.path-col {
    min-width: 180px !important; padding-left: 10px !important;
    font-size: 12.5px !important;
  }

  /* /checkins/: tabel wordt cards op mobiel — fallback via display:block per row */
  body .checkins-table tr { display: block; border-bottom: 1px solid #E5E7EB; padding: 10px; }
  body .checkins-table td { display: block; padding: 4px 0 !important; }
  body .checkins-table thead { display: none; }

  /* Toast/banner: niet onder home-indicator op iOS */
  #toast, #yp-version-banner, #bulkBar {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Inputs altijd full-width op mobiel */
  body input.fi, body select.fi, body textarea.fi {
    max-width: none !important;
  }

  /* Vermijd horizontal page-scroll vanuit ongewenste wide elements */
  body { overflow-x: hidden; }
}