/* ============================================================
   1С-Робот ЦБС — ДИЗАЙН-ЯЗЫК HeroUI  (внедрено 2026-09-15)

   Что это. HeroUI — React-библиотека на Tailwind; на ERB её не поставить.
   Поэтому здесь перенесён её ДИЗАЙН: палитра, радиусы, тени, шрифтовая
   шкала и вид компонентов (кнопка, чип, инпут, карточка, таблица, навбар).

   Как работает. Слой грузится ПОСЛЕДНИМ, поверх cbs.css + cbs-redesign.css.
   Сначала переопределяет их токены (--c-*, --fs-*, --radius-*, --shadow-*) —
   от этого перекрашиваются и те места, которые тут явно не описаны. Потом
   переопределяет сами компоненты.

   Откат: убрать <link> на heroui.css из layouts/*.html.erb. Ничего другого
   трогать не нужно — вьюхи не менялись.
   ============================================================ */

/* ============================================================
   1. ПАЛИТРА HeroUI (сырьё, в компонентах напрямую не использовать)
   Шкалы default / primary / secondary / success / warning / danger —
   как в теме HeroUI по умолчанию.
   ============================================================ */
:root {
  --h-default-50:  #fafafa;
  --h-default-100: #f4f4f5;
  --h-default-200: #e4e4e7;
  --h-default-300: #d4d4d8;
  --h-default-400: #a1a1aa;
  --h-default-500: #71717a;
  --h-default-600: #52525b;
  --h-default-700: #3f3f46;
  --h-default-800: #27272a;
  --h-default-900: #18181b;

  --h-primary-50:  #e6f1fe;
  --h-primary-100: #cce3fd;
  --h-primary-200: #99c7fb;
  --h-primary-300: #66aaf9;
  --h-primary-400: #338ef7;
  --h-primary-500: #006fee;
  --h-primary-600: #005bc4;
  --h-primary-700: #004493;
  --h-primary-800: #002e62;
  --h-primary-900: #001731;

  --h-secondary-50:  #f2eafa;
  --h-secondary-100: #e4d4f4;
  --h-secondary-200: #c9a9e9;
  --h-secondary-300: #ae7ede;
  --h-secondary-400: #9353d3;
  --h-secondary-500: #7828c8;
  --h-secondary-600: #6020a0;
  --h-secondary-700: #481878;
  --h-secondary-800: #301050;
  --h-secondary-900: #180828;

  --h-success-50:  #e8faf0;
  --h-success-100: #d1f4e0;
  --h-success-200: #a2e9c1;
  --h-success-300: #74dfa2;
  --h-success-400: #45d483;
  --h-success-500: #17c964;
  --h-success-600: #12a150;
  --h-success-700: #0e793c;
  --h-success-800: #095028;
  --h-success-900: #052814;

  --h-warning-50:  #fefce8;
  --h-warning-100: #fdedd3;
  --h-warning-200: #fbdba7;
  --h-warning-300: #f9c97c;
  --h-warning-400: #f7b750;
  --h-warning-500: #f5a524;
  --h-warning-600: #c4841d;
  --h-warning-700: #936316;
  --h-warning-800: #62420e;
  --h-warning-900: #312107;

  --h-danger-50:  #fee7ef;
  --h-danger-100: #fdd0df;
  --h-danger-200: #faa0bf;
  --h-danger-300: #f871a0;
  --h-danger-400: #f54180;
  --h-danger-500: #f31260;
  --h-danger-600: #c20e4d;
  --h-danger-700: #920b3a;
  --h-danger-800: #610726;
  --h-danger-900: #310413;

  /* Слои поверхностей HeroUI: content1 — карточка, дальше вложенность */
  --h-content1: #ffffff;
  --h-content2: #f4f4f5;
  --h-content3: #e4e4e7;
  --h-content4: #d4d4d8;

  --h-foreground: #11181c;
  --h-divider:    rgba(17, 24, 28, .15);
  --h-focus:      #006fee;

  /* Тени HeroUI: мягкие, широкие, с тонкой обводкой-ореолом */
  --h-shadow-sm: 0 0 5px 0 rgba(0,0,0,.02), 0 2px 10px 0 rgba(0,0,0,.06), 0 0 1px 0 rgba(0,0,0,.3);
  --h-shadow-md: 0 0 15px 0 rgba(0,0,0,.03), 0 2px 30px 0 rgba(0,0,0,.08), 0 0 1px 0 rgba(0,0,0,.3);
  --h-shadow-lg: 0 0 30px 0 rgba(0,0,0,.04), 0 30px 60px 0 rgba(0,0,0,.12), 0 0 1px 0 rgba(0,0,0,.3);
}

