/* =====================================================
   Адаптация под ПК (mobile-first сохраняем без изменений).
   Загружается последним из CSS — уверенно перекрывает базовые
   мобильные правила из app.css / meal_*.css / recipes.css.
   Всё под медиазапросами: на телефонах ничего не меняется.
   ===================================================== */
@media (min-width: 900px) {
  :root {
    --side-w: 240px;
    --content-max: 760px;
  }

  /* Контент отодвигается вправо от боковой панели и центрируется. */
  body { padding-left: var(--side-w); }
  .main-content {
    max-width: var(--content-max);
    padding: 28px var(--spacing-lg);
    padding-bottom: 48px;
    margin: 0 auto;
  }

  /* Нижняя «плавающая» навигация превращается в левый сайдбар. */
  .bottom-nav {
    left: 0;
    top: 64px;
    bottom: 0;
    transform: none;
    width: var(--side-w);
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    background: var(--bg-app);
  }
  .nav-item {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    font-size: 14.5px;
    padding: 11px 14px;
    border-radius: var(--r-md);
  }
  .nav-item svg { width: 21px; height: 21px; }
  .nav-item.active {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  }
  .nav-item.active svg { transform: none; }

  /* Лого-капсула становится шапкой сайдбара (иначе она скрыта вне fullscreen). */
  .tg-brand {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: var(--side-w);
    height: 64px;
    padding: 0 20px;
    align-items: center;
    gap: 10px;
    border-right: 1px solid var(--border);
    background: var(--bg-app);
    color: var(--text-primary);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.4px;
  }
  .tg-brand .tg-brand-icon { width: 22px; height: 22px; color: var(--color-primary); }
  .tg-brand .tg-brand-name { font-size: 17px; }

  /* Затемнение у нижнего края и так не нужно без плавающего меню. */
  .bottom-fade { display: none; }

  /* Оставляем внизу сайдбара место под кнопку добавления приёма. */
  .bottom-nav { padding-bottom: 76px; }

  /* FAB превращается в полноширинную кнопку внизу бокового меню. */
  body:not(.tg-webapp) .fab-add {
    left: 12px;
    right: auto;
    bottom: 16px;
    width: calc(var(--side-w) - 24px);
    height: 48px;
    gap: 8px;
    padding: 0 16px;
    border-radius: var(--r-md);
    font-size: 14.5px;
    font-weight: 700;
  }
  .fab-add svg { width: 20px; height: 20px; }
  .fab-add-label { display: inline; }

  /* Тосты центрируем над контентной областью, а не над всем окном. */
  .toast { left: calc(50% + var(--side-w) / 2); }

  /* Сводка: двухколоночная «дашборд»-раскладка.
     :not(.hidden) — иначе ID-специфичность перебила бы .view.hidden,
     и «Сводка» не скрывалась бы при переходе в другой раздел. */
  #view-dashboard:not(.hidden) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    align-items: start;
  }
  #view-dashboard > .hero-card,
  #view-dashboard > #streak-card,
  #view-dashboard > .share-day-btn,
  #view-dashboard > .food-day-note { grid-column: 1 / -1; }
  #view-dashboard > .glass-card { margin-bottom: 0; }

  /* Рецепты: больше карточек в ряд. */
  .recipes-grid { grid-template-columns: repeat(3, 1fr); }

  /* Шторки (приём / рецепт / нутриенты / инфо) — центрированные модалки. */
  .sheet {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(560px, calc(100vw - 48px));
    max-height: 85vh;
    border-radius: var(--r-lg);
    transform: translate(-50%, -50%) scale(0.96);
    transition: transform 0.28s var(--ease-spring), opacity var(--dur) var(--ease);
    opacity: 0;
    padding: 20px 22px 24px;
  }
  .sheet-overlay.open .sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .sheet-handle { display: none; }

  /* Полноэкранный подраздел (форма приёма, настройки, пикеры) на ПК
     превращается в центрированное модальное окно с затемнением фона —
     иначе форма растягивается на весь экран и выглядит «мобильной». */
  .subview {
    align-items: center;
    padding: 40px 24px;
    background: rgba(8, 11, 16, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .subview-head,
  .subview-body {
    width: 100%;
    max-width: 520px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-float);
  }
  /* Авто-поля сверху/снизу центрируют панель по вертикали, но оставляют
     прокрутку, если содержимое выше окна. */
  .subview-head {
    margin-top: auto;
    margin-bottom: 0;
    padding: 18px 22px;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .subview-body {
    margin-bottom: auto;
    padding: 22px;
    border-top: none;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .subview-title { font-size: 17px; }
  /* Панель оплаты на ПК липнуть к низу окна не должна: подраздел здесь —
     модалка по центру, поэтому возвращаем ей обычные отступы карточки. */
  .subview.sv-pay,
  .subview:has(.sub-pay-bar) { padding-bottom: 40px; }
  .sv-pay .subview-body,
  .subview-body:has(.sub-pay-bar) { flex: 0 1 auto; }
  .sub-pay-bar { position: static; margin: 0; padding: 0; background: none; }
  /* В центрированной модалке крестик «Закрыть» — основной способ выйти,
     а «Назад» со стрелкой избыточен, поэтому его прячем. */
  .subview-back { display: none !important; }
}

/* Более широкие экраны — просторнее контент и ещё больше рецептов. */
@media (min-width: 1280px) {
  :root { --content-max: 900px; }
  .recipes-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Наведение мышью (только устройства с курсором — тач не затрагивается). */
@media (hover: hover) and (pointer: fine) {
  .meal-item,
  .recipe-card,
  .tcard,
  .nutri-tile,
  .share-day-btn,
  .add-entry-btn {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
      border-color var(--dur) var(--ease);
  }
  .meal-item:hover,
  .recipe-card:hover,
  .tcard:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
    border-color: var(--border-strong);
  }
  .nutri-tile:hover { border-color: var(--border-strong); }
  .share-day-btn:hover,
  .add-entry-btn:hover { border-color: var(--color-primary); }
  .nav-item:hover { color: var(--text-primary); }
  .fab-add:hover { filter: brightness(1.05); box-shadow: var(--shadow-float); }
  .btn-primary:hover { filter: brightness(1.04); }
  .btn-ghost:hover,
  .btn-soft:hover { border-color: var(--border-strong); }
  .pf-row:hover,
  .pf-stat:not([disabled]):hover { background: var(--surface-2); }
  .opt-card:not(.active):hover { border-color: var(--border-strong); }
  .stp-btn:hover { background: var(--surface-2); color: var(--color-primary); }
  .day-cell:not(.active):not(:disabled):hover { background: var(--surface-2); }
  .chip:hover,
  .seg-btn:not(.active):hover { color: var(--text-primary); }
}