/*
  Адаптив кабинета. Все медиазапросы собраны здесь, подключается после
  account.css.

  Четыре уровня, а не «мобильный и остальное»:
    t1  ≤767     компактная шапка, нижняя навигация, одна колонка
    t2  768–1199 левый рельс с иконками
    t3  1200–1919 постоянный сайдбар 220px (как в макете), 12-колоночная сетка,
                 ширина 1140
    t4  ≥1920    сайдбар шире, ширина 1440, плотнее сетка

  Правило для t4: ни один элемент не растягивается на всю ширину экрана.
  Освободившееся место занимает дополнительная колонка, а не воздух и не
  строки текста длиной в полтора метра.
*/

/* ══ t1: 360–767 ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  :root { --header-h: 56px }

  /* Рендер-свечение на телефоне крупнее и тише: иначе от него виден только
     угол. */
  body::before { width: 170vw; top: -20px; right: -70vw; opacity: .28 }

  .app-header { padding: 0 var(--s3) }
  .app-logo-text { display: none }       /* в шапке остаётся знак и раздел */
  .app-header-section { font-size: 15px; font-weight: 600; color: var(--tp) }

  /* Нижняя навигация. Один и тот же <nav> перерисовывается при смене уровня,
     а не дублируется в разметке: две навигации давали бы два ориентира и два
     одинаковых доступных имени в дереве доступности. */
  .app-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--line);
    background: rgba(11,12,20,.92);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .nav-link {
    flex: 1; flex-direction: column; gap: 3px;
    justify-content: center; padding: var(--s1);
    border: 0; border-radius: 0; min-height: var(--bottom-nav-h);
  }
  .nav-link:hover { background: none }
  .nav-link[aria-current="page"] { background: none; border: 0 }
  .nav-link[aria-current="page"] .nav-label { color: var(--vh); font-weight: 700 }
  .nav-label { font-size: 11px; line-height: 1.2 }

  .app-main {
    padding: calc(var(--header-h) + var(--s4)) var(--s4)
             calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + var(--s5));
  }

  .page { gap: var(--s4) }
  /* Правила этого файла вне слоёв и перебивают любые слоёные, поэтому
     карточки с собственными отступами исключены явно. */
  .card:not(.app-card) { padding: var(--s4) }
  .card { border-radius: 14px }
  h1 { font-size: 22px }
  .page-head-boxed h1 { padding: 5px 10px; border-radius: var(--rsm) }
  .page-head-actions, .page-head-actions .btn { width: 100% }

  /* Покупки на узком экране — карточками. Это ДРУГАЯ отрисовка тех же данных,
     а не таблица, спрятанная через display:none: скрытая таблица осталась бы
     в дереве доступности и дублировала бы каждую строку. */
  .orders-table { display: none }

  .overview-order { flex-direction: column; align-items: stretch }
  .overview-order-sum { text-align: left }
  .overview-order .card-link { align-self: flex-start }

  .device-card, .device-add { flex-basis: 100% }
  .device-add { min-height: 150px; padding: var(--s5) }
  .device-art { width: 420px; right: -170px; top: -90px }

  .sessions-card { flex-direction: column; align-items: stretch }
  .sessions-text { flex: none }
  .stats-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) }
  .stats-sep { display: none }

  .modal-actions { flex-direction: column-reverse }
  .modal-actions .btn { width: 100% }
  .auth-shell { padding: var(--s5) var(--s3) }
  .auth-card { padding: var(--s5) var(--s4) }
  .stepper { gap: 4px }
  .step-label { display: none }          /* остаются полоски прогресса */
}

