/*
 * Portal Pendidikan v170 — keyboard-safe forms across every portal.
 * Menjaga seluruh form, modal, dan layar autentikasi tetap dapat digulir
 * di dalam visual viewport saat keyboard perangkat mobile terbuka.
 */
:root {
  --portal-form-visible-height: 100dvh;
  --portal-form-viewport-top: 0px;
  --portal-form-keyboard-inset: 0px;
}

@media (max-width: 900px), (pointer: coarse) {
  input:not([type="hidden"]),
  textarea,
  select,
  [contenteditable="true"] {
    scroll-margin-top: calc(var(--portal-form-viewport-top) + 22px);
    scroll-margin-bottom: calc(
      var(--portal-form-keyboard-inset) + env(safe-area-inset-bottom) + 34px
    );
  }

  .portal-mobile-auth-surface {
    box-sizing: border-box;
    min-height: var(--portal-form-visible-height) !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .portal-mobile-page-scroll {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  html.portal-mobile-form-active .portal-mobile-page-scroll,
  html.portal-mobile-keyboard-open .portal-mobile-page-scroll {
    scroll-padding-top: max(20px, env(safe-area-inset-top));
    scroll-padding-bottom: max(76px, calc(env(safe-area-inset-bottom) + 48px));
  }

  html.portal-mobile-keyboard-open .portal-mobile-auth-surface {
    height: var(--portal-form-visible-height) !important;
    min-height: 0 !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 44px)) !important;
    align-items: flex-start !important;
    scroll-padding-top: max(18px, env(safe-area-inset-top));
    scroll-padding-bottom: max(36px, env(safe-area-inset-bottom));
  }

  html.portal-mobile-keyboard-open .portal-mobile-form-overlay {
    box-sizing: border-box !important;
    inset: auto 0 auto 0 !important;
    top: var(--portal-form-viewport-top) !important;
    width: 100% !important;
    height: var(--portal-form-visible-height) !important;
    min-height: 0 !important;
    max-height: var(--portal-form-visible-height) !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(34px, env(safe-area-inset-bottom)) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-padding-top: max(16px, env(safe-area-inset-top));
    scroll-padding-bottom: max(38px, env(safe-area-inset-bottom));
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  html.portal-mobile-keyboard-open .portal-mobile-form-dialog {
    box-sizing: border-box !important;
    width: min(100%, var(--portal-form-dialog-width, 680px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(var(--portal-form-visible-height) - 20px) !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    flex: 0 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scroll-padding-top: max(16px, env(safe-area-inset-top));
    scroll-padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 44px));
    scroll-margin-top: max(10px, env(safe-area-inset-top));
    scroll-margin-bottom: max(34px, env(safe-area-inset-bottom));
  }

  html.portal-mobile-keyboard-open .portal-mobile-form-dialog > form,
  html.portal-mobile-keyboard-open form.portal-mobile-form {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: max(52px, calc(env(safe-area-inset-bottom) + 30px));
  }

  html.portal-mobile-keyboard-open .portal-mobile-scroll-region {
    scroll-padding-top: max(16px, env(safe-area-inset-top));
    scroll-padding-bottom: max(38px, env(safe-area-inset-bottom));
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 900px) and (max-height: 680px), (max-width: 900px) and (pointer: coarse) {
  html.portal-mobile-keyboard-open .portal-mobile-form-dialog {
    margin-top: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.portal-mobile-keyboard-open {
    scroll-behavior: auto;
  }
}