/* ═══════════════════════════════════════════════════════════════════════════
   ds.css — Дизайн-система 3598 v1 (s825)
   ---------------------------------------------------------------------------
   АДДИТИВНЫЙ слой поверх dashboard.css: ничего из старых классов не трогает,
   не переопределяет и не ломает. Старые страницы живут как есть до миграции
   волнами; новые/переведённые страницы используют ТОЛЬКО ds-* классы и
   --ds-* токены. Дока: docs/design_system.md (чек-лист качества там же).

   Дух Style B (s217.1): тёплый фон / чернила / золото — сохранён.
   Что прокачано против «бледности» (жалоба CEO s825):
     • заголовки почти чёрные (--ds-ink #1d1814, было #2c2620);
     • мета-текст читаемый (--ds-mut ≥ 4.5:1 на фоне, было #978d80 ≈ 2.9:1);
     • фон чуть светлее и чище (--ds-bg #f7f3eb), карточка белая — контраст
       поверхностей виден, ничего не «сливается»;
     • бордеры двух весов (--ds-line / --ds-line-2) вместо одного волосяного;
     • активная вкладка = ЗАЛИВКА чернилами, видна с любого расстояния.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ТОКЕНЫ ─────────────────────────────────────────────────────────────── */
:root, [data-theme="light"] {
  /* Чернила (текст): 4 ступени, каждая читаема на --ds-bg и --ds-surface */
  --ds-ink:      #1d1814;   /* заголовки, ключевые значения — почти чёрный    */
  --ds-text:     #3d362d;   /* основной текст                                  */
  --ds-mut:      #6d6455;   /* мета/подписи — muted, но ≥4.5:1 на белом        */
  --ds-faint:    #99907f;   /* placeholder/disabled — НЕ для смысловой инфы    */

  /* Поверхности: страница чуть светлее карточки-белой, вставки темнее */
  --ds-bg:        #f7f3eb;  /* фон страницы (теплее и светлее #c8ccc4)         */
  --ds-surface:   #ffffff;  /* карточка                                        */
  --ds-surface-2: #f6f1e7;  /* вставка внутри карточки (inset)                 */
  --ds-surface-3: #efe8d9;  /* hover/selected для строк и пунктов              */

  /* Линии: два веса. line — разделители, line-2 — контуры контролов */
  --ds-line:      #e7dfce;
  --ds-line-2:    #cec2a9;

  /* Бренд-акценты */
  --ds-gold:      #c8a050;  /* фирменное золото (заливки CTA)                  */
  --ds-gold-ink:  #7d6120;  /* золото-ТЕКСТ на светлом (≥4.5:1; НЕ #a07c2f)    */
  --ds-gold-soft: #f5ecd4;  /* золотая подложка                                */
  --ds-ember:     #c0311a;  /* тревога/danger/бренд-красный                    */
  --ds-ember-ink: #a52a15;  /* ember-текст на светлом                          */
  --ds-ember-soft:#f9e7e2;
  --ds-green:     #2e7d4f;  /* успех                                           */
  --ds-green-soft:#e4f0e7;
  --ds-blue:      #3f68a5;  /* инфо                                            */
  --ds-blue-soft: #e7edf6;

  /* Геометрия и тени */
  --ds-r:      12px;        /* карточки/модалки (= --r-card, стандарт s217.1)  */
  --ds-r-sm:   9px;         /* контролы/бейджи   (= --r-card-sm)               */
  --ds-shadow:    0 1px 2px rgba(35,28,20,.05), 0 2px 10px rgba(35,28,20,.05);
  --ds-shadow-lg: 0 10px 32px rgba(35,28,20,.12);
  --ds-focus:     0 0 0 3px rgba(200,160,80,.35);

  /* Шкала отступов (плотность): 4-кратная сетка */
  --ds-s1: 4px; --ds-s2: 8px; --ds-s3: 12px; --ds-s4: 16px;
  --ds-s5: 20px; --ds-s6: 24px; --ds-s7: 32px; --ds-s8: 40px;

  /* Типографика: семейства */
  --ds-f-body:  'Inter', -apple-system, 'Segoe UI', sans-serif;
  --ds-f-cond:  'Barlow Condensed', 'Inter', sans-serif;   /* labels/kickers  */
  --ds-f-brand: 'Unbounded', system-ui, sans-serif;        /* бренд/крупные № */
}