/* ---- Тёмная тема: у HeroUI фон чёрный, слои — серо-угольные,
        шкала default переворачивается (50 — самый тёмный) ---- */
:root[data-theme="dark"],
:root.theme-dark {
  --h-default-50:  #18181b;
  --h-default-100: #27272a;
  --h-default-200: #3f3f46;
  --h-default-300: #52525b;
  --h-default-400: #71717a;
  --h-default-500: #a1a1aa;
  --h-default-600: #d4d4d8;
  --h-default-700: #e4e4e7;
  --h-default-800: #f4f4f5;
  --h-default-900: #fafafa;

  --h-content1: #18181b;
  --h-content2: #27272a;
  --h-content3: #3f3f46;
  --h-content4: #52525b;

  --h-foreground: #ecedee;
  --h-divider:    rgba(255, 255, 255, .15);

  --h-shadow-sm: 0 0 5px 0 rgba(0,0,0,.05), 0 2px 10px 0 rgba(0,0,0,.2), inset 0 0 1px 0 rgba(255,255,255,.15);
  --h-shadow-md: 0 0 15px 0 rgba(0,0,0,.06), 0 2px 30px 0 rgba(0,0,0,.22), inset 0 0 1px 0 rgba(255,255,255,.15);
  --h-shadow-lg: 0 0 30px 0 rgba(0,0,0,.07), 0 30px 60px 0 rgba(0,0,0,.26), inset 0 0 1px 0 rgba(255,255,255,.15);
}

/* ============================================================
   2. ПЕРЕВОД СТАРЫХ ТОКЕНОВ НА HeroUI
   Здесь ключ ко всему: вьюхи и старые стили ссылаются на --c-*,
   --fs-*, --radius-*. Меняем значения — меняется весь сайт разом,
   включая экраны, до которых руки не дошли.
   ============================================================ */
