/* ════════════════════════════════════════════════════════════════════
   /knowledge-base («Шаблоны») — вкладки в шапке, как на /sla-csi,
   /structure и /settings. Общее (карточка шапки, вкладки) — в
   css/control-panel-v2.css; здесь — раскладка: отделы слева со счётчиками,
   панель (поиск, сортировка, «Создать шаблон»), карточки в две колонки,
   «Показать ещё» и переменные. Карточки шаблонов (.kbt) — прежние.
   Подключается после dark-theme.css. Класс .cp — только на шапке.
   ════════════════════════════════════════════════════════════════════ */

.kbx{ --cp-card:#fff; --cp-brd:rgba(165,180,252,.35); --cp-line:#eef0f6; --cp-tx:#0f172a; --cp-tx2:#334155; --cp-mu:#64748b; --cp-mu2:#94a3b8;
  --cp-trk:#eef1f7; --cp-t1:#f5f7ff; --cp-t2:#e0e7ff; --cp-tb:#c7d2fe; --cp-tc:#4f46e5;
  --cp-sh:0 2px 6px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.10);
  --kb-field:#fff; --kb-fieldb:#e3e8f2; --kb-row:#f9fafb; --kb-rowb:#e5e7eb; }
html[data-theme="dark"] .kbx{ --cp-card:#1b2433; --cp-brd:rgba(148,163,184,.2); --cp-line:#2c3a4f; --cp-tx:#e5e7eb; --cp-tx2:#cbd5e1; --cp-mu:#94a3b8; --cp-mu2:#64748b;
  --cp-trk:#243145; --cp-t1:rgba(99,102,241,.16); --cp-t2:rgba(99,102,241,.1); --cp-tb:rgba(129,140,248,.32); --cp-tc:#c7d2fe;
  --cp-sh:0 2px 6px rgba(0,0,0,.3), 0 14px 36px rgba(0,0,0,.45);
  --kb-field:#141c29; --kb-fieldb:#2c3a4f; --kb-row:#141c29; --kb-rowb:#2c3a4f; }

.kbx [hidden]{ display:none !important; }

/* страница не уже 1180px: ниже — горизонтальная прокрутка вместо сломанной
   раскладки (как на /structure и /settings) */
body{ min-width:1180px; }

/* страница: шапка, под ней карточка раздела */
.kb-container.kbx{ display:flex; flex-direction:column; gap:14px; max-width:1400px; margin:24px auto; padding:0 24px; box-sizing:border-box; }
@media (max-width:1024px){ .kb-container.kbx{ flex-direction:column; } }
.kbx-head{ padding:18px 22px; }
.kbx-head .cp-tabs{ flex:none; }
.kbx-head .cp-tab-tx{ white-space:nowrap; }
.kbx-hl{ display:flex; align-items:center; gap:14px; min-width:0; }
.cp-tile.kbx-hic{ width:42px; height:42px; border-radius:12px; }
.cp-tile.kbx-hic svg{ width:19px; height:19px; }

.kbx-card{ padding:24px 28px; border-radius:16px; background:var(--cp-card); border:1px solid var(--cp-brd); box-shadow:var(--cp-sh); }
.kbx-ct{ font-size:20px; font-weight:700; color:var(--cp-tx); padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--cp-line); }

/* ── отделы слева со счётчиками ── */
.kbx-layout{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:22px; align-items:start; }
.kbx-side{ position:sticky; top:16px; display:flex; flex-direction:column; padding:10px; border-radius:14px; background:var(--cp-trk); }
html[data-theme="dark"] .kbx-side{ background:#141c29; }
.kbx-side-h{ padding:4px 10px 8px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cp-mu2); }
.kbx-side-list{ display:flex; flex-direction:column; gap:2px; }
.kbx-dept{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:none; border-radius:9px; background:transparent; cursor:pointer;
  font:400 13.5px "Segoe UI",Arial,system-ui,sans-serif; color:var(--cp-tx2); text-align:left; transition:background-color .15s ease, color .15s ease; }