[data-theme="dark"] {
  --ds-ink:      #f0ece3;
  --ds-text:     #d4cec2;
  --ds-mut:      #a99e8c;
  --ds-faint:    #6f6656;

  --ds-bg:        #0c0a07;
  --ds-surface:   #171512;
  --ds-surface-2: #1f1c17;
  --ds-surface-3: #282419;

  --ds-line:      #2c2720;
  --ds-line-2:    #453e32;

  --ds-gold:      #c8a050;
  --ds-gold-ink:  #d9b567;
  --ds-gold-soft: #2b2415;
  --ds-ember:     #d9502f;
  --ds-ember-ink: #e8785c;
  --ds-ember-soft:#301710;
  --ds-green:     #4f9d6e;
  --ds-green-soft:#152318;
  --ds-blue:      #6f9bd1;
  --ds-blue-soft: #16202e;

  --ds-shadow:    0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.3);
  --ds-shadow-lg: 0 10px 32px rgba(0,0,0,.5);
  --ds-focus:     0 0 0 3px rgba(200,160,80,.3);
}

/* ── 1a. ТЁМНЫЙ АКЦЕНТ-РЕЖИМ для чатовых экранов (.ds-dim) ─────────────────────
   Зона-«кинотеатр»: тёмное тёплое полотно ВНУТРИ светлой страницы (лента чатов,
   переписка). Класс на контейнер — все ds-токены внутри переключаются, любые
   ds-компоненты внутри работают без правок. В тёмной теме дашборда просто чуть
   глубже общего фона. */
.ds-dim {
  --ds-ink:      #f2ede3;
  --ds-text:     #d8d1c3;
  --ds-mut:      #a89d89;
  --ds-faint:    #756c5b;

  --ds-bg:        #171310;
  --ds-surface:   #1f1a15;
  --ds-surface-2: #282218;
  --ds-surface-3: #322a1d;

  --ds-line:      #322b22;
  --ds-line-2:    #4d4334;

  --ds-gold-ink:  #d9b567;
  --ds-gold-soft: #2e2614;
  --ds-ember:     #e05a3f;
  --ds-ember-ink: #ef8065;
  --ds-ember-soft:#33170f;
  --ds-green:     #58a877;
  --ds-green-soft:#17251a;
  --ds-blue:      #7ba3d6;
  --ds-blue-soft: #17212f;

  --ds-shadow:    0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35);
  color: var(--ds-text);
}

/* ── 2. PAGE HEADER: заголовок + описание + действия ───────────────────────── */
.ds-page-head { display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--ds-s5); margin:0 0 var(--ds-s6); flex-wrap:wrap; }
.ds-page-head-main { min-width:0; }
.ds-kicker { font:700 12px/1 var(--ds-f-cond); text-transform:uppercase;
  letter-spacing:.08em; color:var(--ds-gold-ink); margin:0 0 6px; }
.ds-title { font:800 26px/1.15 var(--ds-f-body); letter-spacing:-.02em;
  color:var(--ds-ink); margin:0; }
.ds-desc { font:400 13.5px/1.55 var(--ds-f-body); color:var(--ds-mut);
  margin:6px 0 0; max-width:640px; }
.ds-page-actions { display:flex; gap:var(--ds-s2); align-items:center; flex-wrap:wrap; }

/* Заголовок секции внутри страницы */
.ds-sect { font:700 15px/1.3 var(--ds-f-body); color:var(--ds-ink); margin:0 0 var(--ds-s3); }
.ds-label { display:block; font:700 11px/1.2 var(--ds-f-cond); text-transform:uppercase;
  letter-spacing:.06em; color:var(--ds-mut); margin:0 0 5px; }

/* ── 3. TABS: активная — ЗАЛИВКА, видна сразу ──────────────────────────────────
   Сегмент-контрол на подложке. Активный таб = чернильная заливка + белый текст
   (в .ds-dim / тёмной теме — светлая заливка + тёмный текст). Альтернатива
   .ds-tabs-line — подчёрк 3px ember + почти чёрный текст (для плотных шапок). */
