:root {
  /* wats-tech.com palette (Phase 1.7 §2) */
  --wats-navy: #0F2A3D;
  --wats-navy-light: #1F3F58;
  --wats-yellow: #F5C518;
  --wats-yellow-soft: #FFF4D0;
  --wats-text: #1A1A1A;
  --wats-muted: #6B7280;
  --wats-border: #E5E7EB;
  --wats-bg: #FFFFFF;
  --wats-bg-alt: #F9FAFB;
  --wats-red: #DC2626;
  --wats-red-bg: #FEE2E2;
  --wats-amber: #F59E0B;
  --wats-amber-bg: #FEF3C7;
  --wats-green: #16A34A;
  --wats-green-bg: #DCFCE7;
  --wats-blue: #2563EB;
  --wats-blue-bg: #DBEAFE;

  /* legacy aliases for existing components */
  --bg: var(--wats-bg-alt);
  --bg-card: var(--wats-bg);
  --ink: var(--wats-text);
  --ink-soft: var(--wats-muted);
  --line: var(--wats-border);
  --accent: var(--wats-blue);
  --accent-soft: var(--wats-blue-bg);
  --error: var(--wats-red);
  --error-soft: var(--wats-red-bg);
  --radius: 8px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ─── Semantic state tier (Dashboard MVP, 2026-05-21) ─────────────────
     Используется виджетами через `state="success|warn|danger|info|neutral"`.
     Маппится на наши --wats-* — цвета согласованы с остальным UI.
     Правило: цвет = семантика, а не «красота».
       success — норма, в SLA, выполнено
       warn    — близко к границе, нужно внимание
       danger  — нарушение, падение, требует действия
       info    — нейтральная подсветка, links, не-критичная информация
       neutral — фоновый, без аларма (счётчики, количество)                */
  --state-success-fg:     var(--wats-green);
  --state-success-bg:     var(--wats-green-bg);
  --state-success-border: var(--wats-green);

  --state-warn-fg:        #B07000;            /* теплее чем wats-amber для текста */
  --state-warn-bg:        var(--wats-amber-bg);
  --state-warn-border:    var(--wats-amber);

  --state-danger-fg:      var(--wats-red);
  --state-danger-bg:      var(--wats-red-bg);
  --state-danger-border:  var(--wats-red);

  --state-info-fg:        var(--wats-blue);
  --state-info-bg:        var(--wats-blue-bg);
  --state-info-border:    var(--wats-blue);

  --state-neutral-fg:     var(--wats-muted);
  --state-neutral-bg:     var(--wats-bg-alt);
  --state-neutral-border: var(--wats-border);

  /* primary = wats yellow (брендовый акцент, для active-states/CTA) */
  --state-primary-fg:     var(--wats-navy);
  --state-primary-bg:     var(--wats-yellow-soft);
  --state-primary-border: var(--wats-yellow);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji",
    "Apple Color Emoji", "Noto Color Emoji", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topnav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--wats-navy);
  color: #fff;
  border-bottom: 3px solid var(--wats-yellow);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}

