/* ============================================================================
   ДатаМост · Дизайн-токены и утилиты (АДДИТИВНЫЙ блок)
   ---------------------------------------------------------------------------
   Вставляется ВНУТРЬ существующего <style> в index.html (в конец), либо
   подключается отдельным <link>. Ничего не переопределяет: только новые
   переменные и классы с префиксом dm-.
   Тёмная тема — через :root[data-theme=dark] (сверено с index.html).
   Переиспользует существующие --surface / --surface2 / --border / --muted /
   --text / --accent. Спецификация: docs/19-дизайн-система.md
   ============================================================================ */

/* --- Семантические статус-цвета + spacing: СВЕТЛАЯ тема -------------------- */
:root[data-theme=light]{
  /* Статус = смысл, не декор. fg — текст/иконка, soft — фон-подложка. */
  --dm-ok:#17803d;    --dm-ok-soft:#e3f3ea;     /* успех / готово / valid   */
  --dm-warn:#9a6a00;  --dm-warn-soft:#fbf0d8;   /* внимание / требует правки */
  --dm-err:#c0392b;   --dm-err-soft:#fbe6e3;    /* ошибка / отказ / провал   */
  --dm-info:#2f6fb3;  --dm-info-soft:#e6f0fa;   /* нейтральная информация    */

  /* 8pt-сетка (кратно 4/8) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
}

/* --- Семантические статус-цвета: ТЁМНАЯ тема ------------------------------- */
:root[data-theme=dark]{
  --dm-ok:#34c77b;    --dm-ok-soft:#16352a;
  --dm-warn:#d9a93a;  --dm-warn-soft:#332a14;
  --dm-err:#e06b6b;   --dm-err-soft:#3a2020;
  --dm-info:#5b9bd6;  --dm-info-soft:#16273a;
  /* spacing наследуется от :root — переопределять не нужно */
}

/* --- Карточка ------------------------------------------------------------- */
.dm-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:var(--sp-4);
}
.dm-card > .dm-card-title{
  font-size:13px; font-weight:600; color:var(--text);
  margin:0 0 var(--sp-3);
}

/* --- KPI / stat-карточка: число крупно + подпись + дельта ------------------ */
.dm-stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-1);
}
.dm-stat .dm-stat-value{
  font-size:28px; font-weight:700; line-height:1.1; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.dm-stat .dm-stat-label{
  font-size:12px; color:var(--muted);
}
.dm-stat .dm-stat-delta{
  font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:4px;
}
.dm-stat .dm-stat-delta.up{ color:var(--dm-ok); }
.dm-stat .dm-stat-delta.down{ color:var(--dm-err); }
.dm-stat .dm-stat-delta.flat{ color:var(--muted); }

/* --- Badge / pill: только по смыслу --------------------------------------- */
.dm-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:500; line-height:1;
  padding:3px 9px; border-radius:999px;
  border:1px solid transparent;
  background:var(--surface2); color:var(--muted);
}
.dm-badge.ok{   background:var(--dm-ok-soft);   color:var(--dm-ok);   }
.dm-badge.warn{ background:var(--dm-warn-soft); color:var(--dm-warn); }
.dm-badge.err{  background:var(--dm-err-soft);  color:var(--dm-err);  }
.dm-badge.info{ background:var(--dm-info-soft); color:var(--dm-info); }

