/* ============================================================
   portal.css — apparaatlaag voor het klantenportaal

   De portaalpagina's dragen hun eigen opmaak in een <style> in de
   <head>; dit bestand wordt daarná geladen en corrigeert alleen
   wat op telefoons en tablets misgaat. Bewust géén herhaling van
   de basisopmaak: die blijft per pagina staan.
   ============================================================ */

/* ------------------------------------------------------------
   Kop — de navigatie past niet naast het logo op een telefoon.
   In plaats van te persen mag ze horizontaal schuiven.
   ------------------------------------------------------------ */
.portal-header {
  padding-left: max(2rem, env(safe-area-inset-left));
  padding-right: max(2rem, env(safe-area-inset-right));
}

@media (max-width: 640px) {
  .portal-header {
    height: auto;
    min-height: 52px;
    padding: 0.5rem max(1rem, env(safe-area-inset-left)) 0.5rem max(1rem, env(safe-area-inset-right));
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .portal-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
  }

  .portal-nav a {
    flex-shrink: 0;
    padding: 8px 10px;
  }

  .portal-badge {
    margin-left: auto;
  }
}

/* ------------------------------------------------------------
   Inhoud — smallere marges en volle breedte op knoppen.
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .portal-wrap {
    margin-top: 1.25rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: 3rem;
  }

  .card {
    padding: 0.85rem 1rem;
  }

  /* Bedrag en datum staan rechts uitgelijnd naast de titel; op een
     smal scherm is er alleen ruimte als ze eronder komen. */
  .card__right {
    text-align: left;
  }

  .btn,
  .btn-submit,
  .btn-download {
    width: 100%;
    justify-content: center;
  }

  .portal-footer {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
}

/* ------------------------------------------------------------
   Tabellen — schuiven horizontaal in plaats van de pagina te
   verbreden. De wrapper staat in de markup van files, users en
   invoice.
   ------------------------------------------------------------ */
.portal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.portal-table-wrap .u-table,
.portal-table-wrap .items-table {
  min-width: 440px;
}

/* ------------------------------------------------------------
   Websitevoorbeeld — de browserbalk en het iframe breken op
   website.php bewust uit de kolom met 3rem marge aan weerszijden.
   Op een telefoon van 375px blijft daar 279px van over; die marge
   krimpt hier mee, en het voorbeeld krijgt een werkbare hoogte.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .url-bar,
  .iframe-wrap {
    margin-left: calc(-50vw + 50% + 1rem);
    margin-right: calc(-50vw + 50% + 1rem);
    width: calc(100vw - 2rem);
  }

  .iframe-wrap {
    min-height: 60vh;
  }

  .url-bar__text {
    order: 3;
    flex-basis: 100%;
  }

  .viewport-preset,
  .url-bar__open {
    min-height: 34px;
  }
}

/* ------------------------------------------------------------
   Touchbediening
   ------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  /* iOS zoomt in op velden onder de 16px. */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .btn,
  .btn-submit,
  .btn-download,
  .filter-tab,
  .portal-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Zweefeffecten blijven na een tik hangen op touch. */
  .card--link:hover,
  .quick-card:hover,
  .stat-box:hover,
  .website-hero:hover {
    transform: none;
  }
}