:root {
  /* Поверхности */
  --c-bg:        var(--h-default-50);
  --c-surface:   var(--h-content1);
  --c-surface-2: var(--h-default-50);
  --c-surface-3: var(--h-default-100);
  --c-overlay:   rgba(0, 0, 0, .5);

  /* Границы: у HeroUI это один divider, без трёх градаций */
  --c-border:        var(--h-divider);
  --c-border-strong: var(--h-default-300);
  --c-border-weak:   var(--h-default-100);

  /* Текст */
  --c-text:         var(--h-foreground);
  --c-text-2:       var(--h-default-500);
  --c-text-3:       var(--h-default-400);
  --c-text-inverse: #ffffff;
  --c-text-link:    var(--h-primary-500);

  /* Акцент */
  --c-primary:        var(--h-primary-500);
  --c-primary-hover:  var(--h-primary-600);
  --c-primary-active: var(--h-primary-700);
  --c-primary-weak:   var(--h-primary-50);
  --c-primary-ring:   rgba(0, 111, 238, .35);
  --c-focus-ring:     var(--h-focus);

  /* Навбар: у HeroUI он светлый и полупрозрачный, а не тёмно-синий */
  --c-nav-bg:        rgba(255, 255, 255, .72);
  --c-nav-fg:        var(--h-default-500);
  --c-nav-fg-muted:  var(--h-default-400);
  --c-nav-active-bg: var(--h-default-100);
  --c-nav-active-fg: var(--h-foreground);
  --c-nav-border:    var(--h-divider);
  --c-nav-accent:    var(--h-primary-500);

  /* Статусы */
  --c-success:    var(--h-success-600);
  --c-success-bg: var(--h-success-50);
  --c-success-bd: var(--h-success-100);

  --c-warning:    var(--h-warning-600);
  --c-warning-bg: var(--h-warning-50);
  --c-warning-bd: var(--h-warning-100);

  --c-error:      var(--h-danger-600);
  --c-error-bg:   var(--h-danger-50);
  --c-error-bd:   var(--h-danger-100);

  --c-info:       var(--h-primary-600);
  --c-info-bg:    var(--h-primary-50);
  --c-info-bd:    var(--h-primary-100);

  --c-scheduled:    var(--h-secondary-500);
  --c-scheduled-bg: var(--h-secondary-50);
  --c-scheduled-bd: var(--h-secondary-100);

  --c-neutral:    var(--h-default-600);
  --c-neutral-bg: var(--h-default-100);
  --c-neutral-bd: var(--h-default-200);

  /* Типографика HeroUI: tiny 12 / small 14 / medium 16 / large 18.
     Интерфейс был на 13px — «бухгалтерская плотность»; стало крупнее
     и читаемее, это осознанная часть редизайна. */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;

  --lh-tight: 1.25;
  --lh-base:  1.5;

  /* Радиусы HeroUI: small .5rem / medium .75rem / large .875rem */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-pill: 9999px;

  /* Тени */
  --shadow-xs:   var(--h-shadow-sm);
  --shadow-sm:   var(--h-shadow-sm);
  --shadow-card: var(--h-shadow-md);
  --shadow-md:   var(--h-shadow-md);
  --shadow-lg:   var(--h-shadow-lg);

  /* Плотность: строки и контролы выше — под палец и под глаз */
  --row-h:        44px;
  --cell-pad-y:   10px;
  --cell-pad-x:   16px;
  --control-h:    36px;
  --control-h-md: 40px;

  --nav-h: 56px;
  --transition: 200ms cubic-bezier(.4, 0, .2, 1);
}

:root[data-theme="dark"],
:root.theme-dark {
  --c-bg:        #000000;
  --c-surface:   var(--h-content1);
  --c-surface-2: var(--h-content2);
  --c-surface-3: var(--h-content3);

  --c-border:        var(--h-divider);
  --c-border-strong: var(--h-default-300);
  --c-border-weak:   var(--h-default-100);

  --c-text:         var(--h-foreground);
  --c-text-2:       var(--h-default-500);
  --c-text-3:       var(--h-default-400);
  --c-text-inverse: #000000;
  --c-text-link:    var(--h-primary-400);

  --c-primary:       var(--h-primary-500);
  --c-primary-hover: var(--h-primary-400);
  --c-primary-weak:  rgba(0, 111, 238, .18);

  --c-nav-bg:        rgba(0, 0, 0, .72);
  --c-nav-active-bg: var(--h-default-100);

  --c-success:    var(--h-success-500); --c-success-bg: rgba(23, 201, 100, .16);  --c-success-bd: rgba(23, 201, 100, .3);
  --c-warning:    var(--h-warning-500); --c-warning-bg: rgba(245, 165, 36, .16);  --c-warning-bd: rgba(245, 165, 36, .3);
  --c-error:      var(--h-danger-500);  --c-error-bg:   rgba(243, 18, 96, .16);   --c-error-bd:   rgba(243, 18, 96, .3);
  --c-info:       var(--h-primary-400); --c-info-bg:    rgba(0, 111, 238, .16);   --c-info-bd:    rgba(0, 111, 238, .3);
  --c-scheduled:  var(--h-secondary-400); --c-scheduled-bg: rgba(147, 83, 211, .16); --c-scheduled-bd: rgba(147, 83, 211, .3);
  --c-neutral:    var(--h-default-600); --c-neutral-bg: var(--h-default-100);     --c-neutral-bd: var(--h-default-200);
}

/* ============================================================
   3. ОСНОВА СТРАНИЦЫ
   ============================================================ */
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

.cbs-app { background: var(--c-bg); }
.cbs-page,
.cbs-main { max-width: 1280px; margin: 0 auto; padding: var(--space-3) var(--space-6) var(--space-12); }

