@layer base {
  #appContent {
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
    padding-inline: 0;
  }

  /* Admin: full workspace after sidebar — no viewport centering */
  body.use-new-ui #appContent,
  body.use-new-ui #appContent.content-container {
    max-width: none;
    margin: 0;
    width: 100%;
    padding: 0;
  }

  body.use-new-ui .main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }

  body.use-new-ui.sidebar-collapsed .main-content {
    margin-left: 82px;
    width: calc(100% - 82px);
  }

  .container-xl {
    max-width: var(--content-max);
    margin: 0 auto;
    padding-inline: var(--space-3);
  }

  .container-lg {
    max-width: 1360px;
    margin: 0 auto;
  }

  .container-md {
    max-width: 1160px;
    margin: 0 auto;
  }

  .container-mobile {
    max-width: 760px;
    margin: 0 auto;
  }

  .app.app-layout {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    width: 100%;
  }

  .main-content {
    margin-left: var(--sidebar-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    transition: margin-left 160ms ease;
  }

  body.sidebar-collapsed .main-content {
    margin-left: 82px;
  }

  .content-scroll {
    padding: 0 0 28px;
    overflow: auto;
    min-height: 0;
    flex: 1 1 auto;
  }

  @media (max-width: 900px) {
    body.use-new-ui .app.app-layout {
      min-height: var(--app-height, 100dvh);
      height: var(--app-height, 100dvh);
    }

    body.use-new-ui .main-content {
      height: var(--app-height, 100dvh);
    }
  }
}