/* Две колонки полей профиля — как только карточке хватает места. */
@media (min-width: 480px) {
  .form-cols > .form { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .form-cols > .form > .field-wide { grid-column: 1 / -1 }
}

/* ══ t2: 768–1199 ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) {
  .app-nav {
    position: fixed; top: var(--header-h); bottom: 0; left: 0; z-index: 90;
    width: 84px; flex-direction: column; gap: var(--s1);
    padding: var(--s3) var(--s2);
    border-right: 1px solid var(--line);
    background: rgba(11,12,20,.6);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .nav-link { flex-direction: column; gap: 4px; padding: var(--s2) 2px; min-height: 60px }
  .nav-label { font-size: 10px; text-align: center; line-height: 1.15 }

  .app-main { padding: calc(var(--header-h) + var(--s6)) var(--s5) var(--s7) 108px }

  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .overview-span-8, .overview-span-12 { grid-column: span 2 }
  .apps-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .orders-table { display: none }
  .orders-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* Профиль: две колонки карточек, когда рядом помещаются поля обеих форм. */
@media (min-width: 1024px) {
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ══ t3 и t4: постоянный сайдбар ════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .app-nav {
    position: fixed; top: var(--header-h); bottom: 0; left: 0; z-index: 90;
    width: var(--nav-w); flex-direction: column; gap: var(--s1);
    padding: 20px 14px;
    border-right: 1px solid var(--line);
  }
  .app-main { padding: calc(var(--header-h) + 34px) var(--s7) var(--s8)
                       calc(var(--nav-w) + var(--s7)) }

  .overview-grid { grid-template-columns: repeat(12, minmax(0, 1fr)) }
  .overview-span-4  { grid-column: span 4 }
  .overview-span-6  { grid-column: span 6 }
  .overview-span-8  { grid-column: span 8 }
  .overview-span-12 { grid-column: span 12 }

  .apps-grid    { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) }

  /* На широком экране покупки — структурированная таблица: колонки
     сопоставляются взглядом быстрее, чем карточки. */
  .orders-cards { display: none }
  .page-lead { max-width: 68ch }

  /* Пока рядом с таблицей не помещается колонка «Итого», сводка стоит под
     таблицей горизонтальной полосой. */
  .summary-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s4) 32px }
  .summary-card .divider { width: 1px; height: 40px }
}

@media (min-width: 1440px) {
  .orders-layout { grid-template-columns: minmax(0, 1fr) 220px }
  .summary-card { flex-direction: column; align-items: stretch; gap: 18px }
  .summary-card .divider { width: auto; height: 1px }
}

/* ══ t4: ≥1920 ══════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  :root { --nav-w: 260px; --header-h: 64px }

  body { font-size: clamp(15px, .78vw, 17px) }

  /* Ширина ограничена: строка в 3840 px нечитаема. Место справа занимает
     дополнительная колонка карточек, а не пустота. */
  .page { max-width: var(--maxw-wide) }
  .app-main { padding: calc(var(--header-h) + var(--s7)) var(--s7) var(--s8)
                       calc(var(--nav-w) + var(--s7)) }

  .apps-grid    { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) }
  .orders-layout { grid-template-columns: minmax(0, 1fr) 260px }
  .card:not(.app-card):not(.orders-table-card) { padding: 26px 28px }
  .page-lead { max-width: 72ch }
}

/* ══ Очень широкие экраны ═══════════════════════════════════════════════════ */
@media (min-width: 2560px) {
  /* Сайдбар прижат к краю, а содержимое центрируется в своей колонке —
     иначе на 4K вся страница «слипается» у левой границы. */
  .app-main > .page { margin-left: auto; margin-right: auto }
  body::before { width: 1800px }
}

/* ══ Сенсорные экраны ═══════════════════════════════════════════════════════ */
@media (hover: none) {
  /* Наведение на сенсорном экране «залипает» после нажатия. */
  .card-interactive:hover { border-color: var(--glass-bd) }
  .btn:not(:disabled):hover { background: inherit }
  .btn-primary:not(:disabled):hover { background: var(--p-fill) }
  .btn-secondary:not(:disabled):hover { background: transparent }
}

/* Без поддержки backdrop-filter стекло превращается в плотную карточку —
   иначе текст ложится прямо на фото. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .auth-card, .device-add { background: rgba(18,20,31,.92) }
}