/* Фокус — фирменное кольцо HeroUI: 2px цвета focus с отступом 2px */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--h-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   4. НАВБАР
   Был тёмно-синий банковский; стал светлый, размытый, липкий —
   как Navbar у HeroUI.
   ============================================================ */
.cbs-nav {
  height: var(--nav-h);
  background: var(--c-nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-nav-border);
  padding: 0 var(--space-6);
  gap: var(--space-2);
}
.cbs-nav__brand {
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  padding-right: var(--space-4);
  margin-right: var(--space-2);
}
.cbs-nav__logo {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--h-primary-500);
  color: #fff; font-size: var(--fs-xs);
}
/* Без overflow: иначе выпадающее меню «Ещё» обрезается по краю панели */
.cbs-nav__links { gap: var(--space-1); align-items: center; flex: 0 0 auto; }
.cbs-nav__link {
  flex: none;
  height: 32px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--c-nav-fg);
  font-size: var(--fs-base); font-weight: var(--fw-medium);
}
.cbs-nav__link:hover { background: transparent; color: var(--c-text); }
.cbs-nav__link--active { color: var(--h-primary-500); font-weight: var(--fw-semibold); }
.cbs-nav__link--active::after { display: none; } /* у HeroUI активный пункт — цветом, без подчёркивания */

.cbs-nav__spacer { flex: 1; min-width: var(--space-4); }
.cbs-nav__tools { gap: var(--space-2); flex: none; }

/* ---- Выпадающее меню «Ещё» (нативный <details>, без скриптов) ---- */
.cbs-menu { position: relative; display: flex; align-items: center; flex: none; }
.cbs-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.cbs-menu > summary::-webkit-details-marker { display: none; }
.cbs-menu[open] > summary svg { transform: rotate(180deg); }
.cbs-menu > summary svg { transition: transform var(--transition); }
.cbs-menu__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: calc(var(--z-nav) + 1);
  min-width: 220px; padding: var(--space-2);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--h-shadow-lg);
}
.cbs-menu__item {
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--c-text); font-size: var(--fs-base); font-weight: var(--fw-medium);
  text-decoration: none; white-space: nowrap;
}
.cbs-menu__item:hover { background: var(--h-default-100); }
.cbs-menu__item--active { color: var(--h-primary-500); }
.cbs-menu__core { display: none; flex-direction: column; gap: 2px; }
.cbs-menu__sep { height: 1px; background: var(--c-border); margin: var(--space-2) 0; }
.cbs-vsep { background: var(--c-border); height: 20px; align-self: center; }

.cbs-user { border-radius: var(--radius-pill); padding: 4px 10px 4px 4px; }
.cbs-user:hover { background: var(--h-default-100); }
.cbs-user__avatar { width: 32px; height: 32px; background: var(--h-primary-500); color: #fff; font-size: var(--fs-sm); }
.cbs-user__name { color: var(--c-text); font-size: var(--fs-sm); }
.cbs-user__role { color: var(--c-text-3); font-size: var(--fs-xs); }
.cbs-faint { color: var(--c-text-3); }

/* ============================================================
   5. ШАПКА СТРАНИЦЫ И ХЛЕБНЫЕ КРОШКИ
   ============================================================ */
.cbs-crumbs {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--c-text-3);
  margin-bottom: 6px;
}
.cbs-crumbs a { color: var(--c-text-3); text-decoration: none; }
.cbs-crumbs a:hover { color: var(--h-primary-500); }

.cbs-pagehead { margin-bottom: var(--space-3); }
.cbs-pagehead h1 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  line-height: var(--lh-tight);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.cbs-pagehead .lede { margin-top: 2px; font-size: var(--fs-base); color: var(--c-text-2); }

/* ============================================================
   6. КАРТОЧКА
   HeroUI Card: без рамки, скруглённая, держится на тени.
   ============================================================ */
.cbs-card {
  background: var(--c-surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--h-shadow-md);
  overflow: hidden;
}
.cbs-card-head,
.cbs-card__header {
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: none;
}
.cbs-card-head h2, .cbs-card-head h3, .cbs-card-head .cbs-card__title,
.cbs-card__header h2, .cbs-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
}
.cbs-card-body,
.cbs-card__body { padding: var(--space-5); }
.cbs-card-head + .cbs-card-body,
.cbs-card__header + .cbs-card__body { padding-top: 0; }
.cbs-card-body--flush,
.cbs-card__body--flush { padding: 0; }
.cbs-card__footer { border-top: 1px solid var(--c-border); padding: var(--space-4) var(--space-5); }

