/* ============================================================================
   Агентхаб — админ-консоль · КОМПОНЕНТЫ (зеркало portal/ds/components.css)
   Источник истины — portal/ds/components.css (DS «Linear-тема НУБЕС»,
   спека portal/ds/README.md); копия для origin админ-SPA, синхронизировать
   вручную при изменениях. Использует ТОЛЬКО семантические токены
   ds/tokens.css — компоненты теме-агностичны.

   Агентхаб — дизайн-система портала v1 · КОМПОНЕНТЫ (эталонный код)
   Спека: portal/ds/README.md · Витрина со состояниями: portal/styleguide.html
   Использует ТОЛЬКО семантические токены из portal/ds/tokens.css — компоненты
   теме-агностичны: тёмная тема (primary, по умолчанию) и светлая (secondary)
   переключаются атрибутом data-theme на <html>, компоненты не меняются.

   Состав: Select · Input/Textarea · Field · Card · Button · Badge · Table ·
           EmptyState · Toolbar · Segment.

   ПРАВИЛА (жёсткие):
   - Лейблы ВСЕГДА сверху (см. .ds-field).
   - Голые нативные <select> запрещены: любой select — внутри .ds-select.
   - Новые hex-цвета запрещены — только токены.
   - Отступы кратны 4/8; границы тонкие 1px.
   Префикс ds- исключает коллизии с легаси-классами; миграция экранов —
   поэкранно (первыми: навигация/сайдбар, Обзор, Чат, БЗ; далее по касанию).
   ========================================================================== */

/* ── 1. Select — единый селект (закрывает все нативные) ────────────────── */
/* Обёртка обязательна: рисует рамку и шеврон, сам <select> бесшовный.
   Вариант по умолчанию (md) — в формах; .ds-select--sm — тулбары/таблицы;
   .ds-select--pill — пилюля для тулбара (как «Структура», но единый код). */
.ds-select{position:relative;display:inline-flex;max-width:100%;vertical-align:top}
.ds-select__control{
  appearance:none;-webkit-appearance:none;
  width:100%;min-width:0;
  font-family:var(--ds-font);font-size:var(--ds-ctl-fs-md);color:var(--ds-text);
  background:var(--ds-surface) var(--ds-chevron) no-repeat right var(--ds-s3) center;
  border:var(--ds-border);border-radius:var(--ds-r-md);
  padding:var(--ds-ctl-pad-y-md) 32px var(--ds-ctl-pad-y-md) var(--ds-ctl-pad-x-md);
  cursor:pointer;transition:border-color var(--ds-transition),background-color var(--ds-transition);
  text-overflow:ellipsis;
}
.ds-select__control:hover{border-color:var(--ds-line-strong)}
.ds-select__control:focus{outline:2px solid var(--ds-focus-color);outline-offset:-1px}
.ds-select__control:disabled{opacity:var(--ds-disabled-opacity);cursor:default}
/* маленький (тулбары, таблицы, шаги) */
.ds-select--sm .ds-select__control{font-size:var(--ds-ctl-fs-sm);padding:var(--ds-ctl-pad-y-sm) 28px var(--ds-ctl-pad-y-sm) var(--ds-ctl-pad-x-sm)}
/* пилюля тулбара: бесшовный select внутри рамки-пилюли, шеврон свой */
.ds-select--pill .ds-select__control{
  border:0;background:transparent;
  padding:var(--ds-ctl-pad-y-sm) 26px var(--ds-ctl-pad-y-sm) var(--ds-s2);
  font-size:var(--ds-fs-body);max-width:260px;
}
.ds-select--pill .ds-select__control:focus{outline-offset:0;border-radius:var(--ds-r-md)}
/* состояние ошибки (ставится на .ds-select) */
.ds-select.ds-error .ds-select__control{border-color:var(--ds-danger)}
.ds-select--pill.ds-error .ds-select__control{border:0}

/* ── 2. Input / Textarea — те же метрики, что у Select ─────────────────── */
.ds-input,.ds-textarea{
  width:100%;min-width:0;
  font-family:var(--ds-font);font-size:var(--ds-ctl-fs-md);color:var(--ds-text);
  background:var(--ds-surface);
  border:var(--ds-border);border-radius:var(--ds-r-md);
  padding:var(--ds-ctl-pad-y-md) var(--ds-ctl-pad-x-md);
  transition:border-color var(--ds-transition);
}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--ds-text-muted)}
.ds-input:hover,.ds-textarea:hover{border-color:var(--ds-line-strong)}
.ds-input:focus,.ds-textarea:focus{outline:2px solid var(--ds-focus-color);outline-offset:-1px}
.ds-input:disabled,.ds-textarea:disabled{opacity:var(--ds-disabled-opacity);cursor:default;background:var(--ds-surface-2)}
.ds-input.ds-error,.ds-textarea.ds-error{border-color:var(--ds-danger)}
.ds-textarea{resize:vertical;min-height:56px;line-height:var(--ds-lh)}
/* моно-данные: id, uuid, ключи, цифры в таблицах */
.ds-mono{font-family:var(--ds-mono);font-size:var(--ds-fs-small);color:var(--ds-text-secondary);font-variant-numeric:tabular-nums}