.topnav .brand { font-weight: 700; color: #fff; letter-spacing: 0.2px; }
.topnav .links { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
.topnav .links a {
  color: rgba(255,255,255,0.78);
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
}
.topnav .links a.active { color: #fff; border-bottom-color: var(--wats-yellow); }
.topnav .links a:hover { color: #fff; text-decoration: none; }
.topnav .links a.muted { font-size: 13px; opacity: 0.6; }
.topnav .user { display: flex; gap: 12px; align-items: center; color: rgba(255,255,255,0.7); font-size: 13px; }
.topnav .user .logout { color: rgba(255,255,255,0.7); }
.topnav .user .logout:hover { color: var(--wats-yellow); }

.container {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 24px;
}

h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 0 0 12px; color: var(--ink); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.muted { color: var(--ink-soft); font-size: 14px; }

.kv { list-style: none; padding: 0; margin: 0; }
.kv li { display: flex; gap: 12px; padding: 4px 0; }
.kv li span { color: var(--ink-soft); min-width: 140px; }
code { font-family: var(--mono); font-size: 13px; background: var(--bg); padding: 2px 6px; border-radius: 4px; }

.login-card {
  max-width: 380px;
  margin: 80px auto;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.login-card h1 { margin-bottom: 4px; }
.login-card .muted { margin-top: 0; margin-bottom: 20px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.login-card input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  background: var(--bg);
}
.login-card input:focus { border-color: var(--accent); background: var(--bg-card); }
.login-card button {
  margin-top: 6px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.login-card button:hover { background: #2348ad; }
.login-card .error {
  background: var(--error-soft);
  color: var(--error);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 13px;
}

.footer {
  text-align: center;
  color: var(--ink-soft);
  font-size: 12px;
  padding: 24px;
}

ul { padding-left: 20px; }
ul li { margin: 4px 0; }

.small { font-size: 12px; }
.mono { font-family: var(--mono); }

.digest-text {
  background: var(--bg);
  padding: 14px 16px;
  border-radius: 6px;
  border: 1px solid var(--line);
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 12px;
  overflow-x: auto;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
table.data td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data tr:hover td { background: var(--bg); }
table.data tr.row-error td { background: var(--error-soft); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
}

.ok { color: #2e7d32; font-size: 12px; }
.err { color: var(--error); font-size: 12px; }

.empty { text-align: center; padding: 40px 20px; }
.empty h2 { margin-top: 0; }

.filters form {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.filters label { display: flex; gap: 6px; align-items: center; }
.filters select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-card);
  font-family: inherit;
  font-size: 13px;
}
.filters button {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
}

.pager {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
}

details summary { cursor: pointer; }
details[open] summary { font-weight: 500; margin-bottom: 6px; }

.legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
}
.cal-cell-mini {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

table.calendar {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 4px;
  margin-bottom: 20px;
}
table.calendar th {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: uppercase;
  text-align: left;
  padding: 4px 8px;
}
.cal-cell {
  vertical-align: top;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  min-height: 80px;
  height: 80px;
  font-size: 11px;
  background: var(--bg-card);
  overflow: hidden;
}
.cal-cell.is-today { box-shadow: 0 0 0 2px var(--accent) inset; }
.cal-cell .day-head {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 12px;
}
.cal-cell .day-num { color: var(--ink); }
.cal-cell .month-label { color: var(--ink-soft); font-size: 10px; }
.cal-cell .proj {
  display: block;
  padding: 2px 4px;
  margin: 2px 0;
  border-radius: 3px;
  background: rgba(0,0,0,0.04);
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-cell .proj code { background: transparent; font-size: 10px; }
.cal-cell .proj .partner { color: var(--ink-soft); margin-left: 4px; font-size: 10px; }
.cal-cell .proj:hover { background: rgba(0,0,0,0.08); text-decoration: none; }

.cal-cell.past { background: #f1f5f9; color: #94a3b8; opacity: 0.55; }
.cal-cell.urgent { background: #fff1b8; border-color: #f0c94a; }
.cal-cell.urgent .proj { background: rgba(240,180,40,0.22); }
.cal-cell.urgent .day-num { color: #92400e; font-weight: 700; }
.cal-cell.soon { background: #fff7e0; border-color: #f0d28a; }
.cal-cell.soon .proj { background: rgba(220,150,40,0.15); }
.cal-cell.watch { background: #fdfbed; border-color: #ece6a8; }
.cal-cell.calm { background: var(--bg-card); }

.cal-cell-mini.past { background: #f1f5f9; color: #94a3b8; }
.cal-cell-mini.urgent { background: #fff1b8; }
.cal-cell-mini.soon { background: #fff7e0; }
.cal-cell-mini.watch { background: #fdfbed; }
.cal-cell-mini.calm { background: var(--bg-card); }
.cal-cell .day-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 10px; font-weight: 600; border-radius: 4px;
  background: rgba(0,0,0,0.06); color: #475569;
}
.cal-cell.urgent .day-tag { background: rgba(146,64,14,0.15); color: #92400e; }

/* Agent suggestions — actionable list */
.agent-sugg-list { list-style: none; padding: 0; margin: 0; }
.agent-sugg-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(245, 197, 24, 0.08); border: 1px solid rgba(245, 197, 24, 0.25);
  margin-bottom: 6px; font-size: 13px;
}
.agent-sugg-icon { font-size: 16px; line-height: 1; }
.agent-sugg-text { flex: 1; }
.agent-sugg-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.agent-sugg-actions .btn {
  display: inline-block; padding: 4px 10px; font-size: 12px;
  border-radius: 5px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
}
.agent-sugg-actions .btn-primary {
  background: #0F2A3D; color: #fff;
}
.agent-sugg-actions .btn-primary:hover { background: #18415e; }
.agent-sugg-actions .btn-secondary {
  background: #fff; color: #0F2A3D; border-color: #cbd5e1;
}
.agent-sugg-actions .btn-secondary:hover { background: #f1f5f9; }

/* Projects table — coloured rows by deadline (Тимур ТЗ 09.06.2026 §6.2).
   Levа-вертикаль (4px border) + слабый тинт чтобы текст оставался читаемым. */
table.data tr.row-overdue td { border-top: 1px solid #fecaca; border-bottom: 1px solid #fecaca; }
table.data tr.row-overdue td:first-child { border-left: 4px solid #dc2626; }
table.data tr.row-overdue { background: rgba(220, 38, 38, 0.10); }
table.data tr.row-overdue:hover { background: rgba(220, 38, 38, 0.16); }

table.data tr.row-urgent td:first-child { border-left: 4px solid #f59e0b; }
table.data tr.row-urgent { background: rgba(245, 158, 11, 0.12); }
table.data tr.row-urgent:hover { background: rgba(245, 158, 11, 0.18); }

table.data tr.row-soon td:first-child { border-left: 4px solid #f5c518; }
table.data tr.row-soon { background: rgba(245, 197, 24, 0.10); }
table.data tr.row-soon:hover { background: rgba(245, 197, 24, 0.16); }

table.data tr.row-calm td:first-child { border-left: 4px solid #22c55e; }
table.data tr.row-calm { background: rgba(34, 197, 94, 0.05); }
table.data tr.row-calm:hover { background: rgba(34, 197, 94, 0.10); }

table.data tr.row-archived td:first-child { border-left: 4px solid #cbd5e1; }
table.data tr.row-archived { color: #94a3b8; opacity: 0.7; }

/* ───────── 3-column home layout (Тимур ТЗ 09.06.2026 §3.1) ───────── */
.home-3col {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 50fr) minmax(0, 20fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 1100px) {
  .home-3col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-col-right { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .home-3col { grid-template-columns: 1fr; }
  .home-col-right { grid-column: auto; }
}

.home-col {
  background: var(--bg-card, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  padding: 12px;
  min-width: 0;            /* prevents children from blowing out grid track */
}
.home-col-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}
.home-col-title {
  font-size: 14px; font-weight: 700; color: #0F2A3D;
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px;
}
.home-col-title:hover { color: #18415e; text-decoration: underline; }
.home-col-title-sm {
  font-size: 12px; font-weight: 700; color: #0F2A3D;
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px;
}

.home-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.home-list li {
  padding: 8px 10px; border-radius: 6px;
  background: #f8fafc;
  border-left: 3px solid #cbd5e1;
}
.home-list li:hover { background: #f1f5f9; }
.home-list .strong { font-weight: 600; }
.home-list-meta { margin-top: 2px; }
.home-list-meta .badge { font-size: 10px; padding: 0 4px; }
.home-list-num {
  display: flex; gap: 8px; align-items: baseline; margin-top: 4px;
  font-size: 12px; flex-wrap: wrap;
}

.home-projects-table { width: 100%; font-size: 12px; }
.home-projects-table th { font-size: 11px; padding: 4px 6px; }
.home-projects-table td { padding: 4px 6px; }
.home-projects-table a.link { font-weight: 500; }

.home-sidebar-block {
  background: #f8fafc; border-radius: 6px; padding: 10px;
  margin-bottom: 10px; border-left: 3px solid #cbd5e1;
}
.home-sidebar-block:last-child { margin-bottom: 0; }
.home-funnel-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px;
}
.home-funnel-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.home-funnel-list .text-danger { color: #dc2626; }

.btn-small {
  padding: 1px 6px; font-size: 11px; border-radius: 3px;
  border: 1px solid #cbd5e1; background: #fff; cursor: pointer;
}
.btn-small:hover { background: #0F2A3D; color: #fff; }

/* KPI card link wrapper (Тимур ТЗ §3.2 — drill-down с каждой KPI) */
.kpi-card-link { display: contents; }
.kpi-card-link .widget--kpi { cursor: pointer; transition: transform 0.1s, box-shadow 0.15s; }
.kpi-card-link:hover .widget--kpi {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 42, 61, 0.08);
}

/* Journey channel filter chips — Тимур ТЗ §9.2 */
.journey-chip {
  display: inline-block; padding: 4px 10px; font-size: 12px;
  border-radius: 14px; border: 1px solid #cbd5e1; background: #fff;
  color: #475569; cursor: pointer; transition: all 0.15s ease;
  font-family: inherit;
}
.journey-chip:hover { background: #f1f5f9; }
.journey-chip.active {
  background: #0F2A3D; color: #fff; border-color: #0F2A3D;
}

.kv-table th { width: 220px; text-align: left; }
.kv-table th, .kv-table td { padding: 6px 10px; }

.abc {
  display: inline-block;
  width: 24px;
  text-align: center;
  border-radius: 4px;
  padding: 2px 0;
  font-weight: 600;
  font-size: 12px;
}
.abc-A { background: #fde4e4; color: #b91c1c; }
.abc-B { background: #fff3d6; color: #92400e; }
.abc-C { background: #e7e9ec; color: #475569; }

/* CRM zones */
.zone-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 18px;
}
.zone-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--ink-soft);
  font-size: 13px;
}
.zone-tab:hover { color: var(--ink); text-decoration: none; border-color: #cdd2d8; }
.zone-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.zone-tab .badge {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0,0,0,0.08);
  font-size: 12px;
  font-weight: 600;
}
.zone-tab.active .badge { background: rgba(255,255,255,0.18); }

.zone-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.zone-badge.large { font-size: 14px; padding: 4px 12px; }
.zone-badge.zone-working   { background: #fde4e4; color: #b91c1c; }
.zone-badge.zone-active    { background: #d4f4d4; color: #166534; }
.zone-badge.zone-cold      { background: #dcebff; color: #1e3a8a; }
.zone-badge.zone-archive   { background: #e7e9ec; color: #475569; }
.zone-badge.zone-potential { background: #f3e0ff; color: #6b21a8; }
.zone-badge.zone-acquaintance { background: #ffe6cc; color: #9a3412; }

.zone-tab.zone-working .badge   { background: #fde4e4; color: #b91c1c; }
.zone-tab.zone-active .badge    { background: #d4f4d4; color: #166534; }
.zone-tab.zone-cold .badge      { background: #dcebff; color: #1e3a8a; }
.zone-tab.zone-archive .badge   { background: #e7e9ec; color: #475569; }
.zone-tab.zone-potential .badge { background: #f3e0ff; color: #6b21a8; }
.zone-tab.zone-acquaintance .badge { background: #ffe6cc; color: #9a3412; }
.zone-tab.zone-working.active .badge,
.zone-tab.zone-active.active .badge,
.zone-tab.zone-cold.active .badge,
.zone-tab.zone-archive.active .badge,
.zone-tab.zone-potential.active .badge { background: rgba(255,255,255,0.22); color: #fff; }

.search-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.search-form input[type=text] {
  flex: 1;
  max-width: 360px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
}
.search-form button {
  padding: 7px 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.search-form button:hover { background: #000; }
.search-form select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-card);
}
.search-form .checkbox { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }

.role-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
}
.rt-p { background: #dde7ff; color: #1e40af; }
.rt-c { background: #ffe4ec; color: #9d174d; }

.open-dot { color: #16a34a; font-size: 14px; line-height: 1; }
.buyer-badge {
  color: #16a34a;
  font-size: 14px;
  margin-left: 4px;
  cursor: help;
}

.deadline-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--mono);
}
.deadline-overdue { background: #fde4e4; color: #b91c1c; font-weight: 600; }
.deadline-urgent  { background: #ffe6cc; color: #9a3412; font-weight: 600; }
.deadline-soon    { background: #fff3d6; color: #92400e; }
.deadline-calm    { background: transparent; color: var(--ink-soft); }

.alert-box {
  border: 1px solid #f5b3b3;
  background: #fff3f0;
  color: #b91c1c;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 0 0 12px;
  font-size: 14px;
}

.breadcrumb { margin: 0 0 8px; font-size: 13px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

dl.kv { margin: 0; }
dl.kv dt { color: var(--ink-soft); font-size: 12px; margin-top: 8px; }
dl.kv dd { margin: 2px 0 0; }
dl.kv dt.role-divider {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin-top: 14px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  resize: vertical;
}
.row { display: flex; gap: 12px; align-items: center; margin-top: 8px; }

.src-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
}
.aliases { margin: 0; padding-left: 18px; }
td.num, th.num { text-align: right; }
.link { color: var(--accent); }

/* Phase 1.7 — dashboard widgets */
.alert-box.sticky-top { position: sticky; top: 60px; z-index: 5; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0;
}
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--wats-border);
  border-radius: 8px;
  padding: 14px 16px;
  min-height: 96px;
}
.kpi-label { color: var(--wats-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.kpi-value { font-size: 26px; font-weight: 700; line-height: 1.2; margin-top: 6px; color: var(--wats-text); }
.kpi-value.muted { color: var(--wats-muted); font-weight: 500; }
.kpi-value.good  { color: var(--wats-green); }
.kpi-value.warn  { color: #B07000; }                 /* darker than yellow for contrast */
.kpi-value.bad   { color: var(--wats-red); }
.kpi-value .kpi-unit { font-size: 14px; font-weight: 500; color: var(--wats-muted); }
.kpi-card.clickable { cursor: pointer; transition: box-shadow 0.15s ease; }
.kpi-card.clickable:hover { box-shadow: 0 2px 8px rgba(15,42,61,0.15); }
.kpi-card.clickable a { color: inherit; text-decoration: none; display: block; }
.kpi-delta { margin-top: 4px; font-size: 12px; color: var(--wats-muted); }
.kpi-delta.up { color: var(--wats-green); font-weight: 600; }
.kpi-delta.down { color: var(--wats-red); font-weight: 600; }

.dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}

.funnel-bar {
  display: flex;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  margin: 8px 0;
}
.funnel-seg {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 13px;
  min-width: 28px;
}
.funnel-seg span { padding: 0 6px; }
.seg-blue   { background: var(--wats-blue); }
.seg-amber  { background: var(--wats-amber); }
.seg-yellow { background: var(--wats-yellow); color: var(--wats-text); }
.seg-navy   { background: var(--wats-navy); }
.seg-green  { background: var(--wats-green); }
.seg-muted  { background: #94a3b8; }

.funnel-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 10px;
  font-size: 12px; color: var(--wats-muted);
}
.legend-item i {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 4px;
  vertical-align: middle;
}
.legend-item strong { color: var(--wats-text); margin-left: 2px; }

.agent-sugg {
  margin-top: 14px;
  background: var(--wats-yellow-soft);
  border-left: 3px solid var(--wats-yellow);
  padding: 8px 12px;
  border-radius: 4px;
}
.agent-sugg h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--wats-text); }
.agent-sugg ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }

.hot-list { list-style: none; padding: 0; margin: 0; }
.hot-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--wats-border);
  font-size: 13px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.hot-list li:last-child { border-bottom: 0; }

.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-list li {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--wats-border);
}
.activity-list li:last-child { border-bottom: 0; }
.act-icon {
  flex: 0 0 28px; height: 28px; line-height: 28px;
  text-align: center; font-size: 14px;
  border-radius: 50%;
  background: var(--wats-bg-alt);
  color: var(--wats-muted);
}
.act-icon.act-won { background: var(--wats-green-bg); color: var(--wats-green); }
.act-icon.act-lost { background: var(--wats-red-bg); color: var(--wats-red); }
.act-icon.act-expired { background: var(--wats-red-bg); color: var(--wats-red); }
.act-icon.act-archived { background: var(--wats-bg-alt); color: var(--wats-muted); }
.act-icon.act-new_project { background: var(--wats-yellow-soft); color: var(--wats-amber); }
.act-icon.act-status_change { background: var(--wats-blue-bg); color: var(--wats-blue); }
.act-icon.act-shipment { background: var(--wats-green-bg); color: var(--wats-green); }
.act-icon.act-contact { background: var(--wats-blue-bg); color: var(--wats-blue); }
.act-icon.act-note { background: var(--wats-yellow-soft); color: var(--wats-amber); }
.act-body { flex: 1; min-width: 0; }
.act-title { font-size: 13px; }
.act-meta { margin-top: 2px; }

/* Phase 1.7 — mobile responsive */
@media (max-width: 767px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .dash-row { grid-template-columns: 1fr; }
  .topnav { gap: 12px; padding: 10px 12px; }
  .topnav .links { gap: 12px; font-size: 13px; }
  .container { padding: 0 12px; }
  .kpi-value { font-size: 22px; }
  .funnel-legend { font-size: 11px; gap: 8px; }
  .grid-2 { grid-template-columns: 1fr; }
  table.data { font-size: 13px; }
  .topnav .links a { padding: 4px 2px; }
  /* touch targets ≥ 44px */
  .topnav .links a, .zone-tab, .search-form button { min-height: 36px; display: inline-flex; align-items: center; }
  .funnel-bar { height: 28px; }
}

/* Yellow primary buttons (CTA) */
.quick-search { position: relative; min-width: 240px; max-width: 320px; flex: 0 1 auto; }
.quick-search input {
  width: 100%; padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.10);
  border-radius: 4px; color: #fff;
  font-size: 13px;
}
.quick-search input::placeholder { color: rgba(255,255,255,0.55); }
.quick-search input:focus { outline: none; border-color: var(--wats-yellow); background: rgba(255,255,255,0.15); }
.qs-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--wats-bg); color: var(--wats-text);
  border: 1px solid var(--wats-border); border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  margin-top: 4px;
  max-height: 360px; overflow-y: auto;
  z-index: 20;
}
.qs-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-bottom: 1px solid var(--wats-border);
  text-decoration: none; color: var(--wats-text);
}
.qs-item:hover { background: var(--wats-bg-alt); text-decoration: none; }
.qs-name { font-weight: 600; font-size: 13px; }
.qs-meta { font-size: 11px; color: var(--wats-muted); }
.qs-empty { padding: 10px 12px; color: var(--wats-muted); font-size: 13px; text-align: center; }
@media (max-width: 767px) { .quick-search { min-width: 160px; } }

.btn-primary, .search-form button[type=submit]:not(.muted) {
  background: var(--wats-yellow);
  color: var(--wats-text);
  border: 1px solid var(--wats-yellow);
  font-weight: 600;
}
.btn-primary:hover, .search-form button[type=submit]:hover { background: #e0b317; }

/* Stage 1 — Partner Journey timeline */
.journey { margin-top: 8px; }
.journey-day { margin-top: 14px; }
.journey-day:first-child { margin-top: 4px; }
.journey-day-header {
  font-size: 13px; font-weight: 700;
  color: var(--wats-text); text-transform: uppercase; letter-spacing: 0.5px;
  padding: 8px 12px;
  margin-left: -12px; margin-right: -12px;
  border-bottom: 1px solid var(--wats-border);
  background: #F8FAFC;
  position: sticky; top: 60px; z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  border-radius: 4px;
}
.journey-list { list-style: none; padding: 0; margin: 0; }
.journey-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px 10px 12px;
  border-bottom: 1px solid var(--wats-border);
  border-left: 3px solid transparent;
  margin-left: -12px;
  transition: background 0.1s;
}
.journey-item:last-child { border-bottom: 0; }
.journey-clickable { cursor: pointer; }
.journey-item:hover { background: var(--wats-bg-alt); }
.journey-icon {
  flex: 0 0 32px; height: 32px; line-height: 32px;
  text-align: center; font-size: 18px;
  border-radius: 50%;
  background: var(--wats-bg-alt);
  border: 1px solid var(--wats-border);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
    -apple-system, "Segoe UI", sans-serif;
}
.journey-body { flex: 1; min-width: 0; }
.journey-title { font-size: 14px; line-height: 1.4; word-break: break-word; }
.journey-meta { margin-top: 2px; word-break: break-word; }
.journey-time {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11px; opacity: 0.65;
  white-space: nowrap; padding-top: 6px;
}

/* Per-source colour distinction */
.journey-shipment {
  border-left-color: var(--wats-green);
}
.journey-shipment .journey-icon {
  background: var(--wats-green-bg); border-color: var(--wats-green);
}
.journey-shipment .journey-title { font-weight: 600; }

/* Project events — общий fallback (status_change по умолчанию) */
.journey-project_event {
  border-left-color: var(--wats-yellow);
}
.journey-project_event .journey-icon {
  background: var(--wats-yellow-soft); border-color: var(--wats-yellow);
}
/* Project event subtypes */
.journey-project_event-status,
.journey-project_event-lifecycle {
  border-left-color: var(--wats-yellow);
}
.journey-project_event-status .journey-icon,
.journey-project_event-lifecycle .journey-icon {
  background: var(--wats-yellow-soft); border-color: var(--wats-yellow);
}
.journey-project_event-deadline-overdue {
  border-left-color: var(--wats-red);
}
.journey-project_event-deadline-overdue .journey-icon {
  background: var(--wats-red-bg); border-color: var(--wats-red);
}
.journey-project_event-deadline-extended {
  border-left-color: var(--wats-amber);
}
.journey-project_event-deadline-extended .journey-icon {
  background: var(--wats-amber-bg); border-color: var(--wats-amber);
}
.journey-project_event-decision-won {
  border-left-color: var(--wats-green);
}
.journey-project_event-decision-won .journey-icon {
  background: var(--wats-green-bg); border-color: var(--wats-green);
}
.journey-project_event-decision-won .journey-title { font-weight: 700; color: #166534; }
.journey-project_event-decision-lost {
  border-left-color: var(--wats-red);
}
.journey-project_event-decision-lost .journey-icon {
  background: var(--wats-red-bg); border-color: var(--wats-red);
}
.journey-project_event-decision-lost .journey-title { color: #b91c1c; }

.journey-contact {
  border-left-color: var(--wats-amber);
}
.journey-contact .journey-icon {
  background: var(--wats-amber-bg); border-color: var(--wats-amber);
}
.journey-contact .journey-title { font-weight: 600; }

/* Engagement — most prominent (proactive WATS work) */
.journey-engagement {
  border-left-color: var(--wats-blue) !important;
  background: var(--wats-blue-bg);
}
.journey-engagement:hover { background: #C5DAFB; }
.journey-engagement .journey-icon {
  background: var(--wats-blue); color: #fff; border-color: var(--wats-blue);
}
.journey-engagement .journey-title { font-weight: 700; }

/* Email — мутный, чтобы не доминировал. Direction различается */
.journey-email-in {
  border-left-color: #9CA3AF;  /* серый — входящее, нейтрально */
}
.journey-email-in .journey-icon {
  background: #F3F4F6; border-color: #D1D5DB; opacity: 0.85;
}
.journey-email-in .journey-title { color: var(--wats-muted); font-size: 13px; }

.journey-email-out {
  border-left-color: var(--wats-blue);  /* синий — исходящее, наша активность */
}
.journey-email-out .journey-icon {
  background: var(--wats-blue-bg); border-color: var(--wats-blue);
}
.journey-email-out .journey-title { color: var(--wats-text); font-size: 13px; font-weight: 500; }

/* Stage 3 — Partner site presence */
.presence-card {
  padding: 12px 14px;
  border-radius: 6px;
  border-left: 4px solid var(--wats-border);
  background: var(--wats-bg-alt);
}
.presence-status {
  font-size: 16px; font-weight: 700; margin-bottom: 4px;
}
.presence-rich    { border-left-color: var(--wats-green);  background: var(--wats-green-bg); }
.presence-partial { border-left-color: var(--wats-amber);  background: var(--wats-amber-bg); }
.presence-none    { border-left-color: var(--wats-red);    background: var(--wats-red-bg); }
.presence-unknown { border-left-color: #94a3b8;            background: var(--wats-bg-alt); }
.presence-error   { border-left-color: var(--wats-red);    background: var(--wats-red-bg); }

/* Compact legend above journey */
.journey-legend {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  padding: 8px 0 12px;
  border-bottom: 1px dashed var(--wats-border);
  margin-bottom: 4px;
}
.journey-legend > span {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.journey-legend-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  font-size: 13px;
  border-radius: 50%;
  background: var(--wats-bg-alt); border: 1px solid var(--wats-border);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
    -apple-system, sans-serif;
}

.decision-actions details { margin: 8px 0; border: 1px solid var(--wats-border); border-radius: 6px; }
.decision-actions summary {
  cursor: pointer; padding: 10px 14px; font-weight: 600;
  list-style: none; user-select: none;
}
.decision-actions summary::-webkit-details-marker { display: none; }
.decision-actions summary.btn-primary { background: var(--wats-yellow); color: var(--wats-text); }
.decision-actions summary.btn-success { background: var(--wats-green-bg); color: var(--wats-green); border-color: var(--wats-green); }
.decision-actions summary.btn-danger { background: var(--wats-red-bg); color: var(--wats-red); border-color: var(--wats-red); }
.decision-form { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--wats-bg-alt); }
.decision-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--wats-muted); }
.decision-form input, .decision-form select { padding: 8px 10px; border: 1px solid var(--wats-border); border-radius: 4px; font-size: 14px; }
.decision-form button { align-self: flex-start; padding: 8px 16px; background: var(--wats-navy); color: #fff; border: 0; border-radius: 4px; cursor: pointer; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════
   Widget system (Dashboard MVP, 2026-05-21)
   Унифицированный паттерн head/body/footer для всех блоков главной.
   Используется через {% call widget(title, state=...) %}{% endcall %}.
   ──────────────────────────────────────────────────────────────────────── */

.widget {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.widget:hover { border-color: var(--wats-muted); }

/* Левая цветная полоска индикатора состояния (для KPI и важных виджетов) */
.widget--state-success { border-left: 4px solid var(--state-success-border); }
.widget--state-warn    { border-left: 4px solid var(--state-warn-border); }
.widget--state-danger  { border-left: 4px solid var(--state-danger-border); }
.widget--state-info    { border-left: 4px solid var(--state-info-border); }
.widget--state-neutral { border-left: 4px solid var(--state-neutral-border); }
.widget--state-primary { border-left: 4px solid var(--state-primary-border); }

/* Голова виджета: иконка + заголовок + period-пилюля + action-кнопка */
.widget-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
}
.widget-head__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.widget-head__icon { font-size: 16px; line-height: 1; }
.widget-head__period {
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.widget-head__period--frozen {
  /* фиксированная семантика — не подчиняется глобальному period */
  opacity: 0.6;
  font-style: italic;
}
.widget-head__action {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 4px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.12s ease;
}
.widget-head__action:hover {
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
}

.widget-body {
  padding: 14px 16px;
}
.widget-body--tight { padding: 10px 12px; }
.widget-body--zero  { padding: 0; }                /* для виджетов с собственной вёрсткой таблиц */

.widget-foot {
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
}

/* Empty-state placeholder в теле виджета */
.widget-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-soft);
}
.widget-empty__icon { font-size: 28px; opacity: 0.5; display: block; margin-bottom: 6px; }
.widget-empty__text { font-size: 14px; margin: 0 0 12px; }
.widget-empty__cta {
  display: inline-block;
  padding: 6px 14px;
  background: var(--state-info-bg);
  color: var(--state-info-fg);
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
}
.widget-empty__cta:hover { background: var(--state-info-fg); color: white; text-decoration: none; }

/* ───────── KPI-карточка (вариант виджета с большим числом) ───────── */

/* KPI: крупные числа в стиле Битрикс/современных дашбордов (см. мокап 21.05.2026) */
.widget--kpi { padding: 0; }
.widget--kpi .widget-body { padding: 18px 20px 14px; }
.widget--kpi .kpi-label {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 10px;
  font-weight: 500;
}
.widget--kpi .kpi-value {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.2px;
  color: var(--ink);
  font-feature-settings: "tnum";   /* табличные цифры — выравнивание разрядов */
  white-space: nowrap;             /* сумма — всегда в одну строку (не ломать число) */
}
.widget--kpi .kpi-value--success { color: var(--ink); }   /* основное число — нейтральный */
.widget--kpi .kpi-value--warn    { color: var(--ink); }
.widget--kpi .kpi-value--danger  { color: var(--ink); }
.widget--kpi .kpi-unit {
  font-size: 15px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: 0;
}
.widget--kpi .kpi-delta {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 10px;
}
.widget--kpi .kpi-context {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* ───── Цветные бейджи-пилюли для delta/threshold (мокап-стиль) ─────
   Используется так: <span class="badge badge--danger">↓ 62.4% к прошлому</span> */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.badge--success { background: var(--state-success-bg); color: var(--state-success-fg); }
.badge--warn    { background: var(--state-warn-bg);    color: var(--state-warn-fg); }
.badge--danger  { background: var(--state-danger-bg);  color: var(--state-danger-fg); }
.badge--info    { background: var(--state-info-bg);    color: var(--state-info-fg); }
.badge--neutral { background: var(--state-neutral-bg); color: var(--state-neutral-fg); }
.badge--lg { padding: 5px 12px; font-size: 13px; }

/* ───── Square icon-bg перед заголовком виджета (мокап-стиль) ─────
   Голубая мягкая подложка вокруг иконки в widget-head. */
.widget-head__icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--state-info-bg);
  color: var(--state-info-fg);
  font-size: 16px;
  flex-shrink: 0;
}
.widget-head__icon-box--success { background: var(--state-success-bg); color: var(--state-success-fg); }
.widget-head__icon-box--warn    { background: var(--state-warn-bg);    color: var(--state-warn-fg); }
.widget-head__icon-box--danger  { background: var(--state-danger-bg);  color: var(--state-danger-fg); }
.widget-head__icon-box--neutral { background: var(--state-neutral-bg); color: var(--state-neutral-fg); }
.widget-head__icon-box--primary { background: var(--state-primary-bg); color: var(--state-primary-fg); }

/* Legacy list-style для виджетов «Горит сегодня», «Истёкли», «Молчат», «Новые 24» —
   те же правила что в строке 625 .hot-list li, просто скопированы под отдельным именем
   чтобы не пересекаться с новым BEM-стилем .hot-list__item */
.legacy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.legacy-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.4;
}
.legacy-list li:last-child { border-bottom: 0; }

/* ───── Список «Самые горящие» с аватарами инициалов ─────
   Используется в drill-down SLA. Каждая строка: avatar + 2 строки + большое число справа */
.hot-list { list-style: none; padding: 0; margin: 0; }
.hot-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.hot-list__item:last-child { border-bottom: 0; }
.hot-list__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
  letter-spacing: -0.2px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--wats-blue), var(--wats-navy));
}
.hot-list__avatar--blue   { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.hot-list__avatar--orange { background: linear-gradient(135deg, #f97316, #ec4899); }
.hot-list__avatar--yellow { background: linear-gradient(135deg, #eab308, #f97316); }
.hot-list__avatar--green  { background: linear-gradient(135deg, #10b981, #14b8a6); }
.hot-list__avatar--gray   { background: linear-gradient(135deg, #64748b, #475569); }
.hot-list__main { flex: 1; min-width: 0; }
.hot-list__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.hot-list__name a { color: var(--state-info-fg); text-decoration: none; }
.hot-list__name a:hover { text-decoration: underline; }
.hot-list__subject {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hot-list__wait {
  text-align: right;
  flex-shrink: 0;
}
.hot-list__wait-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--state-danger-fg);
  line-height: 1;
  letter-spacing: -0.5px;
}
.hot-list__wait-unit {
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 2px;
}

/* ───── Date-picker control в шапке страницы (вместо period-pills) ───── */
.page-date-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.page-date-picker:hover { border-color: var(--state-primary-border); }
.page-date-picker__icon {
  font-size: 14px;
  color: var(--state-info-fg);
}

/* ───── Бренд в навигации: WATS • Daily Digest ─────
   Буллет между WATS и Daily Digest для визуального разделения */
.topnav .brand-bullet {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wats-yellow);
  margin: 0 6px 2px;
  vertical-align: middle;
}

/* ───────── Сетка KPI для шапки дашборда ───────── */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
@media (min-width: 1400px) {
  /* 5 KPI в ряд на больших экранах (Тимур ТЗ 09.06.2026 §3.1) */
  .kpi-row { grid-template-columns: repeat(5, 1fr); }
}
.kpi-row .widget { margin-bottom: 0; }

/* ───────── Глобальный period-selector (вверху страницы) ───────── */

.period-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  flex-wrap: wrap;
}
.period-bar__label {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.period-bar__opts { display: flex; gap: 4px; flex-wrap: wrap; }
.period-bar__opt {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 13px;
  color: var(--ink-soft);
  background: transparent;
  text-decoration: none;
  transition: all 0.12s ease;
  border: 1px solid transparent;
}
.period-bar__opt:hover {
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
}
.period-bar__opt--active {
  background: var(--state-primary-bg);
  color: var(--state-primary-fg);
  border-color: var(--state-primary-border);
  font-weight: 600;
}
.period-bar__hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-soft);
  font-style: italic;
}

/* ───────── Footer-иконки на карточках (Битрикс-стиль) ───────── */

.card-footer-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
}
.card-footer-icons__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.card-footer-icons__avatar {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wats-blue), var(--wats-navy));
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.card-footer-icons__avatar--nikita { background: linear-gradient(135deg, #ff8800, #c92a2a); }
.card-footer-icons__avatar--timur  { background: linear-gradient(135deg, #3b82f6, #1e40af); }

/* ═══════════ Канбан-воронки (Bitrix-стиль, 2026-06-30) ═══════════ */
.view-toggle { display:inline-flex; gap:0; border:1px solid var(--wats-border,#d6dde5); border-radius:7px; overflow:hidden; }
.view-toggle a { padding:6px 14px; font-size:13px; text-decoration:none; color:var(--wats-muted,#667); background:#fff; }
.view-toggle a.active { background:var(--wats-yellow,#ffd400); color:#1a1a1a; font-weight:600; }

/* ── Канбан: перенос дизайна из макетов (2026-07-21) ────────────────────
   Только стили: разметка и kanban.js не менялись. Откат — style.css.bak-kanban-*
   Шрифты системные (без Google Fonts): внешняя загрузка тормозит страницу
   у пользователей вне сети сервера. Моноширинные цифры даёт font-variant-numeric. */
/* Доска целиком на экране: колонки делят ширину поровну (без горизонтальной
   прокрутки), внутренних полос нет — колонка растёт под содержимое, страница
   скроллится один раз. Никаких вложенных скроллов. */
.kanban-board { --kb-line:#e7eaef; --kb-ink:#141922; --kb-soft:#5b6672; --kb-faint:#8b95a1;
  display:flex; gap:10px; overflow:visible; padding:4px 0 14px; align-items:flex-start; width:100%; }
.kanban-col { flex:1 1 0; min-width:0; background:#eef1f5;
  border:1px solid var(--kb-line); border-radius:14px;
  display:flex; flex-direction:column; transition:background .15s, border-color .15s; }

/* Шапка колонки: светлая, цвет стадии — точкой (как в макете), а не заливкой */
/* Шапка колонки липкая — при прокрутке страницы видно, где какая стадия */
.kanban-col__head { padding:9px 11px 8px; border-radius:14px 14px 0 0;
  color:var(--kb-ink); background:#eef1f5; border-bottom:1px solid var(--kb-line);
  position:sticky; top:0; z-index:3; }
.kanban-col__title { display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; letter-spacing:-.1px; text-transform:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:1; }
.kanban-col__title::before { content:""; flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:var(--col-color,#5b7083); }
.kanban-col__sum { margin-top:4px; font-size:16px; font-weight:700; line-height:1.15;
  letter-spacing:-.4px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kanban-col__sum .unit { font-size:11px; font-weight:600; color:var(--kb-soft); margin-left:3px; }
.kanban-col__count { margin-top:1px; font-size:11px; color:var(--kb-soft);
  font-variant-numeric:tabular-nums; }
.kanban-col__body { padding:8px; display:flex; flex-direction:column; gap:6px; overflow:visible;
  min-height:48px; flex:1; }

/* Приём карточки — подсветка колонки целиком, как в макете */
.kanban-col.drop-target { background:#e5f4f5; border-color:#0b7a86; outline:none;
  box-shadow:inset 0 0 0 2px #11a3ac; }
.kanban-col.drop-target .kanban-col__body { background:transparent; }

/* Ширина по загрузке: «В работе» держит почти всю воронку — ей втрое больше
   места, и карточки в ней текут в несколько подколонок, чтобы не тянуться
   в бесконечный столбец. Остальным стадиям хватает узкой колонки. */
/* Общий контейнер сайта зажат в 1100px — для доски этого мало.
   Расширяем ТОЛЬКО страницы с канбаном (:has), остальные вёрстки не трогаем. */
main.container:has(.kanban-board) { max-width:1760px; }

/* Детерминированная раскладка: малолюдным стадиям — фиксированные 158px
   (минимум, при котором «кол-во» и плашка срока не наезжают друг на друга),
   «В работе» забирает весь остаток ширины. Без flex-grow-арифметики. */
.kanban-col { flex:0 0 158px; }
.kanban-col[data-stage="В работе"] { flex:1 1 auto; min-width:300px; }

/* В перегруженной стадии карточка сжимается до ОДНОЙ строки: PN + клиент слева,
   срок справа. Так 35 сделок занимают ~1 экран вместо четырёх, а ширина
   остаётся читаемой (в отличие от разбиения на подколонки — там всё обрезалось).
   Подробности видны при наведении и в карточке проекта. */
.kanban-col[data-stage="В работе"] .kanban-card { padding:5px 8px; }
.kanban-col[data-stage="В работе"] .kc-sub,
.kanban-col[data-stage="В работе"] .kc-badges { display:none; }
.kanban-col[data-stage="В работе"] .kc-meta { margin-top:0; }
.kanban-col[data-stage="В работе"] .kanban-card {
  display:flex; align-items:center; gap:8px; }
.kanban-col[data-stage="В работе"] .kc-title { flex:1 1 auto; min-width:0; }
.kanban-col[data-stage="В работе"] .kc-meta { flex:0 0 auto; }
.kanban-col[data-stage="В работе"] .kc-amount { display:none; }

/* Компактная карточка — чтобы на экран помещалось максимум */
.kanban-card { background:#fff; border:1px solid var(--kb-line); border-radius:9px;
  padding:7px 9px; cursor:grab; border-left:3px solid transparent;
  box-shadow:0 1px 2px rgba(20,25,34,.05);
  transition:box-shadow .14s, transform .14s, border-color .14s; }
.kanban-card:hover { transform:translateY(-1px); z-index:2; position:relative;
  box-shadow:0 2px 4px rgba(20,25,34,.06), 0 10px 26px rgba(20,25,34,.12); }
.kanban-card:active { cursor:grabbing; }
.kanban-card.dragging { opacity:.4; }
.kanban-card a.kc-title { display:block; font-weight:600; font-size:12px; color:var(--kb-ink);
  text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums; line-height:1.3; }
.kanban-card a.kc-title:hover { color:#0b7a86; text-decoration:none; }
.kc-sub { font-size:10.5px; color:var(--kb-soft); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; margin-top:1px; line-height:1.3; }
.kc-amount { font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; }
/* flex-wrap — страховка от наложения: если кол-во и срок не помещаются в строку,
   они переносятся, а не наезжают друг на друга. */
.kc-meta { display:flex; justify-content:space-between; align-items:center;
  gap:4px; row-gap:3px; flex-wrap:wrap; margin-top:4px; }
.kc-meta > * { min-width:0; }
.kc-badges { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
/* Модель товара — вторая строка; на узких колонках прячем, PN и клиент важнее */
@media (max-width:1500px) { .kanban-card .kc-sub + .kc-sub { display:none; } }

/* Цветная грань карточки по сроку — как в макете. :has() позволяет обойтись
   без правки шаблона: класс срока уже стоит на вложенной плашке. */
.kanban-card:has(.deadline-overdue) { border-left-color:#d92d20; }
.kanban-card:has(.deadline-urgent)  { border-left-color:#c77706; }
.kanban-card:has(.deadline-soon)    { border-left-color:#e3b341; }
/* Закрытые сделки приглушаем, чтобы не спорили за внимание с активными */
.kanban-col[data-stage="Завершено"] .kanban-card,
.kanban-col[data-stage="Потеряно"]  .kanban-card { opacity:.82; }
.kanban-col[data-stage="Завершено"] .kanban-card:hover,
.kanban-col[data-stage="Потеряно"]  .kanban-card:hover { opacity:1; }

/* Плашка срока — форма из макета */
.kanban-card .deadline-pill { border-radius:20px; padding:2px 8px; font-size:10.5px;
  font-weight:600; font-variant-numeric:tabular-nums; }

/* ── Модалка быстрого редактирования проекта ───────────────────────────── */
.pm-overlay { position:fixed; inset:0; z-index:9000; background:rgba(15,23,42,.45);
  display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px 16px;
  overflow-y:auto; animation:pmFade .12s ease-out; }
.pm-overlay[hidden] { display:none; }
@keyframes pmFade { from { opacity:0 } to { opacity:1 } }
.pm-dialog { width:100%; max-width:560px; background:#fff; border-radius:14px;
  box-shadow:0 18px 60px rgba(15,23,42,.3); overflow:hidden;
  animation:pmRise .16s cubic-bezier(.2,.7,.3,1); }
@keyframes pmRise { from { transform:translateY(-10px); opacity:.6 } to { transform:none; opacity:1 } }

.pm-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:15px 18px 12px; border-bottom:1px solid #e7eaef; }
.pm-pn { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; color:#141922; }
.pm-cust { font-size:13px; color:#5b6672; margin-top:2px; }
.pm-x { border:0; background:transparent; font-size:16px; line-height:1; color:#8b95a1;
  cursor:pointer; padding:4px 6px; border-radius:6px; }
.pm-x:hover { background:#eef1f5; color:#141922; }

.pm-facts { display:flex; flex-wrap:wrap; gap:6px 18px; padding:11px 18px;
  background:#f7f9fb; border-bottom:1px solid #e7eaef; }
.pm-fact { font-size:12px; color:#5b6672; }
.pm-fact span { margin-right:5px; }
.pm-fact b { color:#141922; font-weight:600; }

.pm-body { padding:16px 18px 6px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pm-field { display:flex; flex-direction:column; gap:5px; font-size:12px; color:#5b6672; }
.pm-field--wide { grid-column:1 / -1; }
.pm-field select, .pm-field input, .pm-field textarea {
  font:inherit; font-size:13.5px; color:#141922; padding:8px 10px;
  border:1px solid #d7dce3; border-radius:8px; background:#fff; width:100%; }
.pm-field select:focus, .pm-field input:focus, .pm-field textarea:focus {
  outline:none; border-color:#0b7a86; box-shadow:0 0 0 3px rgba(11,122,134,.12); }
.pm-field textarea { resize:vertical; min-height:38px; }

.pm-msg { margin:10px 18px 0; padding:9px 12px; border-radius:8px; font-size:12.5px; line-height:1.4; }
.pm-msg--err  { background:#fdecea; border:1px solid #f0bdb7; color:#8f2018; }
.pm-msg--warn { background:#fbf0dd; border:1px solid #eecf96; color:#8a5d0e; }

.pm-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px 16px; }
.pm-link { font-size:12.5px; color:#0b7a86; text-decoration:none; }
.pm-link:hover { text-decoration:underline; }
.pm-actions { display:flex; gap:8px; }
.pm-btn { font:inherit; font-size:13px; font-weight:500; padding:8px 15px; border-radius:8px;
  border:1px solid #d7dce3; background:#fff; color:#5b6672; cursor:pointer; }
.pm-btn:hover { border-color:#8b95a1; color:#141922; }
.pm-btn--primary { background:#0b7a86; border-color:#0b7a86; color:#fff; font-weight:600; }
.pm-btn--primary:hover { background:#11a3ac; border-color:#11a3ac; color:#fff; }
.pm-btn:disabled { opacity:.6; cursor:default; }

/* Короткая подсветка карточки после успешного сохранения */
.kanban-card.kc-just-saved { animation:kcSaved 1.6s ease-out; }
@keyframes kcSaved {
  0%   { box-shadow:0 0 0 3px rgba(21,163,74,.55); }
  100% { box-shadow:0 1px 2px rgba(20,25,34,.05); }
}

@media (max-width:560px) { .pm-body { grid-template-columns:1fr; } }

/* ── Верхняя строка-алерт над доской ───────────────────────────────────── */
.kb-ledger { display:flex; align-items:center; gap:12px; padding:9px 14px;
  border-radius:10px; margin:0 0 12px; font-size:13px; }
.kb-ledger--danger { background:linear-gradient(90deg,#2a0d0a,#3d1512); color:#f4d3ce; }
.kb-ledger--amber  { background:linear-gradient(90deg,#2e2008,#453110); color:#f2ddb8; }
.kb-ledger__badge { flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; padding:3px 8px; border-radius:5px; color:#fff; }
.kb-ledger--danger .kb-ledger__badge { background:#d92d20; }
.kb-ledger--amber  .kb-ledger__badge { background:#c77706; }
.kb-ledger__text { flex:1 1 auto; min-width:0; }
.kb-ledger__text b { color:#fff; }
.kb-ledger__cta { flex:0 0 auto; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2); color:#fff; font-size:12px; font-weight:500;
  padding:5px 12px; border-radius:6px; text-decoration:none; }
.kb-ledger__cta:hover { background:rgba(255,255,255,.24); }

/* ── Чипы-фильтры ──────────────────────────────────────────────────────── */
.kb-chips { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.kb-chip { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px;
  font-weight:500; padding:6px 12px; border-radius:20px; cursor:pointer;
  background:#fff; border:1px solid #e7eaef; color:#5b6672; }
.kb-chip:hover { border-color:#0b7a86; color:#141922; }
.kb-chip.is-on { background:#e5f4f5; border-color:#0b7a86; color:#0b7a86; }
.kb-chip__n { font-variant-numeric:tabular-nums; font-weight:700;
  background:#eef1f5; color:#141922; padding:0 7px; border-radius:20px; font-size:11.5px; }
.kb-chip.is-on .kb-chip__n { background:#0b7a86; color:#fff; }
.kb-chip--danger.is-on { background:#fdecea; border-color:#d92d20; color:#d92d20; }
.kb-chip--danger.is-on .kb-chip__n { background:#d92d20; }
.kb-chip--warn.is-on { background:#fbf0dd; border-color:#c77706; color:#c77706; }
.kb-chip--warn.is-on .kb-chip__n { background:#c77706; }

/* ── Предупреждение о перегрузе стадии ─────────────────────────────────── */
.kb-overload { margin-top:8px; background:#fbf0dd; border:1px solid #eecf96;
  border-radius:8px; padding:7px 9px; font-size:10.5px; line-height:1.35; color:#8a5d0e; }

/* ── Дневник активности ─────────────────────────────────────────────────── */
.dr-table { width:100%; border-collapse:collapse; font-size:12.5px; background:#fff;
  border:1px solid #e7eaef; border-radius:12px; overflow:hidden; }
.dr-table th { text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.3px;
  text-transform:uppercase; color:#8b95a1; padding:9px 11px; border-bottom:1px solid #eef1f5;
  background:#f7f9fb; white-space:nowrap; }
.dr-table td { padding:9px 11px; border-bottom:1px solid #eef1f5; vertical-align:top; }
.dr-table tbody tr:last-child td { border-bottom:0; }
.dr-table tbody tr:hover { background:#f7f9fb; }
.dr-table .m { font-variant-numeric:tabular-nums; white-space:nowrap; color:#5b6672; }
.dr-table .nm { font-weight:600; }
.dr-wrap { max-width:240px; white-space:pre-wrap; word-break:break-word; color:#5b6672; }
.dr-grp { font-size:10.5px; font-weight:600; padding:1px 8px; border-radius:20px; white-space:nowrap; }
.dr-grp--in { background:#e7f6ec; color:#15a34a; }
.dr-grp--out { background:#e6edfd; color:#1d4ed8; }
.dr-actions { text-align:right; white-space:nowrap; }
.dr-edit { border:1px solid #e7eaef; background:#fff; border-radius:7px; padding:3px 9px;
  cursor:pointer; color:#5b6672; font-size:13px; }
.dr-edit:hover { border-color:#0b7a86; color:#0b7a86; }