.ds-tabs { display:inline-flex; gap:4px; padding:4px; background:var(--ds-surface-2);
  border:1px solid var(--ds-line); border-radius:var(--ds-r); margin:0 0 var(--ds-s5);
  max-width:100%; overflow-x:auto; scrollbar-width:none; }
.ds-tabs::-webkit-scrollbar { display:none; }
.ds-tab { appearance:none; border:none; background:none; cursor:pointer;
  padding:9px 18px; border-radius:calc(var(--ds-r) - 4px); white-space:nowrap;
  font:600 13.5px/1 var(--ds-f-body); color:var(--ds-mut);
  transition:color .12s, background .12s; }
.ds-tab:hover { color:var(--ds-ink); }
.ds-tab.active { background:var(--ds-ink); color:var(--ds-bg); font-weight:700;
  box-shadow:var(--ds-shadow); }
.ds-tab .ds-tab-n { font-weight:400; opacity:.65; margin-left:5px; }

.ds-tabs-line { display:flex; gap:2px; border-bottom:2px solid var(--ds-line);
  margin:0 0 var(--ds-s5); overflow-x:auto; scrollbar-width:none; }
.ds-tabs-line::-webkit-scrollbar { display:none; }
.ds-tab-line { appearance:none; border:none; background:none; cursor:pointer;
  padding:10px 16px 9px; margin-bottom:-2px; border-bottom:3px solid transparent;
  white-space:nowrap; font:600 13.5px/1 var(--ds-f-body); color:var(--ds-mut);
  transition:color .12s, border-color .12s; }
.ds-tab-line:hover { color:var(--ds-ink); }
.ds-tab-line.active { color:var(--ds-ink); font-weight:700;
  border-bottom-color:var(--ds-ember); }

/* ── 4. CARD ──────────────────────────────────────────────────────────────── */
.ds-card { background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r); box-shadow:var(--ds-shadow); padding:var(--ds-s5) var(--ds-s6); }
.ds-card-tight { padding:var(--ds-s4); }
.ds-card-head { display:flex; justify-content:space-between; align-items:center;
  gap:var(--ds-s3); margin:0 0 var(--ds-s4); }
.ds-card-title { font:700 14px/1.3 var(--ds-f-body); color:var(--ds-ink); margin:0; }
.ds-card-sub { font:400 12.5px/1.5 var(--ds-f-body); color:var(--ds-mut); margin:2px 0 0; }

/* KPI-плитка */
.ds-kpi { background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r); box-shadow:var(--ds-shadow); padding:var(--ds-s4) var(--ds-s5); }
.ds-kpi-val { font:800 30px/1.05 var(--ds-f-body); letter-spacing:-.02em; color:var(--ds-ink); }
.ds-kpi-val.gold { color:var(--ds-gold-ink); } .ds-kpi-val.green { color:var(--ds-green); }
.ds-kpi-val.ember { color:var(--ds-ember-ink); }
.ds-kpi-label { font:700 11px/1.2 var(--ds-f-cond); text-transform:uppercase;
  letter-spacing:.06em; color:var(--ds-mut); margin-top:6px; }

/* ── 5. TABLE ─────────────────────────────────────────────────────────────── */
.ds-tbl-wrap { background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r); box-shadow:var(--ds-shadow); overflow-x:auto; }
table.ds-tbl { width:100%; border-collapse:collapse; font:400 13px/1.45 var(--ds-f-body);
  color:var(--ds-text); }
.ds-tbl th { text-align:left; padding:11px 16px; font:700 11px/1.2 var(--ds-f-cond);
  text-transform:uppercase; letter-spacing:.06em; color:var(--ds-mut);
  background:var(--ds-surface-2); border-bottom:1px solid var(--ds-line-2);
  white-space:nowrap; }
.ds-tbl td { padding:11px 16px; border-bottom:1px solid var(--ds-line); }
.ds-tbl tr:last-child td { border-bottom:none; }
.ds-tbl tbody tr:hover { background:var(--ds-surface-2); }
.ds-tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.ds-tbl-zebra tbody tr:nth-child(even) { background:var(--ds-surface-2); }

