/* ============================================================
   responsive.css — apparaatlaag: telefoon, tablet en touch

   Wordt als laatste stylesheet geladen, na main.css en de
   paginaspecifieke bestanden, zodat deze regels het laatste
   woord hebben zonder dat er !important aan te pas komt.

   Breakpoints (consistent met dashboard.css en dashboard.js):
     1024px — app-shell klapt de sidebar in tot drawer (tablet)
      768px — tablet staand / grote telefoon
      560px — telefoon
      380px — kleine telefoon
   ============================================================ */

/* ------------------------------------------------------------
   0. Eén bron voor de horizontale paginamarge.
   dashboard.css zet die per breakpoint opnieuw; door hem hier in
   een variabele te vangen kan de veilige-zone-marge er straks
   overheen zonder de trapsgewijze verkleining kapot te maken.
   ------------------------------------------------------------ */
:root { --main-pad-x: clamp(var(--space-6), 4vw, var(--space-10)); }
@media (max-width: 1280px) { :root { --main-pad-x: var(--space-6); } }
@media (max-width: 900px)  { :root { --main-pad-x: var(--space-5); } }
@media (max-width: 768px)  { :root { --main-pad-x: var(--space-4); } }
@media (max-width: 480px)  { :root { --main-pad-x: var(--space-3); } }

.main__inner {
  padding-left: var(--main-pad-x);
  padding-right: var(--main-pad-x);
}

/* ------------------------------------------------------------
   1. Viewporthoogte die de browserbalk op mobiel overleeft.
   100vh telt de wegschuivende adresbalk mee, waardoor onderaan
   inhoud wegvalt; 100dvh krimpt netjes mee.
   ------------------------------------------------------------ */
@supports (height: 100dvh) {
  body,
  .app,
  .main {
    min-height: 100dvh;
  }
}

/* ------------------------------------------------------------
   2. Overloopwacht — niets mag de pagina horizontaal oprekken.
   Grid- en flexkinderen krijgen standaard min-width:auto, wat
   lange tabellen of code-strings buiten het scherm duwt.
   ------------------------------------------------------------ */
.app,
.main,
.main__inner,
.panel,
.panel__body,
.content-grid > *,
.stat-grid > * {
  min-width: 0;
}

.main__inner {
  overflow-wrap: break-word;
}

/* Losse URL's, e-mailadressen en tokens breken af in plaats van de
   kolom op te rekken. Bewust break-word en niet anywhere: anywhere
   verkleint óók de min-content-breedte, waardoor een tabel zichzelf
   samenperst en gewone woorden middenin gaat afbreken in plaats van
   netjes horizontaal te scrollen. */
.data-table td,
.panel__body p,
.activity-item__text,
.stat-card__label {
  overflow-wrap: break-word;
}

/* Datums, factuurnummers en hashes zijn één geheel; die mogen niet op
   het koppelteken afbreken, ook niet in een smalle kolom. */
.data-table td.mono,
.data-table .mono {
  white-space: nowrap;
}

img,
svg:not(.nav-link__icon):not(.nav-group__chevron),
canvas,
iframe,
pre {
  max-width: 100%;
}

pre {
  overflow-x: auto;
}

/* ------------------------------------------------------------
   3. Tabellen — horizontaal scrollen met zichtbare hint.
   De schaduwen aan de randen verdwijnen zodra je aan het begin
   of einde van de scroll zit, zodat duidelijk is dat er meer is.
   ------------------------------------------------------------ */
.data-table-wrap,
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  background-image:
    linear-gradient(to right, var(--color-base) 40%, rgba(26, 26, 26, 0)),
    linear-gradient(to left,  var(--color-base) 40%, rgba(26, 26, 26, 0)),
    linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)),
    linear-gradient(to left,  rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* De portfolio-adminpagina's gebruiken een eigen wrapper op een andere
   achtergrondkleur; daar alleen de scrolleigenschappen, geen randhint. */
.table-container {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ------------------------------------------------------------
   4. Touchbediening — vingers zijn geen muisaanwijzers.
   ------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  /* iOS zoomt automatisch in op velden kleiner dan 16px. */
  .input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px;
  }

  /* Aantikbaar oppervlak van minimaal 44px. */
  .btn,
  .nav-link,
  .nav-group__summary,
  .panel__action,
  .logout-btn,
  .mobile-menu-btn,
  .qa-tab {
    min-height: 44px;
  }

  .btn--sm { min-height: 40px; }
  .btn--xs { min-height: 36px; }

  /* De bel is vierkant; alleen de hoogte oprekken maakt hem scheef. */
  .notif__bell {
    width: 44px;
    height: 44px;
  }

  .data-table td a,
  .data-table td button {
    display: inline-block;
    padding-block: 6px;
  }

  /* Hover-effecten blijven op touch "plakken" na een tik: hier terug
     naar de rustwaarden uit dashboard.css. */
  .stat-card:hover {
    border-color: var(--color-border);
  }

  .quick-action-item:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
  }

  .quick-action-item:hover .quick-action-item__icon {
    border-color: var(--color-border);
  }

  .data-table tr:hover td {
    background: transparent;
  }

  /* Vlottere momentum-scroll in alle scrollbare panelen. */
  .notif__list,
  .nav-palette__results,
  .sidebar {
    -webkit-overflow-scrolling: touch;
  }
}

