/* 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; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Joepie-tip — herbruikbare uitleg-component voor medewerker-pagina's.
   Gebruik:
     <div class="joepie-tip" data-dismiss="key-naam">
       <img class="joepie-avatar" src="/joepie.png" alt="Joepie"/>
       <div class="joepie-bubble"><strong>Joepie:</strong> tekst…</div>
     </div>
   data-dismiss is optioneel — als gezet, krijgt de tip een ×-knop en
   onthoudt sessionStorage dat 'ie verborgen is.
   ───────────────────────────────────────────────────────────────────────── */
.joepie-tip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #FFFAF7;
  border: 1.5px solid #FBC8B9;
  border-radius: 16px;
  padding: 14px 16px;
  margin: 14px 0;
  font-family: 'Inter', -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5C2D1A;
  position: relative;
}
.joepie-tip.compact { padding: 10px 12px; font-size: 12.5px; gap: 10px; }
.joepie-tip .joepie-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFF8F4;
  border: 2px solid #FDECEA;
  padding: 0;
  object-fit: cover;
  object-position: center 8%;
}
.joepie-tip.compact .joepie-avatar { width: 44px; height: 44px; }
.joepie-tip .joepie-bubble { flex: 1; min-width: 0; }
.joepie-tip .joepie-bubble strong:first-child {
  display: inline-block; font-weight: 800; color: #E8735A; margin-right: 2px;
}
.joepie-tip .joepie-bubble p { margin: 0 0 6px; }
.joepie-tip .joepie-bubble p:last-child { margin-bottom: 0; }
.joepie-tip .joepie-bubble a { color: #C95A43; font-weight: 700; text-decoration: none; }
.joepie-tip .joepie-bubble a:hover { text-decoration: underline; }
.joepie-tip .joepie-close {
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: none; color: #C95A43;
  font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1;
  padding: 4px 8px; border-radius: 6px; font-family: inherit;
}
.joepie-tip .joepie-close:hover { background: rgba(232,115,90,0.1); }
.joepie-tip[hidden] { display: none; }
@media (max-width: 480px) {
  .joepie-tip { padding: 12px; gap: 10px; }
  .joepie-tip .joepie-avatar { width: 46px; height: 46px; }
}