@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap');

:root {
  /* бренд-синий */
  --blue-ink:#0E2A47; --blue-700:#154B79; --blue:#1B5E96;
  --blue-300:#6F9DCB; --blue-100:#CFE0EF; --blue-50:#ECF2F8;
  /* акцент — оранж-коралл */
  --accent-50:#FDEDE7; --accent-100:#FAD2C4; --accent:#F26A42;
  --accent-600:#DA5530; --accent-800:#9A3818; --accent-900:#5E2410;
  /* нейтрали — тёплый greige */
  --surface:#FFFFFF; --bg:#F7F6F2; --border:#E5E2DA;
  --neutral-300:#CBC7BC; --muted:#6B665C; --text:#18222E;
  /* семантика (fill / text) */
  --success-bg:#E5F2EA; --success:#1E6B47;
  --info-bg:#EAF1F8;    --info:#123F66;
  --warning-bg:#FBF0D4; --warning:#7A5206;
  --error-bg:#FBE5E5;   --error:#8A1F1F;
  /* графики — категориальная (отдельно от семантики) */
  --chart-1:#1B5E96; --chart-2:#F26A42; --chart-3:#3FA08A;
  --chart-4:#7C5CBF; --chart-5:#E8A317; --chart-6:#C2547B;
  /* форма */
  --radius:10px; --radius-sm:8px;
  /* legacy-алиасы: старые ссылки на indigo/fuchsia → бренд (не ломать инлайн) */
  --indigo:var(--blue); --fuchsia:var(--accent); --ink:var(--text); --line:var(--border);
}

* { box-sizing: border-box; }
body { margin:0; font-family:'Manrope', system-ui, sans-serif; color:var(--text);
  background:var(--bg); font-size:14px; line-height:1.5; font-variant-numeric:tabular-nums; }
a { color:var(--blue); }
h1 { font-size:20px; font-weight:600; margin:0 0 14px; }
h2 { font-size:16px; font-weight:600; margin:0 0 10px; }