/* ── 6. BADGE: статус ВСЕГДА с заливкой (не голый цветной текст) ───────────── */
.ds-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:999px; font:700 11px/1.5 var(--ds-f-body); white-space:nowrap;
  background:var(--ds-surface-3); color:var(--ds-text); border:1px solid transparent; }
.ds-badge::before { content:''; width:6px; height:6px; border-radius:50%;
  background:currentColor; flex:0 0 auto; }
.ds-badge-ok     { background:var(--ds-green-soft); color:var(--ds-green); }
.ds-badge-warn   { background:var(--ds-gold-soft);  color:var(--ds-gold-ink); }
.ds-badge-danger { background:var(--ds-ember-soft); color:var(--ds-ember-ink); }
.ds-badge-info   { background:var(--ds-blue-soft);  color:var(--ds-blue); }
.ds-badge-plain::before { display:none; }
/* Счётчик непрочитанного/алертов — ember-заливка, максимальная заметность */
.ds-count { display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 6px; border-radius:999px;
  background:var(--ds-ember); color:#fff; font:700 11px/19px var(--ds-f-body); }

/* ── 7. BUTTONS ───────────────────────────────────────────────────────────── */
.ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 18px; border-radius:var(--ds-r-sm); cursor:pointer; border:1px solid transparent;
  font:700 13px/1 var(--ds-f-body); text-decoration:none; white-space:nowrap;
  transition:filter .12s, background .12s, color .12s; }