/* Карточки подряд не слипаются — у HeroUI между ними всегда воздух */
.cbs-card + .cbs-card { margin-top: var(--space-4); }

/* Карточка-раскрывашка: заголовок кликабелен, стрелка своя */
details.cbs-card > summary { list-style: none; cursor: pointer; }
details.cbs-card > summary::-webkit-details-marker { display: none; }
details.cbs-card > summary:hover { background: var(--h-default-50); }
details.cbs-card[open] > summary .cbs-fold::after { content: "свернуть ▲"; }
details.cbs-card:not([open]) > summary .cbs-fold::after { content: "развернуть ▼"; }

/* ============================================================
   7. KPI-ПЛИТКА
   ============================================================ */
.cbs-kpi {
  background: var(--c-surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--h-shadow-md);
  padding: var(--space-5);
  gap: var(--space-3);
}
.cbs-kpi__label { font-size: var(--fs-sm); color: var(--c-text-2); }
.cbs-kpi__value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -.03em; }
.cbs-kpi__foot { font-size: var(--fs-sm); color: var(--c-text-3); }
.cbs-kpi--accent { border-top: none; background: var(--h-primary-50); }
.cbs-kpi--accent .cbs-kpi__value { color: var(--h-primary-600); }
.cbs-kpi--accent .cbs-kpi__label { color: var(--h-primary-600); }
.cbs-kpi__bar { height: 6px; background: var(--h-default-200); }
.cbs-kpi__bar > i { background: var(--h-primary-500); }

.cbs-grid { gap: var(--space-4); }

/* ============================================================
   8. ТАБЛИЦА
   HeroUI Table: шапка — плашка default-100 без линий, строки
   разделены тонким divider, ховер подсвечивает строку.
   ============================================================ */
.cbs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.cbs-table thead th {
  background: var(--h-default-100);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: 0;
  padding: var(--space-3) var(--cell-pad-x);
  border-bottom: none;
  white-space: nowrap;
}
.cbs-table thead th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cbs-table thead th:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cbs-table tbody td {
  padding: var(--cell-pad-y) var(--cell-pad-x);
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
  color: var(--c-text);
}
.cbs-table tbody tr:last-child td { border-bottom: none; }
.cbs-table tbody tr:hover td { background: var(--h-default-50); }
.cbs-table .num, .cbs-table .right { text-align: right; font-variant-numeric: tabular-nums; }
.cbs-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }

/* Таблица внутри карточки: если колонки не влезают — прокручивается сама,
   а не вылезает за скруглённый край. */
.cbs-card > .cbs-table { display: block; overflow-x: auto; min-width: 100%; }
.cbs-card > .cbs-table > thead,
.cbs-card > .cbs-table > tbody { display: table; width: 100%; }
.cbs-card > .cbs-table thead th:first-child,
.cbs-card > .cbs-table tbody td:first-child { padding-left: var(--space-4); }

/* ============================================================
   9. ЧИПЫ (бейджи статусов)
   HeroUI Chip, вариант flat: заливка цветом /20, текст — тёмный тон.
   ============================================================ */
.cbs-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px;
  border-radius: var(--radius-pill);
  border: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  background: var(--h-default-100);
  color: var(--c-text-2);
}
.cbs-b-done,  .cbs-badge--ok   { background: var(--c-success-bg);   color: var(--c-success); }
.cbs-b-error, .cbs-badge--err  { background: var(--c-error-bg);     color: var(--c-error); }
.cbs-b-progress                { background: var(--c-info-bg);      color: var(--c-info); }
.cbs-b-pending, .cbs-badge--wait { background: var(--c-warning-bg); color: var(--c-warning); }
.cbs-b-rerun                   { background: var(--c-scheduled-bg); color: var(--c-scheduled); }
.cbs-b-info                    { background: var(--c-info-bg);      color: var(--c-info); }
.cbs-b-soft                    { background: var(--h-default-100);  color: var(--c-text-2); }

