/* Cabinet up to 1120 px (app-sidebar.css): the phone header (.app-mobile-header) with the kit logo and the menu
   button, and the sidebar as a full-screen sheet over the page, like the site's phone menu. Figma «LidFly — Бренд
   и UI Kit 2026»: Cabinet mobile header 152:1883, closed/open/scrolled 152:1911. The sheet has the page background,
   no scrim and no shadow; its top row repeats the header and «Закрыть» stands exactly where the menu button is.
   It fades in (200 ms) and only the list rises by 8 px: the top row stays put, so the logo does not jump.
   No motion under prefers-reduced-motion. The close button, Esc and a chosen item close it (app-sidebar.js).
   Nothing is pinned here: app-sidebar.js puts «Аккаунт» into the list before the theme (Figma 299:3397). */

@media (max-width: 1120px) {
  :root {
    --app-shell-top: calc(64px + env(safe-area-inset-top));
    --app-sheet-motion: 200ms cubic-bezier(0.2, 0, 0, 1);
  }

  .dashboard-page {
    flex-direction: column;
  }

  .dashboard-main {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  /* Header and the top row of the sheet: 64 high, logo 32 on the left, the round button on the right. */
  .app-mobile-header,
  .sidebar-brand {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--app-shell-top);
    padding: env(safe-area-inset-top) 8px 0 16px;
    border-bottom: 1px solid var(--lf-border-subtle);
    background: var(--lf-bg-canvas);
  }

  .app-mobile-header {
    position: relative;
    z-index: 40;
  }

  .app-mobile-logo {
    display: flex;
    align-items: center;
    min-width: 0;
    border-radius: var(--lf-radius-sm);
    text-decoration: none;
  }

  .app-mobile-logo img,
  .sidebar-logo img {
    width: auto;
    height: 32px;
  }

  /* Logo links: logo 32 high, hit area 48. */
  .app-mobile-logo,
  .sidebar-logo {
    position: relative;
  }

  .app-mobile-logo::after,
  .sidebar-logo::after {
    content: "";
    position: absolute;
    inset: -8px -4px;
  }

  /* The sheet: the whole screen, page background, above the header. */
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 101;
    width: auto;
    height: var(--app-visual-height, 100dvh);
    border-right: 0;
    background: var(--lf-bg-canvas);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--app-sheet-motion), visibility 0s linear 200ms;
  }

  .sidebar.mobile-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--app-sheet-motion), visibility 0s;
  }

  /* The top row matches the header pixel for pixel and does not move; the list below rises into place. */
  .sidebar-scroll {
    transform: translateY(8px);
    transition: transform var(--app-sheet-motion);
  }

  .sidebar.mobile-open .sidebar-scroll {
    transform: translateY(0);
  }

  .app-sidebar-collapse-toggle {
    display: none;
  }

  .app-mobile-menu-close {
    display: inline-flex;
  }

  /* One scrolling list, 8 from the edges; the safe area at the bottom. */
  .sidebar-scroll {
    padding: 8px 8px calc(16px + env(safe-area-inset-bottom));
  }

  /* Group labels 14 above and 4 below. */
  .sidebar-group {
    padding-top: 14px;
  }

  /* «Аккаунт» is one more group of the list: no line, 2 below the last item like any other group. */
  .sidebar-pinned {
    margin: 2px 0 0;
    padding: 0;
    border-top: 0;
  }

  /* Items 48, Label/L 16/20, icons 24. */
  .sidebar-item {
    min-height: 48px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.005em;
  }

  .sidebar-item__icon {
    width: 24px;
    height: 24px;
  }

  /* The page under the open sheet does not scroll. */
  body.app-mobile-menu-open .dashboard-main {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar.mobile-open,
  .sidebar-scroll {
    transition: none;
  }
}