/* ── 3. Field — лейбл ВСЕГДА сверху + контрол + hint/error ─────────────── */
.ds-field{display:flex;flex-direction:column;gap:var(--ds-s1);min-width:0;margin-bottom:var(--ds-s3)}
.ds-field__label{font-size:var(--ds-fs-small);font-weight:500;color:var(--ds-text-secondary);line-height:1.35}
.ds-field__req{color:var(--ds-danger);margin-left:2px}
.ds-field__hint{font-size:var(--ds-fs-caption);color:var(--ds-text-muted);line-height:1.45}
.ds-field__error{font-size:var(--ds-fs-caption);color:var(--ds-danger);line-height:1.45}
.ds-field--error .ds-field__label{color:var(--ds-danger)}
/* .ds-field__hint | .ds-field__error показываются взаимоисключающе */

/* ── 4. Card — панель/карточка ─────────────────────────────────────────── */
.ds-card{background:var(--ds-surface);border:var(--ds-border);border-radius:var(--ds-r-lg);box-shadow:var(--ds-shadow-sm);min-width:0}
.ds-card__header{display:flex;align-items:center;gap:var(--ds-s2);padding:var(--ds-s4);border-bottom:var(--ds-border)}
.ds-card__title{font-size:var(--ds-fs-h3);font-weight:500;color:var(--ds-text);line-height:1.35;word-break:break-word}
.ds-card__actions{margin-left:auto;display:flex;gap:var(--ds-s2);flex:none;flex-wrap:wrap;justify-content:flex-end}
.ds-card__body{padding:var(--ds-s4);color:var(--ds-text)}
.ds-card__footer{padding:var(--ds-s3) var(--ds-s4);border-top:var(--ds-border);background:var(--ds-surface-2);border-radius:0 0 var(--ds-r-lg) var(--ds-r-lg)}

/* ── 5. Button — primary / secondary / ghost / danger ──────────────────── */
.ds-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-s2);
  font-family:var(--ds-font);font-size:var(--ds-fs-body);font-weight:500;line-height:1.2;
  border:0;border-radius:var(--ds-r-md);padding:9px 18px;cursor:pointer;text-decoration:none;
  transition:background-color var(--ds-transition),border-color var(--ds-transition),color var(--ds-transition);
}
.ds-btn:focus{outline:2px solid var(--ds-focus-color);outline-offset:2px}
.ds-btn:disabled{opacity:var(--ds-disabled-opacity);cursor:default}
.ds-btn--primary{background:var(--ds-accent);color:var(--ds-text-invert)}
.ds-btn--primary:hover:not(:disabled){background:var(--ds-accent-hover)}
.ds-btn--secondary{background:var(--ds-surface);color:var(--ds-text);border:var(--ds-border)}
.ds-btn--secondary:hover:not(:disabled){border-color:var(--ds-accent);background:var(--ds-accent-muted)}
.ds-btn--ghost{background:transparent;color:var(--ds-text-secondary)}
.ds-btn--ghost:hover:not(:disabled){background:var(--ds-tint-bg);color:var(--ds-text)}
.ds-btn--danger{background:var(--ds-surface);color:var(--ds-danger);border:var(--ds-border)}
.ds-btn--danger:hover:not(:disabled){border-color:var(--ds-danger);background:var(--ds-danger-bg)}
/* маленький — в строках таблиц и плотных местах */
.ds-btn--sm{padding:4px 12px;font-size:var(--ds-fs-small);border-radius:var(--ds-r-sm)}
/* иконка внутри кнопки */
.ds-btn svg{width:var(--ds-icon-size);height:var(--ds-icon-size);flex:none}

/* ── 6. Badge — статусный чип ──────────────────────────────────────────── */
.ds-badge{
  display:inline-block;font-size:var(--ds-fs-caption);font-weight:500;line-height:1.2;
  padding:3px 9px;border-radius:var(--ds-r-pill);white-space:nowrap;vertical-align:1px;
}
.ds-badge--neutral{background:var(--ds-tint-bg);color:var(--ds-text-secondary)}
.ds-badge--info{background:var(--ds-info-bg);color:var(--ds-info)}
.ds-badge--success{background:var(--ds-success-bg);color:var(--ds-success)}
.ds-badge--warn{background:var(--ds-warn-bg);color:var(--ds-warn)}
.ds-badge--danger{background:var(--ds-danger-bg);color:var(--ds-danger)}

