/* ═══════════════════════════════════
   Mobile shell: only system-level overrides (sidebar / toolbar / content / body-scroll).
   Page-specific @media rules live next to their page CSS in 5N/6N files.
   ⚠️ Этот файл подключён НАПРЯМУЮ через <link> в app/layout.tsx (НЕ через _index.css)
       чтобы правки можно было деплоить одним scp без `npm run build`.
       Версия в URL = mtime файла, читается на сервере при каждом рендере (force-dynamic).
   ═══════════════════════════════════ */

@media (max-width: 768px) {
  .glass-body {
    padding: 0;
    gap: 0;
    --tl-member-w: 180px;
    height: auto;
    overflow: visible;
  }

  /* Body scroll: move scroll from inner container to body.
     Background hard-coded to match .glass-body --surface-0 (00-tokens.css:101)
     so that Safari's status-bar blur shows the same colour as the page. */
  html, body {
    overflow: auto !important;
    height: auto !important;
    background-color: #f3f3f3 !important;
  }
  [data-theme="dark"] html,
  [data-theme="dark"] body {
    background-color: #000 !important;
  }

  /* ── Sidebar — overlay (fixed, transform-animated) ──
     ВАЖНО: pointer-events: none на ROOT — это обходит Safari iOS pinned-mode.
     Safari смотрит именно на fixed-элементы, ЛОВЯЩИЕ pointer events.
     На детей (.sidebar и всё что внутри) возвращаем auto — интерактивность работает.
     См. memory feedback_safari_pointer_events_pinned_mode_fix.md */
  .glass-sidebar {
    position: fixed;
    top: 52px;
    left: 12px;
    bottom: 12px;
    z-index: 100;
    width: 264px;
    min-width: 264px;
    transform: translateX(calc(-100% - 12px));
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 24px;
    background: var(--surface-1);
    border: 0.5px solid var(--glass-btn-border);
    box-shadow: 0px 0px 50px 0px rgba(0,0,0,0);
    overflow: hidden;
    pointer-events: none;
  }
  .glass-sidebar > * {
    pointer-events: auto;
  }

  /* Тот же паттерн для loading-overlay — он fixed + непрозрачный, без него Safari
     уходит в pinned mode при каждом page transition. См. reference_safari_ios_toolbar_behavior.md */
  .loading-overlay {
    pointer-events: none;
  }
  .glass-sidebar--mobile-open {
    transform: translateX(0);
    box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.2);
  }
  .glass-sidebar .sidebar {
    border-radius: 0;
    height: 100%;
    position: static;
    transform: none;
    z-index: auto;
    background: transparent;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 7px 8px;
  }
  .glass-sidebar .sidebar::before {
    display: none;
  }

  /* Mobile scale: ~84% of desktop sizes (was ~70%, +20%) */
  .glass-sidebar .glass-sidebar__header {
    padding: 13px 8px 7px 11px;
  }
  .glass-sidebar .glass-sidebar__toggle {
    width: 29px;
    height: 29px;
  }
  .glass-sidebar .glass-sidebar__toggle svg {
    width: 17px;
    height: 17px;
  }
  .glass-sidebar .nav__item {
    height: 38px;
    min-height: 38px;
    font-size: 16px;
    line-height: 19px;
    padding: 0 7px 0 8px;
    gap: 4px;
    letter-spacing: -0.2px;
  }
  .glass-sidebar .nav__icon {
    width: 29px;
    min-width: 29px;
    height: 19px;
  }
  .glass-sidebar .nav__icon svg {
    width: 19px;
    height: 19px;
  }
  .glass-sidebar .nav__label {
    height: 34px;
    font-size: 14px;
    line-height: 19px;
    padding: 1px 10px 8px;
    letter-spacing: -0.2px;
  }
  .glass-sidebar .nav__badge {
    font-size: 14px;
    line-height: 19px;
    padding: 0 5px 0 0;
  }
  .glass-sidebar nav > div {
    padding-top: 17px;
  }
  .glass-sidebar .sidebar__logout {
    padding: 5px 0;
  }
  .glass-sidebar .sidebar__logout-btn {
    height: 38px;
    font-size: 16px;
    padding: 0 7px 0 8px;
  }
  .glass-sidebar .sidebar__logout-btn svg {
    width: 19px;
    height: 19px;
  }

  /* Neutralize collapsed state on mobile (sidebar always full on overlay) */
  .glass-sidebar.glass-sidebar--collapsed {
    width: 264px;
    min-width: 264px;
  }
  .glass-sidebar--collapsed .sidebar {
    padding: 0 7px 8px;
    align-items: stretch;
  }
  .glass-sidebar--collapsed .nav__item {
    justify-content: flex-start;
    padding: 0 7px 0 8px;
    width: auto;
    height: 38px;
    min-height: 38px;
    border-radius: 100px;
  }
  .glass-sidebar--collapsed .nav__item span {
    width: auto;
    opacity: 1;
  }
  .glass-sidebar--collapsed .nav__label {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 1px 10px 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    opacity: 1;
    overflow: visible;
  }
  .glass-sidebar--collapsed .nav__badge {
    width: auto;
    opacity: 1;
    padding: 0 5px;
    margin-left: auto;
  }
  .glass-sidebar--collapsed .nav__icon {
    width: 29px;
    min-width: 29px;
    height: 19px;
  }
  .glass-sidebar--collapsed .glass-sidebar__header {
    justify-content: space-between;
    padding: 13px 8px 7px 11px;
  }
  .glass-sidebar--collapsed .glass-sidebar__toggle {
    width: 29px;
    height: 29px;
    border-radius: 10px;
  }
  .glass-sidebar--collapsed .sidebar__logout-btn {
    justify-content: flex-start;
    padding: 0 7px 0 8px;
    width: auto;
    height: 38px;
    border-radius: 100px;
  }
  .glass-sidebar--collapsed .sidebar__logout-btn span {
    display: inline;
  }

  /* Backdrop — прозрачный, только для тапа-закрытия мимо сайдбара.
     БЕЗ background: иначе Safari блюрит его сквозь свои top/bottom-панели и они визуально темнеют. */
  .glass-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
  }
  .glass-sidebar-backdrop--open {
    pointer-events: auto;
  }

  /* Show mobile sidebar button (hamburger) */
  .glass-toolbar__btn--mobile-sidebar {
    display: flex;
  }

  /* ── Content ── */
  .glass-content {
    border-radius: 0;
    width: 100%;
    padding: 0 8px 12px 12px;
    overflow: visible;
  }
  .glass-content__scroll {
    overflow: visible;
    padding-top: 52px;
    height: auto;
    flex: none;
  }
  /* Когда есть center toolbar — плашка внизу, добавляем место для неё.
     Высота плашки ~56px + 12 отступ + safe-area ~ 80-100px. */
  .glass-toolbar:has(.glass-toolbar__center) ~ .glass-content__scroll {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* ── Toolbar — fixed at top, full width ── */
  .glass-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    flex-wrap: wrap;
    background: transparent;
    padding: 0 12px 8px;
  }
  /* Center — единая плашка-подложка внизу с горизонтальным скроллом (как nav на /styles).
     pointer-events: auto нужен для работы touch-scroll. */
  .glass-toolbar__center {
    position: fixed;
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    transform: none;
    z-index: 50;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-1);
    border: 0.5px solid var(--glass-btn-border);
    border-radius: 100px;
    box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.2);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    pointer-events: auto;
  }
  /* Все потомки center — flex: none (не растут, не сжимаются, ширина из контента
     или explicit width). flex-wrap: nowrap чтобы flex-контейнеры не оборачивались.
     overflow: visible / max-width: none — некоторые page-specific обёртки
     (.participants-toolbar и т.п.) задают max-width:100%; overflow:hidden на mobile,
     это убивает горизонтальный скролл центра. */
  .glass-toolbar__center *,
  .glass-toolbar__center > * {
    flex: none !important;
    flex-wrap: nowrap !important;
    max-width: none !important;
    overflow: visible !important;
  }
  /* Скрыть scrollbar в WebKit */
  .glass-toolbar__center::-webkit-scrollbar {
    display: none;
  }

  /* Demo button → icon-only circle */
  .glass-toolbar__btn--demo {
    width: 40px;
    padding: 0;
    border-radius: 50%;
  }
  .glass-toolbar__btn--demo .glass-toolbar__label {
    display: none;
  }

  /* ── Primitives (overrides cascade order — must stay last) ── */
  .hide-mobile { display: none; }
  .show-mobile { display: inline; }

  .form-row { grid-template-columns: 1fr; }
  .modal { width: 95%; max-width: none; }

  .glass-body .card {
    border-radius: 24px;
  }
  .glass-body .card .card__title {
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
  }
  .glass-body .card .card__value {
    font-size: 30px;
  }

  /* Cross-page override: .chart-bar-value desktop is set in 53-tariffs.css */
  .glass-body .chart-bar-value {
    position: static;
    left: auto;
    transform: none;
    text-align: center;
    font-size: 10px;
  }
}