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

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

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

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

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

  /* Нижняя навигация. Один и тот же <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(--bs);
    background: rgba(7,7,15,.94);
    backdrop-filter: blur(24px);
  }
  .nav-link {
    flex: 1; flex-direction: column; gap: 2px;
    justify-content: center; padding: var(--s1);
    border-radius: 0; min-height: var(--bottom-nav-h);
  }
  .nav-link[aria-current="page"] { background: none; box-shadow: none }
  .nav-link[aria-current="page"] .nav-label { color: var(--ph); font-weight: 600 }
  .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));
  }

  .card { padding: var(--s4); border-radius: var(--rmd) }
  h1 { font-size: 22px }

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

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

/* ══ 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: 76px; flex-direction: column; gap: var(--s1);
    padding: var(--s3) var(--s2);
    border-right: 1px solid var(--bs);
  }
  .nav-link { flex-direction: column; gap: 4px; padding: var(--s2); min-height: 56px }
  .nav-label { font-size: 10px; text-align: center; line-height: 1.15 }

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

  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .overview-span-2 { grid-column: span 2 }
  .devices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .apps-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .orders-table { display: none }
  .orders-cards { 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: var(--s4) var(--s3);
    border-right: 1px solid var(--bs);
  }
  .app-main { padding: calc(var(--header-h) + var(--s6)) var(--s6) var(--s8)
                       calc(var(--nav-w) + var(--s6)) }

  .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 }

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

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

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

  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)) }

  .devices-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) }
  .apps-grid    { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) }
  .card { padding: var(--s5) var(--s6) }
  .page-lead { max-width: 72ch }
}

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

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