/* /opt/skynet-portal/app/static/css/portal-mobile.css */
/* v0.1.0 — мобильная адаптация каркаса: топбар, дропдауны-шторки, отступы main */
/* 17.07.2026: только @media-правила ≤767; десктоп не затрагивается; грузится последним */

/* ===== ТЕЛЕФОН-ПЛАНШЕТ (≤767px) ===== */
@media (max-width: 767px) {
  /* Топбар: компактные боковые отступы, меньше зазор между зонами */
  .topbar {
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
  }
  /* Пин топбара — десктопная фича (на мобиле поведение управляется настройкой из БД) */
  .topbar-pin { display: none; }
  /* Рабочая область: экономим ширину */
  .app-main { padding: var(--sp-4) var(--sp-3); }
  .page-header {
    margin-bottom: var(--sp-4);
    gap: var(--sp-3);
  }
}

/* ===== УЗКИЙ ТЕЛЕФОН (≤639px) ===== */
@media (max-width: 639px) {
  /* Язык: только флаг, без текстового кода — меню работает как раньше */
  .topbar-lang-code { display: none; }
  .topbar-lang { padding: 0 var(--sp-2); }
  /* Заголовок страницы компактнее */
  .page-title {
    font-size: var(--fs-xl);
    gap: var(--sp-2);
  }
}

/* ===== ТЕЛЕФОН (≤480px) ===== */
@media (max-width: 480px) {
  .topbar-right { gap: var(--sp-1); }
  /* Кнопка оформления скрыта — функция остаётся в меню пользователя (пункт «Тема») */
  #appearanceTrigger { display: none; }
  .tbc-item { max-width: 96px; }
  .topbar-user { padding: 0 var(--sp-1); }
  /* Дропдауны топбара — шторка на всю ширину под топбаром:
     ни одно меню (уведомления/язык/юзер) не выходит за край экрана */
  .topbar-dropdown .topbar-menu {
    position: fixed;
    left: var(--sp-3);
    right: var(--sp-3);
    top: calc(var(--topbar-height) + 8px);
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .ntf-menu { width: auto; }
  .ntf-feed-list { max-height: min(420px, 62vh); }
  /* Сайдбар: на сверхузких экранах не шире 84% вьюпорта (виден backdrop для закрытия) */
  .sidebar { width: min(var(--sidebar-width), 84vw); }
  .app-main { padding: var(--sp-3); }
}