/* ============================================================
   10. КНОПКИ
   Раскладка вариантов HeroUI:
     .cbs-btn            → flat (серая заливка) — рабочая лошадка
     .cbs-btn-primary    → solid primary
     .cbs-btn-secondary  → bordered
     .cbs-btn-ghost      → light (прозрачная)
     .cbs-btn-danger*    → solid / bordered danger
   ============================================================ */
.cbs-btn,
.cbs-btn-primary, .cbs-btn--primary,
.cbs-btn-secondary, .cbs-btn--secondary,
.cbs-btn-ghost, .cbs-btn--ghost,
.cbs-btn-danger, .cbs-btn-danger-outline,
button.cbs-btn, a.cbs-btn, input[type="submit"].cbs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-h);
  min-width: 0;
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition), background var(--transition), transform var(--transition);
}
.cbs-btn:active,
.cbs-btn-primary:active, .cbs-btn--primary:active,
.cbs-btn-secondary:active, .cbs-btn-ghost:active,
.cbs-btn-danger:active, .cbs-btn-danger-outline:active { transform: scale(.97); }

/* flat — по умолчанию */
.cbs-btn { background: var(--h-default-100); color: var(--c-text); }
.cbs-btn:hover { background: var(--h-default-200); }

/* solid primary */
.cbs-btn-primary, .cbs-btn--primary {
  background: var(--h-primary-500); color: #fff;
}
.cbs-btn-primary:hover, .cbs-btn--primary:hover { opacity: .82; background: var(--h-primary-500); color: #fff; }

/* bordered */
.cbs-btn-secondary, .cbs-btn--secondary {
  background: transparent; color: var(--c-text);
  box-shadow: inset 0 0 0 2px var(--h-default-200);
}
.cbs-btn-secondary:hover, .cbs-btn--secondary:hover { background: var(--h-default-50); }

/* light / ghost */
.cbs-btn-ghost, .cbs-btn--ghost { background: transparent; color: var(--c-text-2); }
.cbs-btn-ghost:hover, .cbs-btn--ghost:hover { background: var(--h-default-100); color: var(--c-text); }

/* danger */
.cbs-btn-danger { background: var(--h-danger-500); color: #fff; }
.cbs-btn-danger:hover { opacity: .82; }
.cbs-btn-danger-outline {
  background: transparent; color: var(--h-danger-500);
  box-shadow: inset 0 0 0 2px var(--h-danger-500);
}
.cbs-btn-danger-outline:hover { background: var(--c-error-bg); }

/* размеры */
.cbs-btn--sm { height: 30px; padding: 0 var(--space-3); font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.cbs-btn--icon { width: var(--control-h); padding: 0; border-radius: var(--radius-pill); }
.cbs-btn--lg { height: 44px; padding: 0 var(--space-6); font-size: var(--fs-md); border-radius: var(--radius-lg); }

.cbs-btn[disabled], .cbs-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* button_to оборачивает кнопку в <form> — не даём форме ломать строку */
form.button_to { display: inline-block; margin: 0; }

/* ============================================================
   11. ПОЛЯ ВВОДА
   HeroUI Input, вариант flat: заливка default-100, рамки нет,
   на фокусе — кольцо цвета focus.
   ============================================================ */
.cbs-input, .cbs-select, .cbs-textarea,
select.cbs-input, input.cbs-input, textarea.cbs-textarea {
  width: 100%;
  min-height: var(--control-h-md);
  padding: 0 var(--space-4);
  background: var(--h-default-100);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: background var(--transition), border-color var(--transition);
  box-shadow: none;
}
.cbs-textarea { padding: var(--space-3) var(--space-4); line-height: var(--lh-base); }
.cbs-input:hover, .cbs-select:hover, .cbs-textarea:hover { background: var(--h-default-200); border-color: transparent; }
.cbs-input:focus, .cbs-select:focus, .cbs-textarea:focus {
  outline: none;
  background: var(--h-default-100);
  border-color: var(--h-focus);
  box-shadow: none;
}
.cbs-input::placeholder, .cbs-textarea::placeholder { color: var(--c-text-3); }
.cbs-input--invalid { border-color: var(--h-danger-500); }

select.cbs-input, .cbs-select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

.cbs-checkbox { width: 18px; height: 18px; accent-color: var(--h-primary-500); }

/* ---- Поля БЕЗ класса cbs-input ----
   В старых вьюхах их много: где-то голый <select>, где-то свой класс вроде
   .rs-inp с background:#fff (который в тёмной теме даёт белое поле). Рядом со
   стилизованными полями такой контрол читается как сломанный, поэтому дизайн-
   система покрывает и его — класс на каждом поле требовать незачем. */
.cbs-main :is(select, textarea):not(.cbs-input):not(.cbs-select):not(.cbs-textarea),
.cbs-page :is(select, textarea):not(.cbs-input):not(.cbs-select):not(.cbs-textarea),
.cbs-main input:is([type="text"], [type="email"], [type="password"], [type="number"], [type="date"], [type="time"], [type="search"], [type="url"], [type="tel"]):not(.cbs-input),
.cbs-page input:is([type="text"], [type="email"], [type="password"], [type="number"], [type="date"], [type="time"], [type="search"], [type="url"], [type="tel"]):not(.cbs-input),
.rs-inp {
  min-height: var(--control-h-md);
  padding: 0 var(--space-4);
  background: var(--h-default-100);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-base);
  box-shadow: none;
}
.cbs-main :is(select, textarea, input):not(.cbs-input):focus,
.cbs-page :is(select, textarea, input):not(.cbs-input):focus,
.rs-inp:focus { outline: none; border-color: var(--h-focus); }

/* Нативная стрелка у select заменяется своей — иначе контрол остаётся
   системным и выбивается из остальной формы */
.cbs-main select:not(.cbs-input):not(.cbs-select),
.cbs-page select:not(.cbs-input):not(.cbs-select),
select.rs-inp {
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}
.cbs-main textarea:not(.cbs-textarea),
.cbs-page textarea:not(.cbs-textarea),
textarea.rs-inp { padding: var(--space-3) var(--space-4); line-height: var(--lh-base); }

.cbs-form-row { gap: 6px; margin-bottom: var(--space-4); }
.cbs-form-row .lbl, .lbl {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
}
.hint { font-size: var(--fs-sm); color: var(--c-text-3); margin-top: 0; }
.req { color: var(--h-danger-500); margin-left: 3px; }

/* ============================================================
   12. ССЫЛКИ И ТЕКСТОВЫЕ УТИЛИТЫ
   ============================================================ */
.cbs-link, a.cbs-link { color: var(--h-primary-500); text-decoration: none; font-weight: var(--fw-medium); }
.cbs-link:hover { opacity: .8; }
.cbs-muted, .muted { color: var(--c-text-2); font-size: var(--fs-sm); }
.cbs-mono { font-family: var(--font-mono); font-size: .92em; }
.lede { color: var(--c-text-2); }

/* ============================================================
   13. БАННЕРЫ / ФЛЕШ-СООБЩЕНИЯ
   HeroUI Alert: заливка цветом-50, без рамки, крупный радиус.
   ============================================================ */
.cbs-banner {
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  background: var(--h-default-100);
  color: var(--c-text);
}
.cbs-banner--success { background: var(--c-success-bg); color: var(--c-success); }
.cbs-banner--error   { background: var(--c-error-bg);   color: var(--c-error); }
.cbs-banner--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.cbs-banner--info    { background: var(--c-info-bg);    color: var(--c-info); }
.cbs-banner__text { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-medium); }

/* ============================================================
   14. ПУСТЫЕ СОСТОЯНИЯ, ФИЛЬТРЫ, ПРОЧЕЕ
   ============================================================ */
.cbs-empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--c-text-3);
  font-size: var(--fs-md);
}
.cbs-empty__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-text); margin-bottom: var(--space-2); }
.cbs-empty__text  { font-size: var(--fs-base); color: var(--c-text-3); }
.cbs-empty__icon  { font-size: 40px; opacity: .35; margin-bottom: var(--space-3); }