/* --- Кнопки --------------------------------------------------------------- */
.dm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:inherit; font-size:14px; font-weight:500; line-height:1;
  padding:8px 14px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  transition:background .12s, border-color .12s, filter .12s;
}
.dm-btn:hover{ background:var(--surface2); }
.dm-btn:disabled{ opacity:.5; cursor:not-allowed; }
.dm-btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.dm-btn.primary:hover{ filter:brightness(.94); background:var(--accent); }
.dm-btn.ghost{ background:transparent; border-color:transparent; color:var(--muted); }
.dm-btn.ghost:hover{ background:var(--surface2); color:var(--text); }
.dm-btn.danger{ background:var(--dm-err); border-color:var(--dm-err); color:#fff; }
.dm-btn.danger:hover{ filter:brightness(.94); background:var(--dm-err); }

/* --- Сетка на 8pt --------------------------------------------------------- */
.dm-grid{
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.dm-grid.tight{ gap:var(--sp-2); }
.dm-grid.wide{ gap:var(--sp-5); }

/* --- Empty-state ---------------------------------------------------------- */
.dm-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:var(--sp-2);
  padding:var(--sp-6) var(--sp-4);
  color:var(--muted);
}
.dm-empty .dm-empty-icon{ font-size:32px; color:var(--border); }
.dm-empty .dm-empty-title{ font-size:14px; font-weight:600; color:var(--text); }
.dm-empty .dm-empty-text{ font-size:12.5px; color:var(--muted); max-width:340px; line-height:1.5; }

/* --- Командная палитра / глобальный поиск (Ctrl/⌘+K) ---------------------- */
.cmdk-back{
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(15,20,28,.42);
  align-items:flex-start; justify-content:center;
  padding-top:12vh;
}
.cmdk-back.on{ display:flex; }
.cmdk-panel{
  width:min(640px,92vw); max-height:70vh; display:flex; flex-direction:column;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:14px;
  box-shadow:0 24px 64px rgba(0,0,0,.28);
  overflow:hidden;
}
.cmdk-in{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.cmdk-in > i{ font-size:18px; color:var(--muted); }
.cmdk-in > input{
  flex:1; border:0; outline:0; background:transparent;
  font-family:inherit; font-size:16px; color:var(--text);
}
.cmdk-list{ overflow:auto; padding:6px; flex:1; }
.cmdk-group{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); padding:8px 10px 4px;
}
.cmdk-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:8px; cursor:pointer;
}
.cmdk-item > i{ font-size:16px; color:var(--muted); width:18px; text-align:center; flex-shrink:0; }
.cmdk-item .cmdk-t{ flex:1; min-width:0; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-item .cmdk-sub{ font-size:11px; color:var(--muted); flex-shrink:0; }
.cmdk-item.sel{ background:var(--accent); color:#fff; }
.cmdk-item.sel > i, .cmdk-item.sel .cmdk-sub{ color:rgba(255,255,255,.85); }
.cmdk-foot{
  display:flex; align-items:center; gap:14px;
  padding:8px 14px; border-top:1px solid var(--border);
  font-size:11px; color:var(--muted);
}
.cmdk-foot .sp{ flex:1; }
.cmdk-foot kbd{
  font-family:inherit; font-size:10px; padding:1px 5px; margin-right:3px;
  border:1px solid var(--border); border-radius:4px; background:var(--surface2); color:var(--muted);
}

/* --- Мониторинг: lineage-чип «источник → таблица → витрина» + блок ошибки --- */
.mon-lin{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--muted);
  background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:3px 8px;
}
.mon-lin > i{ font-size:12px; }
.mon-err{
  margin-top:8px; padding:9px 11px;
  font-size:12px; line-height:1.5;
  background:var(--dm-err-soft); color:var(--dm-err);
  border:1px solid var(--dm-err); border-radius:8px;
  white-space:pre-wrap; word-break:break-word;
}

/* --- Группы в шапке: рабочие режимы vs администрирование --------------------- */
.hwork{ display:inline-flex; align-items:center; gap:2px; }
/* Админ/настройки — отдельный, визуально приглушённый кластер */
.hadmin{
  display:inline-flex; align-items:center; gap:2px;
  padding:2px; border-radius:9px;
  background:var(--surface2); border:1px solid var(--border);
}

/* --- Контекст-панель объекта в конструкторе -------------------------------- */
.ctx-obj{ font-size:12.5px; }
.ctx-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ctx-head .ctx-name{ font-weight:600; font-size:13.5px; }
.ctx-sub{ color:var(--muted); font-size:11.5px; }
.ctx-fields{ display:flex; flex-direction:column; gap:2px; margin:4px 0 2px; max-height:230px; overflow:auto; }
.ctx-fld{
  display:flex; align-items:center; gap:8px;
  padding:3px 6px; border-radius:6px;
}
.ctx-fld:hover{ background:var(--surface2); }
.ctx-fld .ctx-col{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text); }
.ctx-fld .ctx-lbl{ color:var(--muted); font-size:11.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctx-fld .ctx-type{
  font-size:10.5px; color:var(--dm-info);
  background:var(--dm-info-soft); border-radius:4px; padding:1px 6px;
  font-family:'JetBrains Mono',monospace; flex-shrink:0;
}
.ctx-rel{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--muted);
  background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:2px 8px; margin:2px 4px 2px 0;
}
.ctx-empty{ color:var(--muted); font-size:12px; padding:10px 4px; }