/* ==========================================================================
   wide.css — рабочие экраны под окно ноутбука. v1 · 14.08.2026
   ---------------------------------------------------------------------------
   ЗАЧЕМ. Классический интерфейс (#root) свёрстан от телефона: рабочая область
   .content жёстко 860px (1000px на экранах ≥1400). На макбуке окно 1440–1512,
   и треть-половина экрана пустует, а касса и продажа ужаты в узкую колонку:
   товары идут по одному в строку, чеки — по одному, очередь кассы — списком.
   Здесь окно используется целиком, но не больше 1500px, чтобы строки не
   разъезжались на широких мониторах.

   ГРАНИЦЫ. Только ≥1025px: телефоны и планшеты уже разобраны в adaptive.css,
   их не трогаем. Все правила под #root — другие кабинеты (director.js,
   manager, service, buffet, acc-seller) рендерятся в своих хостах и не задеты.
   Файл подключается ПОСЛЕ style.css и adaptive.css.

   ОТКАТ: убрать <link> на wide.css из index.html — вернётся прежняя вёрстка.
   ========================================================================== */

@media (min-width:1025px){

  /* ── рабочая область по ширине окна ───────────────────────────────────── */
  #root .content{ max-width:min(1500px, 100%); padding:22px 26px; }

  /* ── ПРОДАВЕЦ · «Продажа»: товары сеткой, корзина не сжимается ─────────── */
  #root #prodList{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
    gap:10px;
    align-items:start;
  }
  #root #prodList > .prod{ margin-bottom:0; }
  #root .sale-layout{ gap:16px; }
  #root .sale-right{ width:330px; }

  /* ── ПРОДАВЕЦ · главная: колонка 560px рассчитана на телефон ───────────── */
  #root .shc-wrap{ max-width:860px !important; }

  /* ── КАССА (помощник) · «Оплата чеков»: чеки в два-три столбца ─────────── */
  #root #assistCards{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(370px, 1fr));
    gap:10px;
    align-items:start;
  }
  #root #assistCards > .card{ margin-bottom:0 !important; }

  /* ── КАССА (старший) · кокпит: пульс в ряд, очередь в два столбца ──────── */
  #root .ccx-pulse{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  #root .ccx-q{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
    gap:8px;
    align-items:start;
  }

  /* ── общее: широкие таблицы прокручиваются внутри себя, а не рвут страницу */
  #root .tblwrap, #root .table-wrap, #root .tbl-scroll{ overflow-x:auto; }
}

/* ── большой монитор: воздуха больше, корзина шире ─────────────────────────── */
@media (min-width:1500px){
  #root .content{ padding:24px 32px; }
  #root .sale-right{ width:360px; }
  #root #assistCards{ grid-template-columns:repeat(auto-fill, minmax(400px,1fr)); }
}

/* ── узкое окно (половина экрана макбука ≈ 761–1024) ──────────────────────
   Здесь работает adaptive.css и штатные правила style.css: товары идут
   списком, корзина 270px справа. Специально ничего не меняем — проверено,
   что раскладка не ломается и горизонтальной прокрутки нет.            */