.ds-btn:hover { text-decoration:none; filter:brightness(1.05); }
.ds-btn:disabled { opacity:.45; cursor:default; filter:none; }
.ds-btn:focus-visible { outline:none; box-shadow:var(--ds-focus); }
.ds-btn-primary { background:var(--ds-gold); color:#231c0e; }
.ds-btn-primary:hover { filter:none; background:var(--ds-gold-ink); color:#fff; }
.ds-btn-dark { background:var(--ds-ink); color:var(--ds-bg); }
.ds-btn-ghost { background:var(--ds-surface); color:var(--ds-ink); border-color:var(--ds-line-2); }
.ds-btn-ghost:hover { filter:none; background:var(--ds-surface-2); }
.ds-btn-danger { background:var(--ds-ember); color:#fff; }
.ds-btn-sm { padding:7px 13px; font-size:12px; }
/* Чип-тумблер фильтра (вкл/выкл) */
.ds-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 13px;
  border-radius:var(--ds-r-sm); border:1px solid var(--ds-line-2); cursor:pointer;
  background:var(--ds-surface); color:var(--ds-mut); font:600 12.5px/1 var(--ds-f-body);
  user-select:none; transition:all .12s; }
.ds-chip::before { content:''; width:7px; height:7px; border-radius:50%;
  border:1.5px solid currentColor; flex:0 0 auto; }
.ds-chip:hover { color:var(--ds-ink); }
.ds-chip.active { background:var(--ds-ink); border-color:var(--ds-ink); color:var(--ds-bg); }
.ds-chip.active::before { background:currentColor; border-color:currentColor; }

/* ── 8. INPUT / SELECT ────────────────────────────────────────────────────── */
.ds-input, .ds-select, .ds-textarea { box-sizing:border-box; width:100%;
  padding:9px 12px; border-radius:var(--ds-r-sm); outline:none;
  border:1px solid var(--ds-line-2); background:var(--ds-surface); color:var(--ds-ink);
  font:400 13.5px/1.4 var(--ds-f-body); transition:border-color .12s, box-shadow .12s; }
.ds-input::placeholder, .ds-textarea::placeholder { color:var(--ds-faint); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  border-color:var(--ds-gold); box-shadow:var(--ds-focus); }
.ds-select { cursor:pointer; appearance:none; -webkit-appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236d6455' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; }
.ds-textarea { resize:vertical; min-height:80px; }
.ds-input-auto, .ds-select-auto { width:auto; }

/* ── 9. EMPTY STATE ───────────────────────────────────────────────────────── */
.ds-empty { text-align:center; padding:var(--ds-s8) var(--ds-s5); color:var(--ds-mut); }
.ds-empty-icon { font-size:28px; line-height:1; margin-bottom:10px; opacity:.55; }
.ds-empty-title { font:700 14.5px/1.3 var(--ds-f-body); color:var(--ds-ink); margin:0 0 5px; }
.ds-empty-text { font:400 13px/1.6 var(--ds-f-body); margin:0 auto; max-width:380px; }

/* ── 10. SKELETON LOADER ──────────────────────────────────────────────────── */
.ds-skel { position:relative; overflow:hidden; border-radius:var(--ds-r-sm);
  background:var(--ds-surface-3); min-height:12px; color:transparent !important;
  pointer-events:none; user-select:none; }
.ds-skel::after { content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:translateX(-100%); animation:ds-shimmer 1.3s ease-in-out infinite; }
[data-theme="dark"] .ds-skel::after, .ds-dim .ds-skel::after {
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
@keyframes ds-shimmer { to { transform:translateX(100%); } }
.ds-skel-line  { height:12px; margin:6px 0; }
.ds-skel-title { height:18px; width:55%; margin:6px 0 10px; }

/* ── 10a. ПОДСКАЗКА «?» — человеческий тултип ─────────────────────────────────
   Принцип (док §5): первая строка — языком владельца бизнеса, БЕЗ терминов кода;
   формула/оговорка — второй строкой мелко (.ds-tip-f), для дотошных.
   Работает по hover И по tap/focus (tabindex="0" на .ds-q), без JS. */
.ds-q { display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; border:1px solid var(--ds-line-2);
  color:var(--ds-mut); font:700 10px/1 var(--ds-f-body); cursor:help;
  position:relative; flex:0 0 auto; text-transform:none; letter-spacing:normal;
  vertical-align:middle; }
.ds-q:focus { outline:2px solid var(--ds-gold); outline-offset:1px; }
.ds-q .ds-tip { position:absolute; left:50%; bottom:calc(100% + 8px);
  transform:translateX(-50%); width:260px; max-width:70vw;
  background:var(--ds-ink); color:var(--ds-bg); border-radius:var(--ds-r-sm);
  padding:10px 12px; font:400 12.5px/1.5 var(--ds-f-body); font-weight:400;
  text-align:left; text-transform:none; letter-spacing:normal;
  box-shadow:var(--ds-shadow-lg); opacity:0; pointer-events:none;
  transition:opacity .12s; z-index:60; }
.ds-q .ds-tip .ds-tip-f { display:block; margin-top:6px; padding-top:6px;
  border-top:1px solid color-mix(in srgb, var(--ds-bg) 25%, transparent);
  font-size:11px; line-height:1.45; opacity:.75; font-style:normal; }
.ds-q:hover .ds-tip, .ds-q:focus .ds-tip { opacity:1; }

/* ── 11. УТИЛИТЫ ──────────────────────────────────────────────────────────── */
.ds-row  { display:flex; align-items:center; gap:var(--ds-s3); flex-wrap:wrap; }
.ds-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--ds-s4); }
.ds-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ds-s4); }
.ds-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ds-s4); }
.ds-divider { height:1px; background:var(--ds-line); border:none; margin:var(--ds-s4) 0; }
.ds-help { font:400 12px/1.5 var(--ds-f-body); color:var(--ds-mut); }
.ds-strong { color:var(--ds-ink); font-weight:700; }

/* Горизонтальный скролл-контейнер колонок (kanban-борд и т.п.). Правит «обрезку
   справа»: у flex-контейнера с overflow-x хвостовой padding-right НЕ учитывается в
   scrollWidth — последняя колонка упирается в край без воздуха и выглядит обрубленной.
   Фикс: реальный распорка-хвост (::after flex-спейсер) + scroll-padding в конце.
   Псевдоэлемент переживает innerHTML-перерисовку детей (s1017). */
.ds-hscroll { overflow-x:auto; scroll-padding-inline-end:var(--ds-s5); }
.ds-hscroll::after { content:""; flex:0 0 var(--ds-s5); align-self:stretch; }

@media (max-width:900px) { .ds-grid-3, .ds-grid-4 { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) {
  .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns:1fr; }
  .ds-title { font-size:22px; }
  .ds-page-head { align-items:flex-start; flex-direction:column; }
  .ds-btn { width:100%; }
  .ds-page-actions { width:100%; }
}