@import url("./header.css");
@import url("../settings/settings-icons.css");
@import url("./accounts-scroll.css");

/*
 * Indoone Safe Layout Contract
 *
 * One device-agnostic contract owns the safe-area values used by the web UI.
 * Android supplies measured native insets when available. In browser/WebView
 * environments without native values, the platform safe-area environment is
 * used as the fallback.
 */

:root {
  /* Stable component geometry. Device-specific spacing comes from insets,
     not from an Android-version-specific rule. */
  --indoone-topbar-base: 76px;
  --indoone-bottom-nav-base: 67px;

  /* Canonical safe-area source for the whole UI. */
  --indoone-safe-top: var(--indoone-top-inset, env(safe-area-inset-top, 0px));
  --indoone-safe-bottom: var(--indoone-bottom-inset, env(safe-area-inset-bottom, 0px));
  --indoone-safe-left: var(--indoone-left-inset, env(safe-area-inset-left, 0px));
  --indoone-safe-right: var(--indoone-right-inset, env(safe-area-inset-right, 0px));
}

#app.phone-shell .topbar,
#app.phone-shell .bottom-nav {
  box-sizing: border-box !important;
}

#app.phone-shell .topbar {
  height: calc(var(--indoone-topbar-base) + var(--indoone-safe-top)) !important;
  min-height: calc(var(--indoone-topbar-base) + var(--indoone-safe-top)) !important;
  padding: calc(10px + var(--indoone-safe-top)) calc(18px + var(--indoone-safe-right)) 8px calc(18px + var(--indoone-safe-left)) !important;
}

/*
 * The WebView is edge-to-edge. The measured bottom inset belongs to the
 * system navigation/gesture region, not to the Indoone navigation controls.
 * Move the whole app navigation above that measured region while keeping
 * the app bar itself at its normal component height. No navigation-mode
 * detection or device-specific offset is used.
 */
#app.phone-shell .bottom-nav {
  height: var(--indoone-bottom-nav-base) !important;
  min-height: var(--indoone-bottom-nav-base) !important;
  padding: 0 var(--indoone-safe-right) 0 var(--indoone-safe-left) !important;
  bottom: var(--indoone-safe-bottom) !important;
}

#app.phone-shell .fab {
  bottom: calc(var(--indoone-bottom-nav-base) + 11px + var(--indoone-safe-bottom)) !important;
}

#app.phone-shell .drawer-panel {
  padding-top: calc(25px + var(--indoone-safe-top)) !important;
  padding-bottom: calc(25px + var(--indoone-safe-bottom)) !important;
}

#app.phone-shell .overlay {
  padding-bottom: calc(14px + var(--indoone-safe-bottom)) !important;
}

#app.phone-shell .modal {
  max-height: calc(100dvh - 28px - var(--indoone-safe-bottom)) !important;
}

@media (max-width: 380px) {
  :root {
    --indoone-topbar-base: 68px;
    --indoone-bottom-nav-base: 60px;
  }

  #app.phone-shell .topbar {
    height: calc(var(--indoone-topbar-base) + var(--indoone-safe-top)) !important;
    min-height: calc(var(--indoone-topbar-base) + var(--indoone-safe-top)) !important;
    padding: calc(8px + var(--indoone-safe-top)) calc(12px + var(--indoone-safe-right)) 6px calc(12px + var(--indoone-safe-left)) !important;
  }

  #app.phone-shell .bottom-nav {
    padding-right: var(--indoone-safe-right) !important;
    padding-left: var(--indoone-safe-left) !important;
  }

  #app.phone-shell .fab {
    bottom: calc(var(--indoone-bottom-nav-base) + 11px + var(--indoone-safe-bottom)) !important;
  }

  #app.phone-shell .overlay {
    padding: 8px !important;
    padding-bottom: calc(8px + var(--indoone-safe-bottom)) !important;
  }

  #app.phone-shell .modal {
    max-height: calc(100dvh - 16px - var(--indoone-safe-bottom)) !important;
  }
}

@media (max-width: 340px) {
  :root {
    --indoone-topbar-base: 64px;
  }

  #app.phone-shell .topbar {
    height: calc(var(--indoone-topbar-base) + var(--indoone-safe-top)) !important;
    min-height: calc(var(--indoone-topbar-base) + var(--indoone-safe-top)) !important;
    padding: calc(6px + var(--indoone-safe-top)) calc(10px + var(--indoone-safe-right)) 4px calc(10px + var(--indoone-safe-left)) !important;
  }
}

/* Shared content region: reserves the app navigation plus measured system
   safe area so scrolling content never hides behind either region. */
#app.phone-shell > #content,
#app.phone-shell > .settings-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  padding-top: clamp(14px, 2.5vw, 18px) !important;
  padding-right: calc(clamp(12px, 4.2vw, 18px) + var(--indoone-safe-right)) !important;
  padding-bottom: calc(var(--indoone-bottom-nav-base) + 37px + var(--indoone-safe-bottom)) !important;
  padding-left: calc(clamp(12px, 4.2vw, 18px) + var(--indoone-safe-left)) !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

#app.phone-shell > #searchWrap,
#app.phone-shell > .topbar,
#app.phone-shell > .bottom-nav {
  flex: 0 0 auto !important;
}

#app.phone-shell > #content .page-heading,
#app.phone-shell > .settings-content .settings-page-head {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#app.phone-shell .drawer-panel {
  padding-left: calc(14px + var(--indoone-safe-left)) !important;
  padding-right: calc(14px + var(--indoone-safe-right)) !important;
}






@media (min-width: 700px) {
  #app.phone-shell > #content,
  #app.phone-shell > .settings-content {
    padding-right: calc(18px + var(--indoone-safe-right)) !important;
    padding-left: calc(18px + var(--indoone-safe-left)) !important;
  }
}

@media (min-width: 700px) {
  :root {
    --indoone-bottom-nav-base: 58px;
  }

  #app.phone-shell .bottom-nav {
    height: var(--indoone-bottom-nav-base) !important;
    min-height: var(--indoone-bottom-nav-base) !important;
    padding: 0 var(--indoone-safe-right) 0 var(--indoone-safe-left) !important;
    bottom: var(--indoone-safe-bottom) !important;
  }
}