/* топбар */
.topbar { display:flex; gap:16px; align-items:center; padding:11px 18px;
  background:var(--blue-ink); color:#fff; }
.topbar .logo { font-weight:600; font-size:16px; letter-spacing:-.2px; }
.topbar .tenant { opacity:.75; font-size:13px; }
.topbar .user { margin-left:auto; opacity:.75; font-size:13px; }
.topbar a { color:#fff; opacity:.8; text-decoration:none; font-size:13px; }
.topbar a:hover { opacity:1; }
.topbar button { background:transparent; border:.5px solid rgba(255,255,255,.3);
  color:#fff; padding:5px 11px; border-radius:var(--radius-sm); font:inherit; font-size:13px; cursor:pointer; }
.topbar button:hover { background:rgba(255,255,255,.1); }

/* раскладка / навигация */
.layout { display:flex; min-height:calc(100vh - 46px); }
.sidebar { width:200px; padding:16px; border-right:.5px solid var(--border);
  display:flex; flex-direction:column; gap:4px; background:var(--surface); }
.sidebar a { color:var(--text); text-decoration:none; font-weight:500;
  padding:8px 10px; border-radius:var(--radius-sm); }
.sidebar a:hover { background:var(--bg); }
.sidebar a.active { color:var(--accent-800); background:var(--accent-50); }
.sidebar .disabled { color:var(--neutral-300); padding:8px 10px; }
.content { flex:1; padding:22px 24px; }

/* кнопки */
button, .btn { font:inherit; font-weight:500; cursor:pointer; border-radius:var(--radius-sm);
  padding:8px 14px; border:.5px solid var(--border); background:var(--surface); color:var(--blue); }
button:hover, .btn:hover { background:var(--bg); }
.btn--primary, button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--primary:hover, button.primary:hover { background:var(--accent-600); }

/* фильтры */
.filters { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; align-items:center;
  background:var(--surface); border:.5px solid var(--border); border-radius:var(--radius); padding:12px 14px; }
.filters input, .filters select { padding:7px 10px; border:.5px solid var(--border);
  border-radius:var(--radius-sm); font:inherit; font-size:13px; background:var(--surface); color:var(--text); }
.filters input:focus, .filters select:focus { outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-50); }
.filters label { font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
.date-filter { display:flex; flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; }
.date-inputs { display:flex; gap:6px; align-items:center; }
.date-inputs input { width:138px; }
.date-sep { width:1px; height:22px; background:var(--border); flex-shrink:0; }
.presets { display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:12px; }
.presets a { color:var(--muted); text-decoration:none; padding:3px 9px;
  border:.5px solid var(--border); border-radius:16px; }
.presets a:hover { border-color:var(--accent); color:var(--accent-800); }
/* вертикальные формы (.filters с flex-column): подпись сверху, поле на всю ширину */
.filters[style*="column"] label { display:block; }
.filters[style*="column"] textarea,
.filters[style*="column"] > input { width:100%; }
.filters[style*="column"] code { display:inline-block; margin:1px 0; }

/* таблица разговоров */
table.calls { width:100%; border-collapse:collapse; background:var(--surface);
  border:.5px solid var(--border); border-radius:var(--radius); overflow:hidden; }
table.calls th { text-align:left; padding:10px 12px; border-bottom:.5px solid var(--border);
  background:var(--bg); color:var(--muted); font-size:12px; font-weight:500; }
table.calls td { text-align:left; padding:10px 12px; border-bottom:.5px solid var(--border); }
table.calls tbody tr { cursor:pointer; }
table.calls tbody tr:hover { background:var(--bg); }
table.calls tbody tr:last-child td { border-bottom:0; }

/* мета и состояния */
.meta { display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); margin-bottom:14px; font-size:13px; }
.meta .warn { color:var(--error); }
.meta .ok { color:var(--success); }
.empty, .state { color:var(--muted); padding:16px 0; }

/* плеер */
audio#player { width:100%; margin-bottom:16px; }

/* карточка разговора: транскрипт | анализ */
.columns { display:flex; gap:20px; align-items:flex-start; }
.transcript { flex:2; max-height:68vh; overflow-y:auto; background:var(--surface);
  border:.5px solid var(--border); border-radius:var(--radius); padding:16px; }
.analysis { flex:1; max-height:68vh; overflow-y:auto; background:var(--surface);
  border:.5px solid var(--border); border-radius:var(--radius); padding:16px; }

/* сегменты: оператор=синий, клиент=коралл — продолжение знака «сплит-каналы» */
.seg { padding:7px 10px; border-radius:var(--radius-sm); cursor:pointer; scroll-margin:12px; margin-bottom:6px; }
.seg b { font-weight:500; }
.seg.operator b { color:var(--blue); }
.seg.client b { color:var(--accent-800); }
.seg.active { background:var(--accent-50); box-shadow:inset 3px 0 0 var(--accent); }
.back { color:var(--muted); text-decoration:none; font-size:13px; }
.back:hover { color:var(--accent-800); }

/* резюме и блоки анализа */
.summary { white-space:pre-wrap; background:var(--bg); padding:10px 12px; border-radius:var(--radius-sm); }
.sum-outcome { background:var(--bg); padding:9px 11px; border-radius:var(--radius-sm); }
.stop-words, .policies { margin-top:12px; }
.stop-words ul, .policies ul { list-style:none; padding:0; margin:6px 0 0;
  display:flex; flex-direction:column; gap:6px; }
.stop-words li, .policies li { font-size:13px; border-left:3px solid var(--accent);
  border-radius:0; padding-left:9px; }

/* бейджи (база + тональность/семантика) */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:12px;
  padding:2px 9px; border-radius:14px; background:var(--info-bg); color:var(--info); }
.badge--pos { background:var(--success-bg); color:var(--success); }
.badge--neu { background:#EFEDE7; color:var(--muted); }
.badge--neg { background:var(--error-bg); color:var(--error); }
.badge--warn { background:var(--warning-bg); color:var(--warning); }

/* метрик-карточки (шапка карточки разговора и дашборд) */
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; margin-bottom:16px; }
.metric { background:var(--surface); border:.5px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; }
.metric .label { font-size:12px; color:var(--muted); margin-bottom:3px; }
.metric .value { font-size:18px; font-weight:600; }

/* KPI-карточка дашборда (.card + .kpi) */
.kpi { margin-bottom:18px; }
.card { background:var(--surface); border:.5px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.card > div:first-child { font-size:12px; color:var(--muted); margin-bottom:4px; }
.card b { color:var(--text); }
.card > div:last-child { font-size:13px; color:var(--muted); margin-top:4px; }