/* /src/css/web/overrides/mobile-shell-spacing.css */

:root {
  --shell-page-inline: 1rem;
  --shell-page-inline-wide: 1.5rem;
  --shell-page-inline-mobile: 14px;
  --shell-page-bottom: clamp(56px, 8vh, 96px);
  --shell-page-bottom-mobile: calc(40px + env(safe-area-inset-bottom, 0px));
  --shell-content-max: 1320px;
}

/*
  Route outlet is the app-shell scroll container. Keep scroll behavior there
  and give focused content breathing room near the bottom edge.
*/
.app-route-outlet {
  scroll-padding-bottom: var(--shell-page-bottom);
}

/* Desktop / tablet baseline */
.usage-screen,
.api-console-page,
.reports-page,
.settings-screen,
.sharing-screen,
.new-screen {
  padding-inline: var(--shell-page-inline);
  padding-bottom: var(--shell-page-bottom);
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .usage-screen,
  .api-console-page,
  .reports-page,
  .settings-screen,
  .sharing-screen,
  .new-screen {
    padding-inline: var(--shell-page-inline-wide);
  }
}

/* Reduce shell gutter too */
@media (max-width: 899px) {
  .app-route-outlet {
    padding-left: 8px;
    padding-right: 8px;
    scroll-padding-bottom: var(--shell-page-bottom-mobile);
  }
}

@media (max-width: 640px) {
  .app-route-outlet {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .usage-screen,
  .api-console-page,
  .reports-page,
  .settings-screen,
  .sharing-screen,
  .new-screen {
    padding-inline: var(--shell-page-inline-mobile);
    padding-bottom: var(--shell-page-bottom-mobile);
  }
}