/* ==========================================================================
   Аналитика ЦА (ca.zzd23.ru) — фирменный стиль ЗЗД, издательская тема.
   --------------------------------------------------------------------------
   Подключать ПОСЛЕ brand.css и theme.css. Только локальное, на токенах.

   Имена классов сохранены от прежней вёрстки (.sidebar, .card, .btn-primary,
   .run-paid, .prog-wrap и т.д.) — шаблоны переехали в templates/ без переписывания
   разметки. Раньше весь CSS жил внутри f-строки base_sidebar() в crm_app.py.

   Версия: 2.0.0 · 2026-07-15 (было: Inter с Google Fonts, палитра #1a2d5a/#0f1f45)
   ========================================================================== */

/* Каркас (сайдбар/раскладка/сворачивание/тумблер) — ОДИН-В-ОДИН как в эталоне
   ice/fgv (style.css кита). Иконки — контурные unicode в .ni-ic, не эмодзи. */
:root{
  --lek: var(--zzd-lek);
  --mer: var(--zzd-mer);
  --ease: var(--zzd-ease, cubic-bezier(.2,.7,.2,1));
  --panel-group:rgba(255,255,255,.03);
  --hair:rgba(209,158,104,.45);
  --nav-hover:rgba(255,255,255,.055);
  --seal-op:.42;
  --topbar-bg:linear-gradient(135deg,#0b2140,#07182f);
}
:root[data-theme="light"]{
  --panel-group:rgba(6,34,71,.03);
  --hair:rgba(191,138,73,.5);
  --nav-hover:rgba(6,34,71,.05);
  --seal-op:.16;
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* Кегль НЕ фиксируем — плавный clamp из theme.css (как fgv/ice). */
body{ font-family:var(--mer); background:var(--bg); color:var(--ink); overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
.muted{ color:var(--muted); }
h1,h2,h3,h4{ font-family:var(--lek); color:var(--head); letter-spacing:-.01em; line-height:1.15; }
h1{ font-weight:800; font-size:clamp(24px,3vw,38px); letter-spacing:-.02em; margin:.2em 0 .1em; }
.page-title{ margin:.1em 0 22px; }

/* ============================== РАСКЛАДКА =============================== */
.layout{ position:relative; z-index:1; display:flex; min-height:100vh; }
.sidebar{ position:sticky; top:0; height:100vh; flex:0 0 clamp(238px,18vw,280px);
  width:clamp(238px,18vw,280px); background:transparent;
  display:flex; flex-direction:column; padding:22px 16px; }
.sidebar::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent,var(--hair) 34% 66%,transparent); }
.sidebar .brand{ display:block; padding:2px 8px 16px; }
.brand-mark{ display:block; width:100%; max-width:186px; height:auto; filter:var(--logo-filter); }
.brand-mark-mini{ display:none; width:40px; height:auto; margin:0 auto; filter:var(--logo-filter); }
.sidebar .brand small{ display:block; margin-top:11px; font-family:var(--lek); font-size:12px;
  letter-spacing:.02em; color:var(--dim); line-height:1.5; }
.nav{ display:flex; flex-direction:column; gap:2px; margin:10px 0 auto; padding:6px;
  background:var(--panel-group); border:1px solid var(--line); border-radius:14px;
  flex:0 0 auto; overflow:visible; }
.nav-item{ position:relative; display:flex; align-items:center; gap:11px; padding:9px 13px;
  border-radius:10px; font-family:var(--lek); font-weight:600; font-size:15px;
  color:var(--muted); transition:.18s var(--ease); }
.nav-item:hover{ background:var(--nav-hover); color:var(--head); }
.nav-item.active{ color:var(--gold); background:var(--gold-soft); }
.nav-item.active::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:3px; background:var(--gold); }
.ni-ic{ flex:0 0 auto; width:1.35rem; text-align:center; font-size:1rem; opacity:.85; }
.ni-tx{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pseal{ width:min(150px,72%); height:120px; margin:6px auto 12px;
  flex:0 1 auto; min-height:0; overflow:hidden;
  background:var(--emblem) center/contain no-repeat; opacity:var(--seal-op); }
.sidebar-foot{ border-top:1px solid var(--line); padding-top:13px; flex:0 0 auto; }
.sidebar-foot .user-name{ font-family:var(--lek); font-weight:600; color:var(--head); font-size:15px; padding:0 8px; }
.sidebar-foot .user-role{ font-family:var(--lek); color:var(--gold); font-size:13px; padding:0 8px 6px; }
.nav-item.small{ font-size:14px; font-weight:500; padding:8px 13px; color:var(--muted); }
.theme-toggle{ display:flex; align-items:center; gap:11px; width:100%; margin:2px 0 4px;
  background:var(--panel-group); border:1px solid var(--line); color:var(--muted);
  font-family:var(--lek); font-weight:600; font-size:14px; padding:9px 14px;
  border-radius:10px; cursor:pointer; transition:.2s var(--ease); }
.theme-toggle:hover{ color:var(--gold-2); border-color:var(--gold); }
.theme-toggle .tt-ic{ width:1.35rem; text-align:center; }
.nav-collapse{ display:none; }
.theme-fab{ position:fixed; top:20px; right:24px; z-index:6; cursor:pointer; display:flex;
  align-items:center; gap:8px; font-family:var(--lek); font-weight:600; font-size:14px;
  color:var(--muted); background:var(--card); border:1px solid var(--line-2);
  border-radius:100px; padding:9px 16px; transition:.2s var(--ease); box-shadow:var(--card-shadow); }
.theme-fab:hover{ color:var(--gold-2); border-color:var(--gold); }
.topbar{ display:none; }
.hamburger{ background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff;
  border-radius:8px; font-size:18px; line-height:1; padding:5px 11px; cursor:pointer; }
.brand-mark-sm{ height:26px; width:26px; vertical-align:-8px; border-radius:50%; filter:brightness(0) invert(1); }
.sidebar-backdrop{ display:none; }

/* =============================== ГЛАВНОЕ =============================== */
.content{ flex:1; min-width:0; max-width:1360px; margin-inline:auto;
  padding:clamp(24px,2.6vw,42px) clamp(20px,3.2vw,52px); }

/* ============================== КАРТОЧКИ ================================ */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-bottom:24px; }
.card{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:22px; box-shadow:var(--card-shadow); }
.card::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--gold), rgba(209,158,104,0) 60%); }
.card-label{ font-family:var(--lek); font-size:11px; color:var(--dim); margin-bottom:9px;
  text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.card-value{ font-family:var(--lek); font-size:27px; font-weight:800; letter-spacing:-.02em;
  color:var(--head); line-height:1.15; }
/* Цветовые модификаторы цифр: всё уводим в фирменное золото/семантику кита */
.card-value.blue{ color:var(--gold); }
.card-value.green{ color:var(--ok); }
.card-value.yellow{ color:var(--warn); }
.card-sub{ font-family:var(--mer); font-size:12.5px; color:var(--muted); margin-top:7px; }

/* ============================== СЕКЦИИ ================================= */
.section{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:24px 26px; margin-bottom:18px; box-shadow:var(--card-shadow); }
.section-title{ font-family:var(--lek); font-size:19px; font-weight:700; letter-spacing:-.01em;
  color:var(--head); margin-bottom:18px; padding-bottom:13px; border-bottom:1px solid var(--line); }

/* =============================== ФОРМЫ ================================= */
.form-group{ margin-bottom:16px; }
.form-label{ font-family:var(--lek); font-size:12.5px; color:var(--muted); margin-bottom:6px;
  display:block; font-weight:600; }
.form-input, .form-select, .form-textarea{ width:100%; background:var(--field);
  border:1px solid var(--line-2); color:var(--head); padding:11px 14px; border-radius:10px;
  font-family:var(--lek); font-size:15px; outline:none; transition:.16s var(--ease); }
.form-input:focus, .form-select:focus, .form-textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.form-textarea{ min-height:190px; resize:vertical; font-family:var(--mer); font-size:14px; line-height:1.65; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; font-family:var(--lek);
  font-size:14px; color:var(--muted); margin-bottom:10px; }
.toggle input{ width:16px; height:16px; cursor:pointer; accent-color:var(--gold); }

/* =============================== КНОПКИ ================================ */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 19px; border-radius:10px;
  font-family:var(--lek); font-size:14.5px; font-weight:600; cursor:pointer; border:1px solid transparent;
  text-decoration:none; transition:.2s var(--ease); }
