/* ============================================================
   Общие токены раскладки и плотности таблиц (админка + worker)

   Политика таблиц и горизонтального переполнения (админка):
   - Широкие таблицы: горизонтальный скролл только внутри .table-wrap / .table-wrap--full
     (overflow-x: auto), не обрезать основные данные через overflow-x: clip на обёртке.
   - .layout > .content: overflow-x: hidden (style.css), чтобы не дублировать горизонтальный
     скролл на всём main; прокрутка — у вложенных .table-wrap.
   - У flex/grid-цепочки внутри контента сохранять min-width: 0 у детей, где возможно
     переполнение по ширине.
   - Длинные строки в ячейках: ellipsis в CSS + title (или отдельная деталь) в разметке.
   - Не задавать лишний min-width в px на таблицах с width:100% и table-layout: fixed,
     если ширина уже ограничена обёрткой со скроллом (см. страница сотрудников).
   - Карточный макет строк таблиц на узких экранах — отдельная задача, при необходимости.

   Прочее:
   - .table--orders: min-width и table-layout из переменных (≤1400 — уже в медиа токенов)
   - Плотность ячеек .table: --table-density-* (классическая «лестница» + classic-plus 2029)

   Каскад: ширина сайдбара classic-plus — только отсюда; padding .content — базовые
   значения здесь, при max-width 1200px — компактный ряд как в бывшем блоке ~2224.
   ============================================================ */

:root {
  /* Скругления кнопок, карточек, полей, вкладок (админка, виджет «Текущие дела», worker — см. style.css / worker.css) */
  --app-ui-radius: 5px;
  /* Дропдауны и выпадающие панели — как у белых блоков (.layout .block), слегка скруглённые, не острые */
  --app-ui-radius-dropdown: var(--app-ui-radius);
  /* Столбцы «Статус», бейджи — тот же радиус, что у карточек */
  --app-ui-radius-status: var(--app-ui-radius);

  --layout-sidebar-width: 248px;
  --layout-content-padding-y: 1.4rem;
  --layout-content-padding-x: 1.5rem;

  /* Глобальная плотность ячеек .table (слой до classic-plus 2029) */
  --table-density-padding-y: 0.75rem;
  --table-density-padding-x: 1rem;
  --table-density-font-size: 14px;

  /* Таблица заказов на пошив */
  --table-orders-min-width: 960px;
  --table-orders-layout: fixed;
  --table-orders-cell-padding-y: 0.5rem;
  --table-orders-cell-padding-x: 0.6rem;
  --table-orders-cell-font-size: 13px;
}

@media (max-width: 1400px) {
  :root {
    --layout-sidebar-width: 224px;
    /* .content padding на classic-plus задаётся позже «лестницы» 1125 — остаётся 1.4rem/1.5rem до 1200px */

    --table-density-padding-y: 0.5rem;
    --table-density-padding-x: 0.6rem;
    --table-density-font-size: 13px;

    --table-orders-min-width: 900px;
    --table-orders-layout: auto;
  }
}

@media (max-width: 1200px) {
  :root {
    --layout-sidebar-width: 204px;
    /* Совпадает с победившим правилом ~2224 (перекрывает .content у classic-plus) */
    --layout-content-padding-y: 1.1rem;
    --layout-content-padding-x: 1rem;

    --table-density-padding-y: 0.4rem;
    --table-density-padding-x: 0.5rem;
    --table-density-font-size: 12.5px;
  }
}

@media (max-width: 1024px) {
  :root {
    --layout-sidebar-width: 186px;
  }
}

@media (max-width: 900px) {
  :root {
    --layout-sidebar-width: 168px;

    --table-density-padding-y: 0.35rem;
    --table-density-padding-x: 0.45rem;
    --table-density-font-size: 12px;
  }
}

@media (max-width: 768px) {
  :root {
    --layout-sidebar-width: 152px;
  }
}

/* Телефоны: меньше полей у контента, удобнее горизонтальный скролл таблиц */
@media (max-width: 767px) {
  :root {
    --layout-content-padding-y: 0.75rem;
    --layout-content-padding-x: 0.65rem;
  }
}

/* Планшет 768–1024px: баланс между десктопом и телефоном */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --layout-sidebar-width: 200px;
    --layout-content-padding-y: 1rem;
    --layout-content-padding-x: 1rem;
    --table-density-padding-y: 0.42rem;
    --table-density-padding-x: 0.48rem;
    --table-density-font-size: 12.5px;
  }
}