/*
 * Прикладные классы кабинета. Инлайновые стили прототипа вынесены сюда без изменения значений:
 * та же сетка колонок, те же отступы, те же размеры шрифтов.
 */

/* ── шапка ──────────────────────────────────────────────────────────── */
.app-nav {
  display: flex; align-items: center; gap: 32px;
  padding: 0 32px; height: 64px;
  border-bottom: 2px solid var(--color-text);
  background: var(--color-bg);
}
.app-nav .brand {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: -0.01em;
}
.app-nav .links { display: flex; gap: 20px; font-size: 13px; font-weight: 600; }
.app-nav .links a { color: var(--color-text); padding: 4px 0; text-decoration: none; }
.app-nav .links a:hover, .app-nav .links a.active { color: var(--color-accent-700); }
.app-nav .spacer { flex: 1; }
.app-nav .org { font-size: 12px; text-align: right; color: var(--color-neutral-700); }
.app-nav .org b { display: block; font-weight: 600; color: var(--color-text); }
.app-nav .logout {
  background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--color-neutral-700); padding: 4px 0;
}
.app-nav .logout:hover { color: var(--color-accent-700); }

/* ── страница ───────────────────────────────────────────────────────── */
.page { padding: 32px 32px 140px; }
.page-narrow { max-width: 1180px; }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-bottom: 2px solid var(--color-text); padding-bottom: 16px; margin-bottom: 20px;
}
.kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 6px;
}
.page-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 34px;
  letter-spacing: -0.02em; margin: 0;
}
.page-count { font-size: 12px; color: var(--color-neutral-700); text-align: right; }
.muted { color: var(--color-neutral-700); }
.small { font-size: 12px; }

.section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 2px solid var(--color-text); padding-bottom: 8px; margin-bottom: 14px;
}

#error {
  border-left: 2px solid var(--color-accent); background: var(--color-accent-100);
  color: var(--color-accent-800); padding: 10px 14px; margin-bottom: 16px; font-size: 13px;
}

/* ── каталог ────────────────────────────────────────────────────────── */
/* сайдбар слева, каталог справа. Внутри сайдбара сверху вниз: поиск, фильтры
   (супер цена / в наличии / сортировка / свернуть размеры), бренд, затем категория */
.catalog-layout { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start; }
.facets {
  border-right: 2px solid var(--color-divider); padding-right: 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.field-search { margin-bottom: 0; }
.facet-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 10px;
}
.facet-list { display: flex; flex-direction: column; gap: 2px; }
.facet-btn {
  background: none; border: 0; font: inherit; cursor: pointer; color: var(--color-text);
  text-align: left; padding: 6px 8px; width: 100%;
}
.facet-btn:hover { color: var(--color-accent-700); }
.facet-btn.is-active { color: var(--color-accent-700); font-weight: 700; }
.facet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.facet-head .facet-title { margin-bottom: 0; }
.facet-head + .brand-search { margin-top: 10px; }
.facet-note {
  border-top: 2px solid var(--color-text); padding-top: 12px;
  font-size: 12px; color: var(--color-neutral-700); text-wrap: pretty;
}

/* Фильтр «Бренд»: логотип · название · число позиций. Список длинный (в справочнике
   больше двухсот брендов), поэтому он ограничен по высоте и прокручивается внутри себя. */
.brand-search { margin-bottom: 8px; }
.brand-list {
  display: flex; flex-direction: column; gap: 2px;
  /* высоты хватает на свёрнутый список целиком (BRANDS_PREVIEW позиций по 50px),
     прокрутка появляется только у развёрнутого */
  max-height: 420px; overflow-y: auto; overscroll-behavior: contain;
}
.brand-item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
  background: none; border: 0; font: inherit; cursor: pointer; color: var(--color-text);
  text-align: left; padding: 4px 8px 4px 4px; width: 100%; border-radius: 8px;
}
.brand-item:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.brand-item.is-active { background: var(--color-accent-100); }
.brand-item.is-active .brand-name { color: var(--color-accent-800); font-weight: 700; }
.brand-logo {
  width: 40px; height: 40px; border-radius: 8px; object-fit: contain;
  border: 1px solid var(--color-neutral-300); background: var(--color-surface);
}
.brand-logo-empty {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 0.02em;
  color: var(--color-neutral-700);
}
.brand-name { font-size: 14px; line-height: 1.2; }
.brand-count { font-size: 11px; color: var(--color-neutral-600); }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.checkline input { accent-color: var(--color-accent); width: 16px; height: 16px; }

.toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 10px; }
.toolbar .btn { font-size: 12px; padding: 6px 12px; }

.grid-row {
  display: grid;
  grid-template-columns: 96px minmax(190px, 1fr) 76px 132px 70px 124px 92px;
  gap: 10px;
}
.grid-head {
  padding: 10px 12px; border-bottom: 2px solid var(--color-text);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.model-row {
  padding: 8px 12px; border-bottom: 1px solid var(--color-divider); align-items: center;
}
.var-row {
  padding: 3px 12px; border-bottom: 1px solid var(--color-neutral-300); align-items: center;
  background: var(--color-surface); font-size: 13px;
}
.model-name { font-weight: 700; font-size: 15px; }
.model-meta { font-size: 12px; color: var(--color-neutral-700); }
.model-tags { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.linkish {
  background: none; border: 0; font: inherit; cursor: pointer; color: var(--color-text);
  padding: 2px 0; font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--color-accent-700); }
.thumb {
  width: 96px; height: 96px; border: 1px solid var(--color-neutral-400);
  background: var(--color-surface); object-fit: cover;
}
.thumb-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--color-neutral-600); text-transform: uppercase; letter-spacing: 0.08em;
}
.price-main { font-family: var(--font-heading); font-weight: 800; font-size: 16px; line-height: 1.1; }
.price-old { font-size: 11px; color: var(--color-neutral-600); text-decoration: line-through; }
.disc { font-weight: 700; color: var(--color-accent-700); }
.num { text-align: right; font-weight: 700; }
.var-name { display: flex; gap: 10px; align-items: baseline; padding-left: 16px; }
.var-name .size { font-weight: 700; min-width: 84px; }
.var-name .sku { font-size: 12px; font-family: ui-monospace, monospace; color: var(--color-neutral-700); }

.qty { display: flex; gap: 4px; align-items: center; }
.qty .btn { padding: 2px 8px; min-width: 28px; font-size: 13px; }
.qty input { width: 56px; padding: 3px 6px; text-align: center; font-size: 13px; }
.qty-lg .btn { padding: 4px 10px; min-width: 32px; }
.qty-lg input { width: 62px; padding: 5px 8px; }

.empty-state { padding: 48px 12px; color: var(--color-neutral-700); }

/* ── панель расчёта ─────────────────────────────────────────────────── */
.summary { border: 2px solid var(--color-text); padding: 20px; }
.summary h2 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 14px; font-family: var(--font-body);
}
.sum-list { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.sum-list > div { display: flex; justify-content: space-between; gap: 12px; }
.sum-list .divide { border-top: 1px solid var(--color-divider); padding-top: 8px; }
.sum-list b { font-weight: 700; }
.sum-list .accent { font-weight: 700; color: var(--color-accent-700); }
.sum-strike { text-decoration: line-through; color: var(--color-neutral-600); }
.sum-total {
  border-top: 2px solid var(--color-text); margin-top: 14px; padding-top: 12px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.sum-total .label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.sum-total .value { font-family: var(--font-heading); font-weight: 800; font-size: 26px; }
.benefit-box { background: var(--color-accent); color: #fff; padding: 14px; margin-top: 14px; }
.benefit-box .label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9;
}
.benefit-box .value {
  font-family: var(--font-heading); font-weight: 800; font-size: 30px; line-height: 1.1; margin-top: 4px;
}
.benefit-box .hint { font-size: 12px; margin-top: 4px; opacity: 0.9; }

/* ── шкала уровней ──────────────────────────────────────────────────── */
.progress { position: relative; height: 8px; background: var(--color-neutral-300); }
.progress .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-accent); }
.progress .tick {
  position: absolute; top: -3px; width: 2px; height: 14px;
  background: var(--color-text); transform: translateX(-2px);
}
.progress-labels { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; }
.progress-labels span { font-size: 10px; white-space: nowrap; color: var(--color-neutral-700); }