.cbs-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--c-surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--h-shadow-md);
  margin-bottom: var(--space-4);
}

.cbs-meter__track { height: 8px; border-radius: var(--radius-pill); background: var(--h-default-200); overflow: hidden; }
.cbs-meter__fill  { height: 100%; border-radius: inherit; background: var(--h-primary-500); }
.cbs-meter__val   { font-variant-numeric: tabular-nums; color: var(--c-text-2); font-size: var(--fs-sm); }

.cbs-svc { border-radius: var(--radius-pill); padding: 6px var(--space-4); background: var(--h-default-100); border: none; }
.cbs-svc__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); }
.cbs-svc__name { font-weight: var(--fw-medium); }
.cbs-svc__state { color: var(--c-text-2); font-size: var(--fs-sm); }

.cbs-drop {
  border: 2px dashed var(--h-default-300);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  background: var(--h-default-50);
}
.cbs-drop:hover { border-color: var(--h-primary-500); background: var(--h-primary-50); }

.cbs-article { font-size: var(--fs-md); line-height: 1.7; color: var(--c-text); }
.cbs-article h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -.02em; margin-top: var(--space-8); }
.cbs-article h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-top: var(--space-6); }
.cbs-article code { background: var(--h-default-100); border-radius: var(--radius-xs); padding: 2px 6px; font-family: var(--font-mono); font-size: .88em; }
.cbs-article pre { background: var(--h-default-100); border: none; border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; }