/* ------------------------------------------------------------
   5. Veilige zones — inkeping en home-indicator van iPhones.
   ------------------------------------------------------------ */
@supports (padding: max(0px)) {
  .topbar {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }

  .sidebar {
    padding-left: env(safe-area-inset-left);
  }

  .sidebar__footer {
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }

  .main__inner {
    padding-left: max(var(--main-pad-x), env(safe-area-inset-left));
    padding-right: max(var(--main-pad-x), env(safe-area-inset-right));
  }

  /* De knop staat op 2rem, en op ≤500px op 1rem; alleen optillen als de
     home-indicator daar echt overheen zou vallen. */
  .quick-add-fab {
    bottom: max(2rem, env(safe-area-inset-bottom));
    right: max(2rem, env(safe-area-inset-right));
  }
}

@media (max-width: 500px) {
  @supports (padding: max(0px)) {
    .quick-add-fab {
      bottom: max(1rem, env(safe-area-inset-bottom));
      right: max(1rem, env(safe-area-inset-right));
    }
  }
}

/* ------------------------------------------------------------
   6. Tablet staand en groot telefoonformaat (≤768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Panelkoppen met acties mogen afbreken in plaats van persen. */
  .panel__header,
  .panel__footer {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .page-header__actions {
    flex-wrap: wrap;
  }

  .form-actions {
    flex-wrap: wrap;
  }

  /* Toolbars met filters worden een verticale stapel. */
  .kanban-toolbar__filters select.input {
    max-width: none;
    flex: 1 1 160px;
  }
}

/* ------------------------------------------------------------
   7. Telefoon (≤560px)
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  /* Knoppen in kop- en voetbalken vullen de breedte zodat ze
     niet als losse snippers naast elkaar hangen. */
  .page-header__actions > .btn,
  .form-actions > .btn {
    flex: 1 1 auto;
  }

  .form-actions {
    gap: var(--space-2);
  }

  /* Panelen tegen de schermrand: minder verspilde ruimte. */
  .panel__body {
    padding: var(--space-4);
  }

  .panel__header {
    padding: var(--space-3) var(--space-4);
  }

  /* Geen nowrap hier: monteurflow.css zet zijn tabel om in kaarten en
     dan moet de tekst juist wél kunnen afbreken. */
  .data-table th,
  .data-table td {
    padding: var(--space-2) var(--space-3);
  }

  .data-table td .mono,
  .data-table th {
    font-size: 10px;
  }

  /* Modals worden bottom sheets: beter bereikbaar met één hand. */
  .timer-modal,
  .qa-modal {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .timer-modal__form,
  .qa-panel {
    padding: var(--space-4);
  }

  .timer-modal__actions,
  .qa-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .timer-modal__actions .btn,
  .qa-form-actions .btn {
    width: 100%;
  }

  /* Het palet stond op 12vh vanaf de bovenkant; met een toetsenbord in
     beeld schuift dat de resultaten weg. Hoger plaatsen dus. */
  .nav-palette {
    padding-top: var(--space-6);
  }

  .nav-palette__item {
    padding: var(--space-3);
  }

  .section-label {
    margin-bottom: var(--space-4);
  }
}

/* ------------------------------------------------------------
   8. Kleine telefoon (≤380px)
   ------------------------------------------------------------ */
@media (max-width: 380px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .topbar__brand-logo {
    height: 22px;
  }
}

/* ------------------------------------------------------------
   9. Landschapsmodus op telefoons — weinig hoogte, veel breedte.
   ------------------------------------------------------------ */
@media (max-height: 480px) and (orientation: landscape) {
  .timer-modal,
  .qa-modal {
    max-height: 96vh;
    max-height: 96dvh;
  }

  /* Liggend is er nauwelijks hoogte; het palet start hoger en de
     resultatenlijst scrollt binnen wat er overblijft. */
  .nav-palette {
    padding-top: var(--space-4);
  }

  .nav-palette__results {
    max-height: 40vh;
  }
}