/* ========== SHARED: default UI density scale (all pages) ========== */
/* Makes 100% browser zoom match the previous ~90% zoom look.
 *
 * transform: scale() on the app shell keeps sidebar + content aligned
 * (CSS zoom on html desyncs position:fixed from the main pane).
 *
 * Because transform creates a containing block for fixed elements, the
 * shell must be viewport-sized with overflow hidden; only .page-wrapper
 * scrolls — otherwise the rail scrolls away with the document. */
:root {
  /* 0.81 ≈ browser 90% on top of the previous 0.9 shell scale — matches the
     density you get at Edge/Chrome 90% with the old default, now at 100%. */
  --tracx-ui-scale: 0.81;
  --tracx-ui-scale-inv: 1.2345679012; /* 1 / 0.81 */
}

html {
  overflow-x: hidden;
}

/* App shell: lock document scroll; content pane scrolls instead */
html:has(.page > #sidebar.navbar.navbar-vertical),
html:has(.page > #sidebar.navbar.navbar-vertical) body {
  height: 100%;
  overflow: hidden;
}

.page:has(> #sidebar.navbar.navbar-vertical) {
  transform: scale(var(--tracx-ui-scale));
  transform-origin: 0 0;
  width: calc(100vw * var(--tracx-ui-scale-inv));
  min-width: calc(100vw * var(--tracx-ui-scale-inv));
  height: calc(100vh * var(--tracx-ui-scale-inv));
  height: calc(100dvh * var(--tracx-ui-scale-inv));
  max-height: calc(100vh * var(--tracx-ui-scale-inv));
  max-height: calc(100dvh * var(--tracx-ui-scale-inv));
  overflow: hidden;
  margin-right: calc(100vw * var(--tracx-ui-scale-inv) * (var(--tracx-ui-scale) - 1));
  margin-bottom: calc(100vh * var(--tracx-ui-scale-inv) * (var(--tracx-ui-scale) - 1));
  margin-bottom: calc(100dvh * var(--tracx-ui-scale-inv) * (var(--tracx-ui-scale) - 1));
  box-sizing: border-box;
}

.page:has(> #sidebar.navbar.navbar-vertical) > #sidebar.navbar.navbar-vertical {
  height: 100% !important;
  max-height: 100% !important;
}

.page:has(> #sidebar.navbar.navbar-vertical) > .page-wrapper {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Centered auth pages (no fixed rail) — scale only on desktop.
   On phone, transform:scale shrinks the card and leaves empty right/bottom
   space (and tiny touch targets) — keep 1:1 layout below Tabler lg. */
.page.page-center {
  transform: scale(var(--tracx-ui-scale));
  transform-origin: 0 0;
  width: calc(100vw * var(--tracx-ui-scale-inv));
  min-width: calc(100vw * var(--tracx-ui-scale-inv));
  min-height: calc(100vh * var(--tracx-ui-scale-inv));
  min-height: calc(100dvh * var(--tracx-ui-scale-inv));
  margin-right: calc(100vw * var(--tracx-ui-scale-inv) * (var(--tracx-ui-scale) - 1));
  margin-bottom: calc(100vh * var(--tracx-ui-scale-inv) * (var(--tracx-ui-scale) - 1));
  margin-bottom: calc(100dvh * var(--tracx-ui-scale-inv) * (var(--tracx-ui-scale) - 1));
  box-sizing: border-box;
}

@media (max-width: 991.98px) {
  .page.page-center {
    transform: none;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin-right: 0;
    margin-bottom: 0;
  }

  .page.page-center .container.container-tight {
    width: 100%;
    max-width: 100%;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }

  /* 16px+ inputs avoid iOS focus zoom; 44px controls for touch */
  .page.page-center .form-control {
    font-size: 16px;
    min-height: 44px;
  }

  .page.page-center .btn,
  .page.page-center .btn.w-100 {
    min-height: 44px;
  }

  .page.page-center .input-group-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.25rem;
    padding-right: 0.35rem;
  }

  .page.page-center .input-group-text > button,
  .page.page-center .input-group-text > a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .page.page-center #socialSignInContainer .row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .page.page-center #socialSignInContainer .row > [class*="col"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .page.page-center .card.card-md {
    margin-bottom: 0.5rem;
  }
}

/* Public marketing pages must not use the app shell scale — it overflows the
   viewport and html overflow-x:hidden clips the rest (no horizontal scroll). */
html:not(:has(.page)) body:not(.landing-body) {
  transform: scale(var(--tracx-ui-scale));
  transform-origin: 0 0;
  width: calc(100vw * var(--tracx-ui-scale-inv));
  min-width: calc(100vw * var(--tracx-ui-scale-inv));
  min-height: calc(100vh * var(--tracx-ui-scale-inv));
  min-height: calc(100dvh * var(--tracx-ui-scale-inv));
  margin-right: calc(100vw * var(--tracx-ui-scale-inv) * (var(--tracx-ui-scale) - 1));
  margin-bottom: calc(100vh * var(--tracx-ui-scale-inv) * (var(--tracx-ui-scale) - 1));
  margin-bottom: calc(100dvh * var(--tracx-ui-scale-inv) * (var(--tracx-ui-scale) - 1));
  box-sizing: border-box;
}