/* Studio 27 Teamportaal — gedeelde mobile/responsive basislaag.
   Eén bron, geladen in elk portaal. Universele, veilige regels die op elk
   scherm helpen zonder de bestaande desktop-layout te raken. Per-portaal
   fijnafstemming (kolommen die inklappen, boards, datumkiezers) gebeurt in
   de portaal-JS via de bestaande isNarrow/isMobile-logica. */

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

html, body {
  max-width: 100%;
  overflow-x: hidden;            /* geen horizontale pagina-scroll door overflow */
  -webkit-text-size-adjust: 100%;
}

/* Vlottere touch-scroll op overflow-containers (boards, tabellen, drawers). */
[style*="overflow-x:auto"], [style*="overflow-x: auto"],
[style*="overflow:auto"], [style*="overflow: auto"] {
  -webkit-overflow-scrolling: touch;
}

/* Google Places autocomplete-dropdown nooit breder dan het scherm. */
.pac-container { max-width: calc(100vw - 16px) !important; }

@media (max-width: 640px) {
  /* iOS zoomt in bij focus op velden < 16px — forceer 16px op telefoons. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea { font-size: 16px !important; }

  /* Veilige minimum-tikzone voor losse icoon-knoppen op telefoon
     (alleen waar er nog geen expliciete min-grootte staat). */
  button { touch-action: manipulation; }

  /* Topbalk op telefoon: de inline zoekbalk wijkt (standaardpatroon — Gmail/
     Linear doen dit ook) zodat de actie-iconen passen zonder overloop.
     Zoeken blijft beschikbaar op tablet/desktop; op telefoon via navigatie. */
  global-search { display: none !important; }

  /* Productie: ruime desktop-content-padding (30px) terugbrengen op telefoon. */
  .fu { padding-left: 14px !important; padding-right: 14px !important; padding-top: 18px !important; }

  /* Universele kolom-inklap op telefoon: gelijke 2/3-koloms layouts, vaste
     2-koloms en de 200px-zijbalk van datumkiezers worden één kolom. Werkt over
     alle portalen omdat de layouts inline-styles gebruiken. Tabellen met
     gewogen fr-kolommen (bv. "2.4fr 1fr 1fr") blijven ongemoeid. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:200px 1fr"],
  [style*="grid-template-columns: 200px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Compactere topbalk op telefoon + de actie-cluster mag intern horizontaal
     scrollen als er veel iconen zijn (agenda, chat, AI, bug, notificaties,
     account). Zo wordt nooit een knop afgekapt en blijft elke functie
     bereikbaar; de pagina zelf loopt niet over. */
  header { padding-left: 12px !important; padding-right: 12px !important; gap: 8px !important; }
  header > div:last-of-type {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
  }
  header > div:last-of-type::-webkit-scrollbar { display: none; }
}

/* Zwevende onderaan-elementen (toasts, FAB's) boven de mobiele bottom-nav
   houden — de nav toont t/m 768px. Volgorde-onafhankelijke matching. */
@media (max-width: 768px) {
  [style*="position:fixed"][style*="bottom:28px"],
  [style*="position:fixed"][style*="bottom:26px"],
  [style*="position:fixed"][style*="bottom:24px"],
  [style*="position:fixed"][style*="bottom:14px"] {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
}

/* Respecteer notch / safe-area onderaan voor vaste balken waar van toepassing. */
@supports (padding: env(safe-area-inset-bottom)) {
  .s27-safe-bottom { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}