/* Золотая primary — одна на экран (правило кита) */
.btn-primary{ background:var(--gold-2); color:#0a0e17; box-shadow:0 12px 26px -14px rgba(209,158,104,.7); }
:root[data-theme="light"] .btn-primary{ color:var(--head); }
.btn-primary:hover{ filter:brightness(1.06); color:#0a0e17; }
:root[data-theme="light"] .btn-primary:hover{ color:var(--head); }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-secondary:hover{ border-color:var(--gold); color:var(--gold-2); }
.btn-success{ background:var(--ok); color:#06231a; }
.btn-success:hover{ filter:brightness(1.08); color:#06231a; }
.btn-danger{ background:transparent; color:var(--bad); border-color:var(--bad); }
.btn-danger:hover{ background:var(--bad); color:#fff; }
.btn-sm{ padding:6px 13px; font-size:13px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* Большие кнопки запуска — тёмно-синяя плитка + золотой текст (как KPI кита) */
.run-btn{ width:100%; padding:16px; font-family:var(--lek); font-size:16px; font-weight:700;
  border:none; border-radius:14px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:10px; transition:transform .12s var(--ease), filter .2s var(--ease); }
.run-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.run-btn:active{ transform:translateY(0); }
.run-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.run-paid{ background:linear-gradient(160deg,#0e3467 0%,#071c37 68%); color:var(--gold-2);
  box-shadow:0 20px 40px -28px rgba(6,34,71,.5); }
.run-nopay{ background:linear-gradient(160deg,#123a55 0%,#07202f 68%); color:var(--gold-2);
  box-shadow:0 20px 40px -28px rgba(6,34,71,.5); }

/* ============================== ПРОГРЕСС =============================== */
.prog-wrap{ background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px; margin-bottom:14px; box-shadow:var(--card-shadow); }
.prog-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.prog-lbl{ font-family:var(--lek); font-size:14.5px; font-weight:600; color:var(--head); }
.prog-cnt{ font-family:var(--lek); font-size:13px; color:var(--dim); }
.bar-bg{ background:var(--field); border-radius:4px; height:6px; margin-bottom:6px; }
.bar-fill{ background:linear-gradient(90deg, var(--gold), var(--gold-2)); height:6px;
  border-radius:4px; width:0%; transition:width .5s var(--ease); }
.prog-meta{ font-family:var(--lek); font-size:12.5px; color:var(--dim); }
.prog-detail{ font-family:var(--mer); font-size:12.5px; color:var(--muted); margin-top:3px; }

/* =============================== ЛОГ =================================== */
/* Лог — утопленное поле, моноширинный текст, семантика статуса цветом строки */
.log-wrap{ background:var(--field); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; max-height:340px; overflow-y:auto; }
.ll{ font-family:ui-monospace, "Cascadia Code", Consolas, monospace; font-size:12.5px;
  line-height:1.65; color:var(--muted); display:flex; gap:9px; }
.ll-ts{ color:var(--dim); flex-shrink:0; }
.ll.ok{ color:var(--ok); }
.ll.err{ color:var(--bad); }
.dl-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.dl-btn{ cursor:pointer; }

/* Экран анализа: настройки слева, ход выполнения справа */
.analysis-grid{ display:grid; grid-template-columns:400px 1fr; gap:24px; align-items:start; }
@media(max-width:1100px){ .analysis-grid{ grid-template-columns:1fr; } }

/* ============================== БЕЙДЖИ ================================= */
.badge{ display:inline-flex; align-items:center; font-family:var(--lek); font-weight:600;
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; padding:3px 10px;
  border-radius:100px; white-space:nowrap; }
.badge-admin{ color:var(--gold); border:1px solid var(--gold); background:var(--gold-soft); }
.badge-user{ color:var(--muted); border:1px solid var(--line-2); background:transparent; }
.badge-ok{ color:var(--ok); border:1px solid var(--ok); background:transparent; }

/* ======================= ВКЛАДКИ (настройки) =========================== */
/* Раньше жили инлайном в SETTINGS_TEMPLATE на #5a7090/#dde5f0 — переехали сюда. */
.tabs-bar{ display:flex; gap:4px; padding:4px; border-radius:12px; width:fit-content;
  background:var(--field); border:1px solid var(--line); }
.tab-btn{ padding:8px 20px; border-radius:9px; cursor:pointer; font-family:var(--lek);
  font-size:14px; font-weight:600; color:var(--muted); border:none; background:none;
  transition:.18s var(--ease); }
.tab-btn:hover{ color:var(--gold-2); }
.tab-active{ background:var(--card); color:var(--gold); box-shadow:var(--card-shadow); }

/* Списки этапов/воронок */
.stages-list{ background:var(--field); border:1px solid var(--line-2); border-radius:10px;
  padding:12px; max-height:280px; overflow-y:auto; }
.stage-item, .pipe-item{ display:flex; align-items:center; gap:9px; padding:6px 4px;
  font-family:var(--mer); font-size:14px; color:var(--ink); border-bottom:1px solid var(--line); }
.stage-item{ cursor:pointer; }
.stage-item:last-child, .pipe-item:last-child{ border-bottom:none; }
.stage-item input, .pipe-item input{ width:16px; height:16px; accent-color:var(--gold); flex-shrink:0; }

/* Приглушённые подписи (ID сущностей, подсказки по центру) */
.id-hint{ font-family:var(--lek); color:var(--dim); font-size:12px; margin-left:6px; }
.hint-center{ font-family:var(--mer); color:var(--dim); font-size:13px;
  text-align:center; padding:12px; }

/* Кнопка-глаз в поле с ключом */
.eye-btn{ position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--dim); font-size:16px; padding:0; }
.eye-btn:hover{ color:var(--gold); }
.key-field{ position:relative; }
.key-field .form-input{ padding-right:44px; }

/* ============================== ТАБЛИЦЫ ================================ */
.table-wrap{ overflow-x:auto; }   /* широкая таблица скроллится внутри себя, не ломая страницу */
.num-cell{ color:var(--dim); font-family:var(--lek); }
.row-actions{ display:flex; gap:8px; align-items:center; }
.row-actions form{ margin:0; }
table{ width:100%; border-collapse:collapse; }
th{ font-family:var(--lek); font-weight:700; font-size:11px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--dim); text-align:left; padding:11px 14px;
  border-bottom:1px solid var(--line); }
td{ font-family:var(--mer); font-size:14px; color:var(--ink); padding:11px 14px;
  border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td{ border-bottom:0; }

/* ====================== СООБЩЕНИЯ / ОШИБКИ ============================ */
/* Правило кита: карточка + цветная полоса слева, НЕ заливка. Ошибка — тёплый
   кирпичный, не холодный розовый (было #fde8e8 / #8b2020). */
.msg, .err, .ok-msg, .alert{ background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:11px 14px; font-family:var(--mer); font-size:14px;
  margin-bottom:16px; color:var(--ink); }
.err, .alert-err{ border-left:3px solid var(--bad); }
.ok-msg, .msg, .alert-ok{ border-left:3px solid var(--ok); }

/* ============================ ПУСТО / ПРЕДУПРЕЖДЕНИЕ =================== */
.empty-state{ text-align:center; padding:52px 20px; color:var(--dim); font-family:var(--mer); }
.empty-state .ei{ font-size:42px; margin-bottom:14px; opacity:.4; }
.warn-box{ padding:10px 14px; background:var(--field); border:1px solid var(--line);
  border-left:3px solid var(--warn); border-radius:8px; font-size:13px;
  color:var(--muted); margin-top:10px; }
.hidden{ display:none; }

/* =============================== МОДАЛКА =============================== */
.modal-overlay{ display:none; position:fixed; inset:0; z-index:200;
  background:rgba(6,34,71,.62); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:20px; }
.modal-overlay.show{ display:flex; }
.modal{ position:relative; overflow:hidden; width:min(440px,94vw); background:var(--card);
  border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:var(--card-shadow); }
.modal::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--gold), rgba(209,158,104,0) 60%); }
.modal-title{ font-family:var(--lek); font-size:17px; font-weight:700; color:var(--head);
  margin-bottom:18px; }
.modal-title span{ color:var(--gold); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
  .run-btn:hover{ transform:none; }
}

/* ============================== АДАПТИВ ================================ */
/* Каркас-медиазапросы — как в эталоне ice/fgv: +10% масштаб и сворачивание рельса
   только на десктопе (≥900px); на мобильном — сайдбар-«ящик» с гамбургером. */
@media (min-width:900px){
  .layout{ zoom:1.1; width:calc(100% / 1.1); }
  .login-page .layout{ zoom:1; width:auto; }
  .sidebar{ height:calc(100vh / 1.1); transition:width .28s var(--ease), flex-basis .28s var(--ease); }
  .nav-collapse{ position:absolute; top:12px; right:12px; z-index:3; display:grid; place-items:center;
    width:26px; height:26px; background:var(--panel-group); border:1px solid var(--line);
    color:var(--muted); border-radius:8px; cursor:pointer; font-size:17px; line-height:1;
    transition:background .2s, transform .35s var(--ease); }
  .nav-collapse:hover{ background:var(--nav-hover); color:var(--head); }
  html.nav-collapsed .sidebar{ width:76px; flex:0 0 76px; min-width:0; overflow:hidden; padding-left:.5rem; padding-right:.5rem; }
  html.nav-collapsed .nav-collapse{ top:10px; left:50%; right:auto; transform:translateX(-50%) rotate(180deg); }
  html.nav-collapsed .brand{ text-align:center; padding:2.4rem 0 .7rem; }
  html.nav-collapsed .brand-mark{ display:none; }
  html.nav-collapsed .brand-mark-mini{ display:block; }
  html.nav-collapsed .brand small,
  html.nav-collapsed .ni-tx,
  html.nav-collapsed .pseal,
  html.nav-collapsed .theme-toggle .tt-tx,
  html.nav-collapsed .sidebar-foot .user-name,
  html.nav-collapsed .sidebar-foot .user-role{ display:none; }
  html.nav-collapsed .nav{ margin-top:.8rem; padding:6px 4px; }
  html.nav-collapsed .nav-item{ justify-content:center; gap:0; padding:11px 0; }
  html.nav-collapsed .nav-item.small{ padding:9px 0; }
  html.nav-collapsed .theme-toggle{ justify-content:center; gap:0; }
}
@media (min-width:900px) and (max-height:900px){
  .sidebar .brand{ padding-bottom:8px; }
  .sidebar .brand small{ display:none; }
  .pseal{ display:none; }
}
@media (max-width:899px){
  .layout{ display:block; }
  .topbar{ display:flex; align-items:center; gap:.8rem; position:sticky; top:0; z-index:30;
    background:var(--topbar-bg); color:#fff; padding:.55rem .9rem; border-bottom:1px solid var(--hair); }
  .topbar .brand{ color:#fff; font-family:var(--lek); font-weight:700; font-size:1.15rem; }
  .sidebar{ position:fixed; top:0; left:0; height:100vh; width:264px; z-index:40; padding:20px 16px;
    background:var(--bg); transform:translateX(-100%); transition:transform .25s var(--ease); box-shadow:2px 0 40px rgba(0,0,0,.5); overflow-y:auto; }
  .sidebar::after{ display:none; }
  body.nav-open .sidebar{ transform:none; }
  body.nav-open .sidebar-backdrop{ display:block; position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.55); }
  .content{ padding:1.2rem 1rem; max-width:none; }
  .form-row{ grid-template-columns:1fr; }
}