/* ═══════════════════════════════════════════════════════════════════════
   Modern viewport units — dvh / svh / lvh
   Loaded last. Single scroll owner (#content-area). PWA + keyboard safe.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Fallback first in dual declarations elsewhere; tokens for calc() */
  --vp-fallback: 100vh;
  --vp-dynamic: 100dvh;  /* scroll shells, keyboard-aware layouts */
  --vp-small: 100svh;    /* stable full-bleed boot screens */
  --vp-large: 100lvh;    /* decorative max bleed only */
  --app-viewport-h: var(--vp-dynamic);
  --app-scroll-h: calc(var(--vp-dynamic) - var(--app-header-total));
  /* Set from JS (visualViewport) when keyboard open on legacy engines */
  --vp-visible-h: var(--vp-dynamic);
}

/* ── Document: no double scroll, no bottom gap ─────────────────────── */
html {
  height: 100%;
  min-height: 100dvh;
}

body {
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

/* ── App shell: fixed viewport column; content-area scrolls ─────────── */
#app-shell {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
}

#sidebar {
  height: 100dvh;
  max-height: 100dvh;
}

#content-area {
  height: var(--app-scroll-h) !important;
  max-height: var(--app-scroll-h) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: clip !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.page.active {
  min-height: var(--app-scroll-h);
}

/* ── Boot / login shells ───────────────────────────────────────────── */
#loading-screen,
#loading-screen-2,
.kkpms-loading-screen {
  min-height: 100svh;
  min-height: 100dvh;
}

#login-overlay {
  min-height: 100dvh;
}

#login-overlay .page,
#login-overlay .lo-container {
  min-height: 100dvh;
}

#tpf-wrapper {
  height: 100dvh;
  max-height: 100dvh;
}

.tpf-page {
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
}

/* ── Mobile slide-in sidebar ───────────────────────────────────────── */
@media (max-width: 1180px) {
  #sidebar {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  #mob-nav-drawer {
    height: 100dvh;
    max-height: 100dvh;
  }
}

/* ── Standalone Home Screen PWA ────────────────────────────────────── */
@media (display-mode: standalone) {
  html,
  body,
  #app-shell {
    min-height: 100dvh;
    height: 100dvh;
  }

  #content-area {
    height: var(--app-scroll-h) !important;
    max-height: var(--app-scroll-h) !important;
  }
}

/* ── Keyboard open: optional visible viewport override ─────────────── */
body.vv-keyboard-open #content-area {
  max-height: calc(var(--vp-visible-h, var(--vp-dynamic)) - var(--app-header-total)) !important;
}

body.vv-keyboard-open .tpf-page,
body.vv-keyboard-open #tpf-wrapper {
  max-height: var(--vp-visible-h, var(--vp-dynamic));
}