.tier-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--color-bg); border-top: 2px solid var(--color-text);
  padding: 14px 32px; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 220px 1fr 260px 200px; gap: 32px; align-items: center;
}
.tier-bar .label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.tier-bar .pct {
  font-family: var(--font-heading); font-weight: 800; font-size: 28px; color: var(--color-accent-700);
}
.tier-bar .benefit { border-left: 2px solid var(--color-text); padding-left: 16px; }
.tier-bar .benefit .value { font-family: var(--font-heading); font-weight: 800; font-size: 26px; }
.tier-bar .cta { display: flex; flex-direction: column; gap: 4px; }
.tier-bar .bar-head {
  display: flex; justify-content: space-between; gap: 16px; font-size: 12px; margin-bottom: 6px;
}
.tier-bar .bar-head .goal { color: var(--color-accent-700); font-weight: 600; text-align: right; }

/* ── вход ───────────────────────────────────────────────────────────── */
.login-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.login-pitch {
  padding: 64px; border-right: 2px solid var(--color-text);
  display: flex; flex-direction: column; justify-content: space-between;
}
.login-pitch .logo { font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.login-pitch h1 {
  font-family: var(--font-heading); font-weight: 800; font-size: 56px; line-height: 1.02;
  letter-spacing: -0.03em; margin: 0 0 24px;
}
.login-pitch .lead { max-width: 420px; color: var(--color-neutral-800); text-wrap: pretty; }
.login-facts { display: flex; gap: 32px; border-top: 2px solid var(--color-text); padding-top: 16px; }
.login-facts .num { font-family: var(--font-heading); font-weight: 800; font-size: 24px; text-align: left; }
.login-form-side { padding: 64px; display: flex; align-items: center; }
.login-form { width: 100%; max-width: 380px; }
.login-form h2 {
  font-family: var(--font-heading); font-weight: 800; font-size: 28px;
  letter-spacing: -0.02em; margin: 0 0 4px;
}
.login-help {
  border-top: 2px solid var(--color-text); margin-top: 28px; padding-top: 12px;
  font-size: 12px; color: var(--color-neutral-700);
}

/* ── карточка модели ────────────────────────────────────────────────── */
.model-layout { display: grid; grid-template-columns: 440px 1fr; gap: 40px; align-items: start; }
.model-photo { border: 2px solid var(--color-text); aspect-ratio: 1 / 1; background: var(--color-surface); }
/* contain, а не cover: в квадратной области кадры других пропорций обрезались бы по краям.
   Тот же приём, что у логотипов брендов (.brand-logo). */
.model-photo img, .model-photo .thumb-empty { width: 100%; height: 100%; object-fit: contain; }

/* галерея показывается только при нескольких фото — разметку строит model.html */
.model-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px; margin-top: 8px;
}
.model-gallery button {
  aspect-ratio: 1 / 1; padding: 0; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-neutral-400);
}
.model-gallery button:hover { border-color: var(--color-neutral-700); }
.model-gallery button.is-active { border: 2px solid var(--color-text); }
.model-gallery img { display: block; width: 100%; height: 100%; object-fit: contain; }

.model-desc { color: var(--color-neutral-800); max-width: 560px; text-wrap: pretty; }
.model-desc p { margin: 0 0 10px; }
/* :last-child, а не :last-of-type — первый абзац остаётся с отступом, потому что за ним
   идёт кнопка, а раскрытые абзацы — внутри #desc-rest и обнуляются там же */
