/* =========================================================
   app-ultrawide.css
   Подключать ПОСЛЕ app-desktop.css
   Цель: аккуратное расширение «коробки» контента и
   лёгкое увеличение вертикального ритма на экранах
   шире Full HD (≥1921px) — без влияния на мобильные/обычные.
   Ничего не удаляет, только переопределяет.
   ========================================================= */

/* ---------- БАЗОВО: ≥ 1921px ---------- */
@media (min-width: 1921px){
  :root{
    /* делаем контент шире (public было ~1340px) */
    --container-wide: 1560px;
    --content-max: var(--container-wide);

    /* чуть шире закрепленный сайдбар на ультрашироких */
    --aside-w: 300px;              /* было ~280px */
    /* узкий (свернутый) оставляем комфортным */
    --aside-w-min: 72px;

    /* каплю больше «воздуха» в секциях */
    --pad-section: 2.25rem;
  }

  /* Коробки хедера/контента/футера тянутся до новой ширины */
  .app-bar,
  .page-inner,
  .ac-footer-sm .container,
  .ac-footer-sm .page-inner{
    max-width: var(--content-max) !important;
  }

  /* Дашборд: хедер и контент той же ширины */
  .layout-dashboard .page-inner{
    max-width: var(--content-max) !important;
  }

  /* Немного увеличим «масштаб» типографики для читаемости на расстоянии */
  h1{ font-size: clamp(32px, 2.8vw, 44px); }
  h2{ font-size: clamp(24px, 2.0vw, 32px); }
  h3{ font-size: clamp(18px, 1.4vw, 22px); }
  body, .site-body{ line-height: 1.78; }

  /* Карточки и таблицы получают чуть больше внутренних отступов */
  .card .card-body,
  .dashboard-section,
  .alert{
    padding: 1.25rem 1.25rem;
  }
  .table{ font-size: 1rem; }
  .table td, .table th{ padding: .9rem .85rem; }

  /* Графики повыше — визуальный баланс ширины */
  .chart-box{ height: 280px; }
  .chart-spark{ height: 72px; }

  /* KPI блоки — крупнее цифры, но без «кричащего» */
  .kpi-value{ font-size: clamp(22px, 1.6vw, 28px); }

  /* Футер-сетка — каплю просторнее */
  .footer-cols{ gap: 1.1rem; }
}

/* ---------- 2560px (WQHD/2.5K) ---------- */
@media (min-width: 2560px){
  :root{
    --container-wide: 1760px;      /* +200px от базового UW */
    --content-max: var(--container-wide);
    --aside-w: 320px;
  }
  .chart-box{ height: 320px; }
  .chart-spark{ height: 80px; }
  .card .card-body,
  .dashboard-section{ padding: 1.35rem 1.35rem; }
}

/* ---------- 2880px (UW 21:9, 3K) ---------- */
@media (min-width: 2880px){
  :root{
    --container-wide: 1880px;
    --content-max: var(--container-wide);
    --aside-w: 340px;
  }
  h1{ font-size: clamp(36px, 2.6vw, 48px); }
  h2{ font-size: clamp(26px, 1.9vw, 34px); }
  .chart-box{ height: 340px; }
}

/* ---------- 3440px (UWQHD 21:9) ---------- */
@media (min-width: 3440px){
  :root{
    --container-wide: 2080px;
    --content-max: var(--container-wide);
    --aside-w: 360px;
  }
  .chart-box{ height: 360px; }
  .table{ font-size: 1.04rem; }
}

/* ---------- 3840px (4K UHD) и шире ---------- */
@media (min-width: 3840px){
  :root{
    --container-wide: 2240px;      /* сохраняем «boxed» подход */
    --content-max: var(--container-wide);
    --aside-w: 380px;
  }
  .chart-box{ height: 380px; }
  .chart-spark{ height: 92px; }
  .kpi-value{ font-size: clamp(24px, 1.3vw, 30px); }
}

/* ---------- Общие ультраширокие полировки ---------- */
/* Сайдбар: при закреплении сдвигаем контент/хедер на новую ширину */
@media (min-width: 1921px){
  body.aside-pinned .layout-dashboard .page{
    margin-left: var(--aside-w) !important;
  }
  body.aside-pinned .app-bar-wrap--dashboard{
    margin-left: var(--aside-w) !important;
  }

  /* В свернутом состоянии — все механики остаются из базового файла */
  .layout-dashboard .fixed-aside{
    width: var(--aside-w-min);
  }
  .layout-dashboard .fixed-aside:hover{
    width: var(--aside-w);
  }
}

/* Секции на главной/публичных: чуть больше «воздуха» на UW */
@media (min-width: 1921px){
  .section{ padding: calc(var(--pad-section) + .25rem) 0; }
  .section-alt .container,
  .section-muted .container{
    padding: 1.25rem 1.25rem;
  }
}

/* Хедер (boxed): остаётся центрированным как и контент */
@media (min-width: 1921px){
  .app-bar{
    max-width: var(--content-max) !important;
    margin-inline: auto !important;
  }
}

/* Галерея/партнёры — чуть крупнее логотипы, чтобы не «тонуть» */
@media (min-width: 2560px){
  .partners-logos img{ max-height: 36px; }
}
@media (min-width: 3440px){
  .partners-logos img{ max-height: 40px; }
}

/* Формы: поля чуть выше на больших экранах — комфорт клика */
@media (min-width: 2560px){
  .form-control, .form-select{ padding-top: .7rem; padding-bottom: .7rem; }
}

/* Пагинация: крупнее кликабельные зоны */
@media (min-width: 2560px){
  .pagination .page-link{ padding: .6rem .9rem; }
}

/* Прогресс-бары: визуальный вес под ширину */
@media (min-width: 2560px){
  .progress{ height: 14px; }
  .progress-lg{ height: 18px; }
}

/* Таймлайн-маркеры — каплю заметнее */
@media (min-width: 2560px){
  .timeline::before{ width: 4px; }
  .timeline-item::before{ width: 1.1rem; height: 1.1rem; top: .22rem; }
}