/* ── 7. Table — плотность строк 32–36px ────────────────────────────────── */
.ds-table{width:100%;border-collapse:collapse;font-size:var(--ds-fs-body)}
.ds-table th{
  text-align:left;font-size:var(--ds-fs-caption);font-weight:500;color:var(--ds-text-muted);
  padding:8px var(--ds-s4);border-bottom:var(--ds-border);white-space:nowrap;
}
.ds-table td{padding:8px var(--ds-s4);border-bottom:var(--ds-border);vertical-align:top;min-width:0;line-height:1.4}
.ds-table tbody tr:last-child td{border-bottom:0}
.ds-table tbody tr:hover td{background:var(--ds-hover-row)}
.ds-table .ds-table__name{font-weight:500;color:var(--ds-text)}
.ds-table .ds-table__num{font-variant-numeric:tabular-nums}
.ds-table .ds-table__act{text-align:right;white-space:nowrap}
.ds-table .ds-table__act .ds-btn{margin-left:var(--ds-s2)}
/* длинный текст: не ломаем сетку — многоточие + подсказка */
.ds-table .ds-table__clip{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 8. EmptyState — пустые состояния ТОЛЬКО через него ────────────────── */
/* Панельный (в карточке/таблице): иконка → заголовок → подсказка → действие.
   Выравнивание по сетке блока, не «висит в центре экрана». */
.ds-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ds-s2);
  text-align:center;padding:var(--ds-s6) var(--ds-s4);
  border:1px dashed var(--ds-line);border-radius:var(--ds-r-md);background:var(--ds-surface-2);
  margin:var(--ds-s4);
}
.ds-empty__icon{color:var(--ds-text-muted)}
.ds-empty__icon svg{width:28px;height:28px;display:block}
.ds-empty__title{font-size:var(--ds-fs-body);font-weight:500;color:var(--ds-text)}
.ds-empty__hint{font-size:var(--ds-fs-small);color:var(--ds-text-secondary);max-width:480px;line-height:1.45}
.ds-empty__action{margin-top:var(--ds-s1)}
/* Инлайн (одна строка-подсказка вместо дублирующих текстов; паттерн Искры):
   «Укажите, какие агенты могут работать с этой базой». */
.ds-empty--inline{
  display:block;text-align:left;padding:var(--ds-s3) var(--ds-s4);
  border:1px dashed var(--ds-line);border-radius:var(--ds-r-md);background:var(--ds-surface-2);
  margin:0;font-size:var(--ds-fs-small);color:var(--ds-text-secondary);line-height:1.45;
}
.ds-empty--inline .ds-empty__hint{display:inline}

/* ── 9. Toolbar — строка фильтров как на «Структуре» ───────────────────── */
.ds-toolbar{display:flex;align-items:center;gap:var(--ds-s2);flex-wrap:wrap;margin-bottom:var(--ds-s4)}
.ds-toolbar__pill{
  display:inline-flex;align-items:center;gap:var(--ds-s1);
  background:var(--ds-surface);border:var(--ds-border);border-radius:var(--ds-r-md);
  padding:0 var(--ds-s2);min-height:31px;
  transition:border-color var(--ds-transition),background-color var(--ds-transition);
}
.ds-toolbar__pill:hover{border-color:var(--ds-line-strong)}
.ds-toolbar__pill:focus-within{border-color:var(--ds-accent)}
.ds-toolbar__pill .ds-select__control:focus{outline-offset:0}
.ds-toolbar__pill--scope{background:var(--ds-accent-muted);border-color:transparent}
.ds-toolbar__label{font-size:var(--ds-fs-small);color:var(--ds-text-secondary)}
.ds-toolbar__actions{margin-left:auto;display:flex;gap:var(--ds-s2);align-items:center;flex-wrap:wrap}
.ds-toolbar__sep{color:var(--ds-text-muted);font-size:var(--ds-fs-small)}

/* ── 10. Segment — сегментный переключатель 2–3 состояний ──────────────── */
/* Заменяет текстовые кнопки-режимы («Включить права по объектам» → режим).
   Доступность: активная кнопка помечается aria-pressed. */
.ds-segment{display:inline-flex;background:var(--ds-tint-bg);border:var(--ds-border);border-radius:var(--ds-r-md);padding:2px;gap:2px}
.ds-segment__btn{
  font-family:var(--ds-font);font-size:var(--ds-fs-small);color:var(--ds-text-secondary);
  background:transparent;border:0;border-radius:calc(var(--ds-r-md) - 2px);
  padding:5px 12px;cursor:pointer;line-height:1.2;white-space:nowrap;
  transition:background-color var(--ds-transition),color var(--ds-transition);
}
.ds-segment__btn:hover:not(.ds-segment__btn--on){color:var(--ds-text)}
.ds-segment__btn--on{background:var(--ds-accent);color:var(--ds-text-invert);font-weight:500}
.ds-segment__btn:focus{outline:2px solid var(--ds-focus-color);outline-offset:1px}