/* ============================================================
   15. МОДАЛКА
   ============================================================ */
.cbs-modal, .cbs-modal__panel, .cbs-dialog {
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--h-shadow-lg);
  background: var(--c-surface);
}
.cbs-modal__overlay, .cbs-overlay { background: var(--c-overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ============================================================
   16. УЗКИЙ ЭКРАН
   ============================================================ */
@media (max-width: 1280px) {
  /* Почта оператора в шапке — первое, чем можно пожертвовать: аватар остаётся */
  .cbs-user__meta { display: none; }
}

@media (max-width: 1120px) {
  /* Строка разделов перестала влезать — целиком уезжает под «Ещё».
     Без этого шапка вылезала за экран и тянула за собой всю страницу. */
  .cbs-nav__links > .cbs-nav__link { display: none; }
  .cbs-menu__core { display: flex; }
  .cbs-nav__brand span:last-child { display: none; }
  .cbs-nav__brand { padding-right: var(--space-2); margin-right: 0; }
  .cbs-vsep { display: none; }
}

@media (max-width: 900px) {
  .cbs-page, .cbs-main { padding: var(--space-5) var(--space-4) var(--space-12); }
  .cbs-nav { padding: 0 var(--space-4); }
  .cbs-menu__panel { left: auto; right: 0; }
  .cbs-pagehead h1 { font-size: var(--fs-xl); }
  /* Заголовок и кнопки действий встают друг под друга, а не внахлёст */
  .cbs-pagehead { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .cbs-pagehead__actions, .cbs-pagehead > div:last-child { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .cbs-filter { flex-direction: column; align-items: stretch; }
  .cbs-table-wrap, .cbs-card > .cbs-table { display: block; overflow-x: auto; }
}

/* ============================================================
   17. ПРОСТОЙ И РАСШИРЕННЫЙ ВИД
   По умолчанию экран показывает только то, чем пользуются каждый
   день. Всё остальное помечено классом cbs-adv и появляется по
   кнопке «Расширенный вид» в шапке.

   Правило: в cbs-adv уходит то, что нужно РЕЖЕ раза в неделю. Если
   колонка нужна ежедневно — её нельзя прятать, надо убирать совсем
   или переносить в карточку. Кнопка не должна стать свалкой.
   ============================================================ */
:root[data-vid="prosto"] .cbs-adv { display: none !important; }
:root[data-vid="prosto"] .cbs-vid-less { display: none; }
:root[data-vid="polno"]  .cbs-vid-more { display: none; }
:root[data-vid="polno"]  #vidToggle { background: var(--h-primary-50); color: var(--h-primary-600); }