/* =====================================================================
   Мобильный каркас кабинета (UI-аудит 07.10.2026).

   ≥ 1025 px — боковое меню как было.
   ≤ 1024 px — меню выезжает слева по бургеру в шапке.
   ≤ 768 px  — плюс нижняя панель главных разделов.

   Разметка — shared/_sidebar: скрытый чекбокс #nav-toggle и <label> к нему
   (бургер, подложка, крестик, «Ещё»), поэтому без JS.
   ===================================================================== */

:root {
  --mobile-topbar-h: 56px;
  --mobile-tabbar-h: 60px;
}

/* Элементы, которых на десктопе нет. */
.nav-toggle,
.mobile-topbar,
.nav-backdrop,
.mobile-tabbar,
.sidebar-close {
  display: none;
}

/* Бывшие inline-стили меню. */
.logo-mark { flex-shrink: 0; }
.vendor-avatar--photo { overflow: hidden; border-radius: 50%; padding: 0; }
.vendor-avatar--photo img { width: 32px; height: 32px; object-fit: cover; display: block; }
.logout-form { margin: 0; padding: 0; }

@media (max-width: 1024px) {
  .app-layout {
    display: block;
    overflow: visible;
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--mobile-topbar-h);
    padding: 0 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 900;
  }

  .mobile-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
  }

  .mobile-burger:hover { background: var(--bg); }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 85vw);
    height: auto;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: none;
  }

  .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
  }

  .sidebar-close:hover { background: var(--bg); color: var(--text); }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 950;
  }

  .nav-toggle:checked ~ .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(26, 26, 46, .2);
  }

  .nav-toggle:checked ~ .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Широкое содержимое (сетка календаря, таблицы) прокручивается внутри
     .main, а не растягивает страницу: иначе вместе со страницей уезжали
     за край закреплённые шапка и нижняя панель. */
  .main {
    min-height: 100vh;
    min-width: 0;
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: visible;
    padding-top: var(--mobile-topbar-h);
  }

  /* Поля страницы под узкий экран: 32–40 px съедали треть ширины. */
  .header,
  .topbar { padding: 12px 16px; }
  .content,
  .main-content { padding: 16px; }
}

@media (max-width: 768px) {
  .mobile-tabbar {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    height: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 900;
  }

  .mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
  }

  .mobile-tab.active { color: var(--accent); }

  .main {
    padding-bottom: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }
}