.model-desc p:last-child { margin-bottom: 0; }
/* запасной случай: описание пришло одной строкой и делить на абзацы нечего (D-039) */
.model-desc .clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5;
  overflow: hidden;
}
.model-desc .desc-toggle { margin-top: 4px; }
.matrix-row {
  display: grid; grid-template-columns: 90px minmax(120px, 1fr) 70px 130px 64px 126px 92px;
  gap: 8px; align-items: center;
}
.matrix-head {
  padding: 8px 0; border-bottom: 1px solid var(--color-divider);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.matrix-body { padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.callout {
  background: var(--color-surface); border-left: 2px solid var(--color-text);
  padding: 10px 14px; font-size: 13px; text-wrap: pretty;
}

/* ── корзина ────────────────────────────────────────────────────────── */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.cart-row { display: grid; grid-template-columns: 1fr 135px 70px 130px 110px 40px; gap: 10px; align-items: center; }
.cart-head { padding: 8px 0; border-bottom: 2px solid var(--color-text);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cart-body { padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.cart-sum { text-align: right; font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.cart-role { font-size: 12px; color: var(--color-accent-700); font-weight: 600; margin-top: 2px; }
.icon-btn {
  background: none; border: 0; font: inherit; cursor: pointer; color: var(--color-text); padding: 2px 4px;
}
.icon-btn:hover { color: var(--color-accent-700); }

/* ── оформление ─────────────────────────────────────────────────────── */
.requisites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; font-size: 13px; }
.requisites .label { color: var(--color-neutral-700); font-size: 12px; }
.requisites .value { font-weight: 700; }
.ship-option {
  background: none; border: 0; font: inherit; cursor: pointer; color: var(--color-text);
  text-align: left; padding: 12px; border-bottom: 1px solid var(--color-divider); width: 100%;
}
.ship-option:hover { color: var(--color-accent-700); }
.ship-option .name { font-weight: 700; display: block; }
.ship-option .hint {
  display: block; font-size: 12px; font-weight: 400; color: var(--color-neutral-700);
}

/* ── заказ создан ───────────────────────────────────────────────────── */
.done-number {
  font-family: var(--font-heading); font-weight: 800; font-size: 48px;
  letter-spacing: -0.03em; margin: 10px 0 8px;
}
.done-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text);
  padding: 20px 0; margin: 28px 0;
}
.done-facts .value { font-family: var(--font-heading); font-weight: 800; font-size: 22px; }
.status-ribbon { display: flex; margin-bottom: 32px; }
.status-ribbon > div { flex: 1; padding: 8px 12px; border-left: 1px solid var(--color-divider); color: var(--color-neutral-600); }
.status-ribbon > div.is-current { border-left: 2px solid var(--color-accent); color: var(--color-text); }
.status-ribbon > div.is-current .name { color: var(--color-accent-700); font-weight: 700; }
.status-ribbon .name { font-weight: 600; }
.status-ribbon .when { font-size: 12px; }

/* ── история заказов ────────────────────────────────────────────────── */
.orders-row {
  display: grid; grid-template-columns: 120px 110px 100px 150px 150px 1fr 140px;
  gap: 12px; align-items: center;
}
.orders-head { padding: 8px 0; border-bottom: 2px solid var(--color-text);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.orders-body { padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
.orders-body .no { font-family: var(--font-heading); font-weight: 800; }

/* ── административный раздел ────────────────────────────────────────── */
.admin-toolbar {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px;
}
.admin-toolbar .field { flex: 1 1 280px; max-width: 420px; }
.admin-toolbar .spacer { flex: 1; }

/* Клиенты: ИНН · наименование · регион · условия · статус · действия */
.clients-row {
  display: grid; grid-template-columns: 130px minmax(200px, 1fr) 190px 150px 130px 210px;
  gap: 12px; align-items: center;
}
/* Поставщики: название · ИНН · номенклатура · условия · статус · действия */
.suppliers-row {
  display: grid; grid-template-columns: minmax(200px, 1fr) 130px 140px 130px 120px 210px;
  gap: 12px; align-items: center;
}
/* Пользователи: логин · роль · вход · статус · действия */
.users-row {
  display: grid; grid-template-columns: minmax(160px, 1fr) 160px 180px 140px 300px;
  gap: 12px; align-items: center;
}
/* Уровни скидок: название · порог · скидка · статус · действия */
.tiers-row {
  display: grid; grid-template-columns: minmax(160px, 1fr) 160px 120px 130px 210px;
  gap: 12px; align-items: center;
}
/* Категории: название · моделей · статус · действия */
.categories-row {
  display: grid; grid-template-columns: minmax(200px, 1fr) 140px 140px 160px;
  gap: 12px; align-items: center;
}
/* Бренды: логотип · название · моделей · ссылка · действия */
.brands-row {
  display: grid; grid-template-columns: 56px minmax(160px, 1fr) 100px minmax(200px, 1.2fr) 220px;
  gap: 12px; align-items: center;
}
.brands-row .brand-url { overflow-wrap: anywhere; }
.admin-head {
  padding: 8px 0; border-bottom: 2px solid var(--color-text);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.admin-body { padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.admin-body:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.admin-body .key { font-family: ui-monospace, monospace; font-size: 13px; }
.admin-body .title { font-weight: 700; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.row-actions .btn { font-size: 12px; padding: 4px 10px; }

.state { font-size: 12px; font-weight: 600; }
.state-ok { color: var(--color-accent-700); }
.state-off { color: var(--color-neutral-600); }

/* Условия по поставщикам внутри карточки клиента */
.terms-row {
  display: grid; grid-template-columns: minmax(160px, 1fr) 110px 120px 1fr 150px;
  gap: 12px; align-items: center;
}
.pct-tag {
  display: inline-flex; font-family: var(--font-heading); font-weight: 800; font-size: 15px;
}
.pct-down { color: var(--color-accent-700); }
.pct-up { color: var(--color-neutral-800); }

.detail-grid { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: start; }
.detail-card { border: 2px solid var(--color-text); padding: 20px; }
.detail-list { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.detail-list .label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-700); }
.detail-list .value { font-weight: 600; }

/* ── диалог: поля и опасное действие ────────────────────────────────── */
.dialog-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.dialog-error {
  border-left: 2px solid var(--color-accent); background: var(--color-accent-100);
  color: var(--color-accent-800); padding: 8px 12px; margin-bottom: 14px; font-size: 13px;
}
.field-hint { font-size: 11px; color: var(--color-neutral-700); margin-top: 4px; }
.btn-danger { background: var(--color-accent-800); color: var(--color-bg); }
.btn-danger:hover:not(:disabled) { background: var(--color-accent-900); }
.secret-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); padding: 16px 0;
}
.secret-grid .label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 4px; }
.secret-grid .value {
  font-family: ui-monospace, monospace; font-size: 18px; font-weight: 700; word-break: break-all;
}

/* ── уведомление ────────────────────────────────────────────────────── */
.notice {
  position: fixed; left: 50%; top: 24px; transform: translateX(-50%); z-index: 40;
  background: var(--color-text); color: var(--color-bg);
  padding: 12px 20px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg);
}

/* ── адаптив: критический путь должен работать на мобильном (AT-UX-03) ── */
@media (max-width: 1100px) {
  .tier-bar { grid-template-columns: 1fr 1fr; gap: 16px; }
  .tier-bar .benefit { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .page { padding: 20px 16px 200px; }
  .catalog-layout, .cart-layout, .model-layout { grid-template-columns: 1fr; gap: 20px; }
  /* В одну колонку квадрат растянулся бы на всю ширину и вытеснил размерную матрицу.
     Ограничение по 100vw, а не по 100%: в одноколоночной сетке ширину колонки задаёт
     самый широкий элемент — размерная матрица с фиксированными колонками, — и от неё
     фото унаследовало бы ширину больше экрана. 32px — горизонтальные поля .page. */
  .model-media { max-width: min(420px, calc(100vw - 32px)); }
  .facets { border-right: 0; padding-right: 0; border-bottom: 2px solid var(--color-divider); padding-bottom: 20px; }
  .login-split { grid-template-columns: 1fr; }
  .login-pitch { display: none; }
  .login-form-side { padding: 32px 20px; }
  .app-nav { gap: 16px; padding: 0 16px; overflow-x: auto; }
  .app-nav .org { display: none; }
  /* широкие таблицы прокручиваются горизонтально, а не ломают страницу */
  .table-scroll { overflow-x: auto; }
  .table-scroll > * { min-width: 900px; }
  .done-facts { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  /* таблицы админки шире экрана: прокручиваем, а не ломаем вёрстку (AT-UX-03) */
  .clients-row, .suppliers-row, .users-row, .terms-row, .tiers-row, .categories-row,
  .brands-row { min-width: 900px; }
  .secret-grid { grid-template-columns: 1fr; }
  /* лента статусов прокручивается, а не прячется: информация не должна теряться (AT-UX-03) */
  .status-ribbon { overflow-x: auto; }
  .status-ribbon > div { min-width: 140px; }
}