/* Каркас приложения: сайдбар + шапка + контент */
@layer layout {
  .app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .2s var(--ease); }
  .app.is-collapsed { grid-template-columns: var(--side-w-collapsed) minmax(0, 1fr); }

  /* ---------- сайдбар ---------- */
  .side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--nav-bg);
    border-right: 1px solid var(--nav-border); z-index: var(--z-nav); overflow: hidden; }
  .side__brand { display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 var(--s-4); flex: none; color: var(--nav-text-active); text-decoration: none; }
  .side__brand:hover { text-decoration: none; }
  .side__brand .logo { flex: none; }
  .side__name { font-weight: var(--fw-semibold); font-size: var(--fs-14); line-height: 1.15; white-space: nowrap; }
  .side__name small { display: block; font-weight: var(--fw-regular); font-size: var(--fs-11); color: var(--nav-group); }
  .side__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--s-2) var(--s-3) var(--s-4); }
  /* полоса прокрутки меню: просто серая полоска, без дорожки и стрелок */
  .side__nav::-webkit-scrollbar { width: 6px; }
  .side__nav::-webkit-scrollbar-track, .side__nav::-webkit-scrollbar-corner { background: transparent; }
  .side__nav::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  .side__nav::-webkit-scrollbar-thumb { background: var(--nav-scroll); border-radius: 3px; }
  .side__nav::-webkit-scrollbar-thumb:hover { background: var(--nav-scroll-hover); }
  @supports not selector(::-webkit-scrollbar) { .side__nav { scrollbar-width: thin; scrollbar-color: var(--nav-scroll) transparent; } }
  .side__group { margin-top: var(--s-4); }
  .side__group-title { padding: 0 var(--s-3) 6px; font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--nav-group); white-space: nowrap; }
  .side__item { display: flex; align-items: center; gap: var(--s-3); height: 36px; padding: 0 var(--s-3); border-radius: var(--r-md);
    color: var(--nav-text); font-size: var(--fs-14); text-decoration: none; white-space: nowrap; position: relative; }
  .side__item:hover { background: var(--nav-bg-hover); color: var(--nav-text-active); text-decoration: none; }
  .side__item .icon { color: var(--nav-icon); }
  .side__item.is-active { background: var(--nav-bg-active); color: var(--nav-text-active); font-weight: var(--fw-medium); }
  .side__item.is-active .icon { color: var(--nav-icon-active); }
  .side__item.is-soon { opacity: .42; cursor: default; }
  .side__item.is-soon:hover { background: none; color: var(--nav-text); }
  .side__item > span:not(.badge):not(.count) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .side__item .badge { margin-left: auto; height: 16px; padding: 0 5px; font-size: 9px; letter-spacing: .03em; background: rgba(255,255,255,.08); color: var(--nav-text); flex: none; }
  :root[data-nav="light"] .side__item .badge { background: var(--bg-sunken); color: var(--text-tertiary); }
  .side__item.has-badge { height: auto; min-height: 36px; padding-block: 6px; }
  .side__item.has-badge > span:not(.badge):not(.count) { white-space: normal; line-height: 1.2; }
  .side__item .badge--beta { background: rgba(154, 134, 244, .22); color: var(--a-200); text-transform: lowercase; }
  :root[data-nav="light"] .side__item .badge--beta { background: var(--accent-soft-2); color: var(--accent-hover); }
  .side__item .count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--negative-solid); color: #fff; font-size: 10px; font-weight: var(--fw-bold); display: grid; place-items: center; }
  .side__foot { flex: none; padding: var(--s-3); border-top: 1px solid var(--nav-border); display: flex; align-items: center; gap: var(--s-2); }
  .side__collapse { background: none; border: 0; color: var(--nav-icon); width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; }
  .side__collapse:hover { background: var(--nav-bg-hover); color: var(--nav-text-active); }
  .app.is-collapsed .side__name, .app.is-collapsed .side__group-title, .app.is-collapsed .side__item span,
  .app.is-collapsed .side__item .badge, .app.is-collapsed .side__item .count { display: none; }
  .app.is-collapsed .side__item { justify-content: center; padding: 0; }
  .app.is-collapsed .side__collapse .icon { transform: rotate(180deg); }
  .app.is-collapsed .side__foot { justify-content: center; }

  /* ---------- шапка ---------- */
  .main { min-width: 0; display: flex; flex-direction: column; }
  .topbar { position: sticky; top: 0; z-index: calc(var(--z-nav) - 1); height: var(--top-h); display: flex; align-items: center; gap: var(--s-3);
    padding: 0 var(--page-pad); background: color-mix(in srgb, var(--bg-page) 88%, transparent); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--divider); }
  .topbar__crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--text-tertiary); min-width: 0; }
  .topbar__crumbs a { color: var(--text-secondary); }
  .topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
  .topbar__here { color: var(--text-primary); font-weight: var(--fw-medium); }
  .topbar__cost { display: inline-flex; align-items: center; gap: var(--s-2); }
  .topbar__lbl { font-size: var(--fs-12); color: var(--text-tertiary); }
  .topbar .seg--sm > a { height: 24px; padding: 0 10px; font-size: var(--fs-12); }
  .topbar .seg--sm > a.is-active:last-child { color: var(--warning); }  /* фактическая себестоимость включена — янтарным, чтобы не забыть */
  .fresh { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--text-tertiary); padding: 0 var(--s-2); }
  .fresh::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--positive-solid); box-shadow: 0 0 0 3px var(--positive-bg); }
  .fresh.is-stale::before { background: var(--warning-solid); box-shadow: 0 0 0 3px var(--warning-bg); }
  .profile { display: flex; align-items: center; gap: var(--s-2); padding: 3px 10px 3px 3px; border-radius: var(--r-pill); background: var(--bg-sunken); font-size: var(--fs-13); }
  .avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft-2); color: var(--accent-hover); font-size: var(--fs-11); font-weight: var(--fw-bold); }

  /* ---------- страница ---------- */
  :is(.v2, .side, .topbar) .page { padding: var(--s-6) var(--page-pad) var(--s-12); min-width: 0; }
  :is(.v2, .side, .topbar) .page--narrow { max-width: 960px; }
  .page-head { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
  .page-head__title { display: flex; flex-direction: column; gap: 4px; }
  .page-head__sub { color: var(--text-tertiary); font-size: var(--fs-13); }
  .page-head__actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
  :is(.v2, .side, .topbar) .toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
  :is(.v2, .side, .topbar) .toolbar__spacer { flex: 1; }
  .stack { display: grid; gap: var(--s-5); }
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }

 @media (max-width: 1200px) {
    .app { grid-template-columns: var(--side-w-collapsed) minmax(0, 1fr); }
    .side__name, .side__group-title, .side__item span, .side__item .badge, .side__item .count { display: none; }
    .side__item { justify-content: center; padding: 0; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
 @media (max-width: 760px) {
    :root { --page-pad: 16px; }
    .app { grid-template-columns: 1fr; }
    .side { position: fixed; left: 0; top: auto; bottom: 0; height: 56px; width: 100%; flex-direction: row; border-right: 0; border-top: 1px solid var(--nav-border); }
    .side__brand, .side__foot, .side__group-title { display: none; }
    .side__nav { display: flex; overflow-x: auto; padding: 6px; gap: 4px; }
    .side__group { display: contents; }
    :is(.v2, .side, .topbar) .page { padding-bottom: 80px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
  }
}