.kbx-dept:hover{ background:rgba(255,255,255,.6); color:var(--cp-tx); }
html[data-theme="dark"] .kbx-dept:hover{ background:rgba(255,255,255,.04); }
.kbx-dept.active{ background:var(--cp-card); color:var(--cp-tx); font-weight:600; box-shadow:0 1px 2px rgba(15,23,42,.10), 0 2px 6px rgba(79,70,229,.16); }
html[data-theme="dark"] .kbx-dept.active{ background:#243145; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.kbx-dept:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.25); }
.kbx-dept-name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kbx-dept-n{ flex:none; font-style:normal; font-size:12px; font-weight:600; color:var(--cp-mu); font-variant-numeric:tabular-nums; }
.kbx-dept.is-empty:not(.active) .kbx-dept-name, .kbx-dept.is-empty:not(.active) .kbx-dept-n{ color:var(--cp-mu2); }
.kbx-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:#94a3b8; }
.kbx-dot.all{ background:conic-gradient(#6366f1 0 25%, #0ea5e9 0 50%, #14b8a6 0 75%, #a855f7 0); }
.kbx-dept svg{ flex:none; width:13px; height:13px; color:#7c3aed; }
html[data-theme="dark"] .kbx-dept svg{ color:#c4b5fd; }
.kbx-sep{ height:1px; margin:6px 10px; background:var(--cp-line); }

/* ── панель над карточками ── */
.kbx-main{ min-width:0; }
.kbx-tb{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.kbx-search{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:40px; padding:0 13px; box-sizing:border-box;
  border:1px solid var(--kb-fieldb); border-radius:10px; background:var(--kb-field); color:var(--cp-mu2); cursor:text; transition:border-color .15s, box-shadow .15s; }
.kbx-search:hover{ border-color:#a5b4fc; }
.kbx-search:focus-within{ border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.14); }
.kbx-search svg{ flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kbx .kbx-search .search-input, html[data-theme="dark"] .kbx .kbx-search .search-input{ flex:1; min-width:0; height:100%; padding:0; border:none; border-radius:0;
  background:transparent; box-shadow:none !important; font:400 14px "Segoe UI",Arial,system-ui,sans-serif; color:var(--cp-tx); }
.kbx .kbx-search .search-input::placeholder{ color:var(--cp-mu2); }
.kbx-sort{ flex:none; width:220px; }
.kbx .kbx-sort .rich-select-btn{ width:100%; height:40px; padding:0 13px; gap:8px; box-sizing:border-box; border:1px solid var(--kb-fieldb); border-radius:10px;
  background:var(--kb-field); box-shadow:none; font:400 14px "Segoe UI",Arial,system-ui,sans-serif; color:var(--cp-tx); }
.kbx .kbx-sort .rich-select-btn:hover{ border-color:#a5b4fc; }
.kbx .kbx-sort .rich-select-btn[aria-expanded="true"]{ border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.14); }
.kbx .kbx-sort .rich-select-label{ flex:1; text-align:left; color:var(--cp-tx); }
.kbx-sort-ic{ flex:none; width:15px; height:15px; fill:none; stroke:var(--cp-mu); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kbx .create-btn{ flex:none; height:40px; padding:0 18px; box-sizing:border-box; font-family:"Segoe UI",Arial,system-ui,sans-serif; font-size:13.5px; white-space:nowrap; }
.kbx .create-btn svg{ width:16px; height:16px; }

/* ── карточки — прежние, в две колонки ── */
.kbx .kb-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.kbx-empty{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:48px 20px; text-align:center;
  border:2px dashed var(--kb-rowb); border-radius:14px; color:var(--cp-mu); font-size:13.5px; }
.kbx-empty b{ font-size:15px; color:var(--cp-tx); }

/* ── сколько показано и «Показать ещё» ── */
.kbx-more{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:18px; }
.kbx-more-cnt{ font-size:12.5px; color:var(--cp-mu); }
.kbx-more-btn{ padding:9px 16px; border-radius:10px; border:1px solid var(--cp-tb); background:var(--cp-t1); color:#3730a3; cursor:pointer;
  font:600 13px "Segoe UI",Arial,system-ui,sans-serif; transition:background-color .15s, border-color .15s; }
.kbx-more-btn:hover:not(:disabled){ background:#e0e7ff; border-color:#a5b4fc; }
.kbx-more-btn:disabled{ opacity:.6; cursor:default; }
html[data-theme="dark"] .kbx-more-btn{ color:#c7d2fe; }
html[data-theme="dark"] .kbx-more-btn:hover:not(:disabled){ background:rgba(99,102,241,.24); border-color:rgba(129,140,248,.5); }

/* ── переменные: как раньше — карточка на переменную, только плотнее ── */
.kbx .variables-page.kbx-vars, html[data-theme="dark"] .kbx .variables-page.kbx-vars{ display:flex; flex-direction:column; gap:8px; padding:0; margin:0;
  background:none; border:none; box-shadow:none; border-radius:0; }
.kbx-vars-lead{ margin:-6px 0 8px; font-size:13.5px; line-height:1.5; color:var(--cp-mu); }
.kbv{ padding:14px 18px; border-radius:12px; border:1px solid var(--kb-rowb); background:var(--kb-row); }
.kbv-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* код переменной — красным шрифтом, как было; бейдж слегка красный */
.kbv-code{ padding:5px 10px; border-radius:8px; border:1px solid #fecaca; background:#fef2f2; color:#dc2626;
  font:600 13px Consolas,"SFMono-Regular",monospace; overflow-wrap:anywhere; }
html[data-theme="dark"] .kbv-code{ color:#fca5a5; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.32); }
.kbv-d{ margin:8px 0 10px; font-size:13.5px; color:var(--cp-tx2); }
.kbv-ex{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 12px; border-radius:9px; border:1px solid var(--kb-rowb);
  background:var(--cp-card); font-size:13px; }
.kbv-lab{ font-size:12px; font-weight:600; color:var(--cp-mu); }
.kbv-from{ color:var(--cp-mu); }
.kbv-var{ padding:0 4px; border-radius:5px; background:rgba(239,68,68,.08); color:#dc2626; font-weight:600; }
html[data-theme="dark"] .kbv-var{ background:rgba(239,68,68,.14); color:#fca5a5; }
.kbv-arr{ color:var(--cp-mu2); }
.kbv-to{ color:var(--cp-tx); font-weight:600; }
.kbx .kbv .variable-copy-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:10px; border:1px solid var(--cp-tb);
  background:var(--cp-t1); color:#3730a3; box-shadow:none; transform:none; font:600 12.5px "Segoe UI",Arial,system-ui,sans-serif; }
.kbx .kbv .variable-copy-btn:hover{ background:#e0e7ff; border-color:#a5b4fc; box-shadow:none; transform:none; }
.kbx .kbv .variable-copy-btn svg{ width:14px; height:14px; }
/* «Скопировано» — сплошной зелёный с белым текстом: читается в обеих темах */
.kbx .kbv .variable-copy-btn.copied, .kbx .kbv .variable-copy-btn.copied:hover,
html[data-theme="dark"] .kbx .kbv .variable-copy-btn.copied, html[data-theme="dark"] .kbx .kbv .variable-copy-btn.copied:hover{
  background:#16a34a; border-color:#16a34a; color:#fff; }
.kbx .kbv .variable-copy-btn.copied svg{ stroke:#fff; }
html[data-theme="dark"] .kbx .kbv .variable-copy-btn{ color:#c7d2fe; }
html[data-theme="dark"] .kbx .kbv .variable-copy-btn:hover{ background:rgba(99,102,241,.24); border-color:rgba(129,140,248,.5); }

/* ── окно шаблона: «Отделу» / «Только мне» без скачка ──
   поле «Отдел» и плашка «Личный шаблон» одной высоты, сменяются плавно */
#createModal .kb-dept-rich-select .rich-select-btn{ box-sizing:border-box; height:42px; }
#createModal #modalPersonalHint .kb-personal-plate{ box-sizing:border-box; height:42px; padding:0 12px; }
#createModal #modalDepartmentGroup, #createModal #modalPersonalHint{ animation:kbx-swap-in .2s ease both; }
@keyframes kbx-swap-in{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ #createModal #modalDepartmentGroup, #createModal #modalPersonalHint{ animation:none; } }