:root {
  --bg: oklch(0.985 0.003 75);
  --surface: #ffffff;
  --surface2: oklch(0.985 0.003 75);
  --surface3: oklch(0.955 0.004 75);
  --border: oklch(0.91 0.004 75);
  --orange: #FF7200;
  --orange-soft: rgba(255,114,0,0.10);
  --text: oklch(0.24 0.008 60);
  --muted: oklch(0.58 0.006 60);
  --success: oklch(0.50 0.13 155);
  --warn: oklch(0.62 0.12 78);
  --danger: oklch(0.55 0.17 25);
  --blue: oklch(0.52 0.13 250);
}
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0 }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* HEADER */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon {
  width: 32px; height: 32px;
  background: var(--orange);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.brand-text { font-weight: 800; font-size: 14px; letter-spacing: -0.3px; }
.brand-sub { font-size: 11px; color: var(--muted); }

.search-input {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.search-input:focus { border-color: var(--orange) }

.btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn:hover { background: var(--surface3); border-color: var(--muted) }
.btn-primary { background: var(--orange); border-color: var(--orange); color: #fff }
.btn-primary:hover { background: #ff8826; border-color: #ff8826 }
.btn-success { background: var(--success); border-color: var(--success); color: #000 }

/* LAYOUT */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 0;
}

/* SIDEBAR */
aside {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow-y: auto;
}
.sidebar-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  padding: 8px 12px 6px;
}
.cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 2px;
  text-align: left;
  transition: background .12s;
}
.cat-btn:hover { background: var(--surface2) }
.cat-btn.active { background: var(--orange-soft); color: var(--orange); font-weight: 600 }
.cat-icon { margin-right: 8px; }
.cat-count {
  background: var(--surface3);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}
.cat-btn.active .cat-count { background: var(--orange); color: #fff }

/* MAIN */
main {
  overflow-y: auto;
  padding: 16px 20px 80px;
}
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.list-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.list-meta { font-size: 12px; color: var(--muted) }

/* FILTERS PANEL */
.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-group { display: flex; align-items: center; gap: 6px }
.filter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.4px;
}
.filter-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  outline: none;
}
.filter-select:focus { border-color: var(--orange) }
.filter-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.filter-chip.active { background: var(--orange); border-color: var(--orange); color: #fff }
.filter-chip:hover:not(.active) { background: var(--surface3); border-color: var(--muted) }
.filter-divider { width: 1px; height: 18px; background: var(--border) }
.filter-clear {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
}
.filter-clear:hover { border-color: var(--danger); color: var(--danger) }

/* CARDS */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  overflow: hidden;
}
.card:hover { border-color: var(--orange); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.3) }
.card-row1 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px }
.card-name { font-weight: 700; font-size: 15px; }
.card-attempts {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 700;
  background: var(--surface3);
  color: var(--muted);
}
.card-attempts.high { background: rgba(248,113,113,0.15); color: var(--danger) }
.card-attempts.mid  { background: rgba(251,191,36,0.15); color: var(--warn) }
.card-phone {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.card-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 9px;
  border-radius: 100px;
  margin-bottom: 8px;
}
.card-status {
  font-size: 12px;
  color: var(--text);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.card-status-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.card-last-action {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--muted);
}
.card-last-action b { color: var(--text); font-weight: 600 }

/* CATEGORY COLORS */
.cat-nodial { background: rgba(248,113,113,0.15); color: #fca5a5 }
.cat-call   { background: rgba(251,146,60,0.15);  color: #fdba74 }
.cat-cat    { background: rgba(252,211,77,0.15);  color: #fde68a }
.cat-kp     { background: rgba(62,207,142,0.15);  color: #6ee7b7 }
.cat-mes    { background: rgba(62,207,142,0.15);  color: #6ee7b7 }
.cat-defer  { background: rgba(167,139,250,0.18); color: #c4b5fd }
.cat-bad    { background: rgba(120,120,120,0.18); color: #9ca3af }

/* MODAL */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 100;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.modal-bg.show { display: flex }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  max-width: 600px;
  width: 100%;
  padding: 24px;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: none;
  background: var(--surface2);
  color: var(--muted);
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--surface3); color: var(--text) }

.m-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.m-phone {
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 16px;
}

.m-section {
  margin-bottom: 18px;
}
.m-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.cat-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cat-pick {
  padding: 8px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  transition: all .12s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cat-pick:hover { background: var(--surface3); border-color: var(--muted) }
.cat-pick.active { border-color: var(--orange); background: var(--orange-soft); color: var(--orange) }

.m-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.m-input:focus { border-color: var(--orange) }

.m-textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  min-height: 70px;
  resize: vertical;
}
.m-textarea:focus { border-color: var(--orange) }

.quick-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.quick-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  transition: all .12s;
}
.quick-btn:hover { background: var(--orange-soft); border-color: var(--orange); color: var(--orange) }

.timeline {
  background: var(--surface2);
  border-radius: 10px;
  padding: 8px 12px;
  max-height: 160px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.5;
}
.timeline-entry {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.timeline-entry:last-child { border-bottom: none }
.timeline-time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
}

.m-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.m-actions .btn { flex: 1; justify-content: center; min-width: 120px }

/* TOAST */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--success);
  color: #000;
  padding: 10px 20px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 13px;
  z-index: 200;
  opacity: 0;
  transition: all .25s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1 }

/* EMPTY */
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5 }


/* Подсказки о подозрительных цифрах в сделке (dealAnomalies) */
.deal-anomalies { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; }
.anomaly {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 12px; border-radius: 10px;
  font-size: 13px; line-height: 1.45;
  border: 1px solid transparent;
}
.anomaly-ico {
  flex: 0 0 18px; height: 18px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff;
}
.anomaly-error { background: oklch(.965 .025 25); border-color: oklch(.88 .06 25); color: oklch(.42 .13 25); }
.anomaly-error .anomaly-ico { background: var(--danger); }
.anomaly-warn  { background: oklch(.97 .03 78);  border-color: oklch(.89 .07 78); color: oklch(.42 .09 78); }
.anomaly-warn .anomaly-ico  { background: var(--warn); }

.dup-warn {
  margin-top: 6px;
  padding: 10px 12px;
  background: oklch(.965 .025 25);
  border: 1px solid oklch(.88 .06 25);
  border-radius: 10px;
  font-size: 12px;
  color: oklch(.45 .16 25);
  display: none;
}
.dup-warn.show { display: block }
.dup-warn-title {
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dup-warn-body {
  color: var(--text);
  font-size: 12px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.dup-warn-body b { color: oklch(.45 .16 25) }
.dup-open-btn {
  background: oklch(.93 .05 25);
  border: 1px solid oklch(.85 .08 25);
  color: oklch(.42 .16 25);
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
}
.dup-open-btn:hover { background: oklch(.89 .07 25) }

/* RESPONSIVE */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  /* Боковая панель на телефоне не помещается. Раньше здесь стоял выезжающий
     слой по классу .open — но кнопки, которая его ставит, в коде не было
     вообще, и категории с телефона были недоступны совсем. Вместо слоя —
     лента чипов под шапкой (.cat-strip), она всегда на виду. */
  aside { display: none; }
  .card-grid { grid-template-columns: 1fr }
  .search-input { max-width: none }
}

/* МОДУЛЬ «СДЕЛКИ» */
.btn.active { background: var(--orange-soft); border-color: var(--orange); color: var(--orange) }
.cat-deal { background: rgba(62,207,142,0.18); color: #6ee7b7 }

#dealsView { padding: 16px 20px 80px; overflow-y: auto; }
.deals-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px }

/* Таблица сделок */
.deal-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface) }
table.deal-table { width:100%; border-collapse:collapse; font-size:13px; min-width:900px }
.deal-table th {
  text-align:left; padding:10px 12px; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap;
  cursor:pointer; user-select:none;
}
.deal-table th.num, .deal-table td.num { text-align:right }
.deal-table td { padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap }
.deal-table tbody tr { cursor:pointer; transition:background .12s }
.deal-table tbody tr:hover { background:var(--surface2) }
.deal-table tbody tr:last-child td { border-bottom:none }
.deal-badge { display:inline-block; padding:3px 9px; border-radius:100px; font-size:10px; font-weight:700; color:#000 }
.money-pos { color:var(--success) } .money-neg { color:var(--danger) }

.deals-totals {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;
  margin-top:14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px;
}
.tot-item .tot-label { font-size:10px; font-weight:700; text-transform:uppercase; color:var(--muted); letter-spacing:.4px }
.tot-item .tot-value { font-size:16px; font-weight:800; margin-top:2px }

/* Детальный экран */
.deal-wrap { max-width:1160px; margin:0 auto }   /* на широких мониторах не растягиваем контент */
.deal-summary { margin:0 0 10px }
.detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px }
.deal-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px }
.tile { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 13px }
.tile-ico { display:none }
.tile-val { font-size:17px; font-weight:800; letter-spacing:-.4px }
.tile-sub { font-size:11px; color:var(--muted); margin-top:2px }
.tile-label { font-size:11px; color:var(--muted); margin-top:4px; text-transform:uppercase; font-weight:700; letter-spacing:.3px }

.deal-section { background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:12px; overflow:hidden }
.deal-section > summary {
  list-style:none; cursor:pointer; padding:12px 14px; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.deal-section > summary::-webkit-details-marker { display:none }
.deal-section > summary::after { content:'▸'; color:var(--muted); font-size:13px; flex:none; transition:transform .15s ease }
.deal-section[open] > summary::after { transform:rotate(90deg) }
.deal-section > summary > .section-hint { margin-left:auto; text-align:right }
.deal-section > summary:hover { background:var(--surface2) }
.deal-section[open] > summary { border-bottom:1px solid var(--border) }
.section-body { padding:14px }
.section-hint { font-size:11px; color:var(--muted); font-weight:400 }

/* Инлайн-таблицы (позиции, платежи, расходы, вехи) */
table.edit-table { width:100%; border-collapse:collapse; font-size:13px }
.edit-table th { text-align:left; padding:6px 8px; font-size:10px; font-weight:700; text-transform:uppercase; color:var(--muted); letter-spacing:.3px }
.edit-table th.num { text-align:right }
.edit-table td { padding:4px 6px; border-top:1px solid var(--border); vertical-align:middle }
.edit-table td.num { text-align:right }
.edit-input {
  width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:8px;
  padding:6px 8px; color:var(--text); font-family:inherit; font-size:13px; outline:none;
}
.edit-input:focus { border-color:var(--orange) }
.edit-input.w-date { min-width:130px }
.edit-input.w-num { min-width:90px; text-align:right }
.row-del { background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:15px; padding:4px 8px; border-radius:6px }
.row-del:hover { background:rgba(248,113,113,.15); color:var(--danger) }
.pay-row.overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger) }
.pay-row.paid td:first-child { box-shadow: inset 3px 0 0 var(--success) }
.pay-status { font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 7px; border-radius:100px }
.ps-paid    { background:rgba(62,207,142,.18); color:var(--success) }
.ps-partial { background:rgba(251,191,36,.18); color:var(--warn) }
.ps-overdue { background:rgba(248,113,113,.18); color:var(--danger) }
.ps-pending { background:var(--surface3); color:var(--muted) }
.add-row-btn {
  background:var(--surface2); border:1px dashed var(--border); color:var(--text); border-radius:8px;
  padding:7px 12px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; margin-top:10px;
}
.add-row-btn:hover { border-color:var(--orange); color:var(--orange) }
.vat-toggle { display:inline-flex; align-items:center; gap:8px; margin-top:10px; margin-left:10px; font-size:13px; color:var(--text); cursor:pointer; user-select:none }
.vat-toggle input { width:16px; height:16px; accent-color:var(--orange); cursor:pointer }
.sub-metrics { display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--muted) }
.sub-metrics b { color:var(--text) }

/* ═══════════ МОБИЛЬНАЯ ВЁРСТКА (телефон) ═══════════ */
@media (max-width: 720px) {
  main, #dealsView { padding: 12px 12px 80px; }
  .deal-wrap { max-width: none; }
  .list-header { gap: 8px; }
  .list-title { font-size: 18px; }

  /* Шапка детального экрана: кнопки в ряд, переносятся */
  .detail-head { gap: 8px; }
  .detail-head > div { flex-wrap: wrap; gap: 6px !important; }
  .detail-head .btn { padding: 7px 10px; font-size: 12px; }

  /* Сводные полосы — по 2 в ряд, разделители сверху вместо боковых */
  .deal-summary.deals-totals { grid-template-columns: 1fr 1fr; }
  .deal-summary .tot-item + .tot-item { border-left: none; }
  .deal-summary .tot-item:nth-child(n+3) { border-top: 1px solid var(--border); }
  .deal-summary .tot-value { font-size: 16px; }

  .section-body { padding: 12px 10px; }
  .deal-section > summary { flex-wrap: wrap; row-gap: 2px; }
  .section-hint { flex-basis: 100%; }
  .prod-timeline { overflow-x: auto; }

  /* Таблицы правки → карточки: каждая строка = блок, ячейка = «подпись → поле» */
  .edit-table, .edit-table tbody { display: block; width: 100%; }
  .edit-table thead { display: none; }
  .edit-table tr {
    display: block; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 6px 12px; margin-bottom: 8px;
  }
  .edit-table tr.pay-row.paid    { border-left: 3px solid var(--success); }
  .edit-table tr.pay-row.overdue { border-left: 3px solid var(--danger); }
  .edit-table td {
    display: flex; align-items: center; gap: 10px; min-height: 34px;
    border: none !important; box-shadow: none !important; padding: 4px 0; text-align: left;
  }
  .edit-table td::before {
    content: attr(data-label); flex: 0 0 108px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px; color: var(--muted);
  }
  .edit-table td:not([data-label]), .edit-table td.actions { }
  .edit-table td.actions::before { content: none; }
  .edit-table td.actions { justify-content: flex-end; gap: 6px; padding-top: 8px; }
  .edit-table td .edit-input, .edit-table td select.edit-input { width: 100%; min-width: 0; }
  .edit-table td.num { justify-content: flex-start; }
  .edit-table td[colspan] { color: var(--muted); }
  .edit-table td[colspan]::before { content: none; }
  .row-pay { flex: 1; }

  /* Итоги списка сделок — 2 колонки */
  .deals-totals:not(.deal-summary) { grid-template-columns: 1fr 1fr; }
  .deals-totals:not(.deal-summary) .tot-item + .tot-item { border-left: none; }
  .deals-totals:not(.deal-summary) .tot-item:nth-child(n+3) { border-top: 1px solid var(--border); }

  /* Тулбар сделок и фильтры переносятся */
  .deals-toolbar { gap: 6px; }
  .deals-toolbar .btn, .view-toggle .btn { padding: 7px 10px; font-size: 12px; }
  .report-grid { grid-template-columns: 1fr; }
}
.warn-banner {
  margin-top:10px; padding:10px 14px; border-radius:10px; font-size:12.5px; font-weight:500;
  background:oklch(.965 .045 85); border:1px solid oklch(.87 .09 85); color:oklch(.42 .09 70);
  display:flex; align-items:center; gap:8px;
}
.warn-banner b { color:oklch(.32 .09 60) }

/* Горизонтальный таймлайн производства */
.prod-timeline { display:flex; align-items:flex-start; overflow-x:auto; padding:10px 4px 4px; }
.pt-point { flex:1; min-width:96px; text-align:center; position:relative }
.pt-point:not(:last-child)::after {
  content:''; position:absolute; top:15px; left:50%; width:100%; height:2px; background:var(--border); z-index:0;
}
.pt-point.done:not(:last-child)::after { background:var(--success) }
.pt-dot {
  width:32px; height:32px; border-radius:50%; background:var(--surface3); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin:0 auto 6px; position:relative; z-index:1; font-size:14px;
}
.pt-point.done .pt-dot { background:var(--success); border-color:var(--success); color:#000 }
.pt-point.overdue .pt-dot { background:var(--danger); border-color:var(--danger); color:#000 }
.pt-cap { font-size:10px; color:var(--muted); line-height:1.3 }
.pt-date { font-size:10px; color:var(--text); font-weight:600 }

/* Отчёт */
.report-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px }
.report-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px }
.report-card h4 { font-size:13px; margin-bottom:10px }
.bar-chart { display:flex; align-items:flex-end; gap:8px; height:160px; padding-top:10px }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0 }
.bar-stack { width:100%; display:flex; flex-direction:column-reverse; align-items:center; height:130px; justify-content:flex-start }
.bar { width:70%; border-radius:4px 4px 0 0 }
.bar-turn { background:var(--blue) } .bar-profit { background:var(--success) }
.bar-x { font-size:9px; color:var(--muted); white-space:nowrap }
.rep-row { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--border); font-size:12px }
.rep-row:last-child { border-bottom:none }
.rep-row b { font-weight:700 }
.legend { display:flex; gap:12px; font-size:11px; color:var(--muted); margin-bottom:8px }
.legend span { display:inline-flex; align-items:center; gap:4px }
.dot { width:9px; height:9px; border-radius:2px; display:inline-block }

/* Модалка создания сделки / Сегодня */
.field-row { margin-bottom:12px }
.today-block { margin-bottom:16px }
.today-block h4 { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:8px }
.today-item {
  display:flex; justify-content:space-between; gap:10px; padding:8px 10px; background:var(--surface2);
  border:1px solid var(--border); border-radius:10px; margin-bottom:6px; font-size:13px; cursor:pointer;
}
.today-item:hover { border-color:var(--orange) }
.today-item.overdue { border-left:3px solid var(--danger) }

/* UI-ПОЛИРОВКА (ui-ux-pro-max, стиль Data-Dense Dashboard) */
:root {
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-sm:8px; --r-md:10px; --r-lg:14px;
  --sh-1:0 1px 2px rgba(0,0,0,.25);
  --sh-2:0 6px 20px rgba(0,0,0,.38);
  --focus:0 0 0 3px rgba(255,114,0,.45);
}
/* Эмодзи-фолбэк: редкие глифы больше не превращаются в */
body { font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif,'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji'; }

/* SVG-иконки вместо эмодзи в навигации (единый набор, красятся currentColor) */
.ico { width:16px; height:16px; flex:0 0 auto; vertical-align:-3px; }
.ico svg { display:block; width:100%; height:100% }
.hdr-svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.brand-icon .ico { width:19px; height:19px; color:#fff }

/* Доступность: видимый фокус на клавиатуре + отклик на нажатие */
.btn:focus-visible, .filter-select:focus-visible, .m-input:focus-visible,
.cat-btn:focus-visible, .search-input:focus-visible, .cat-pick:focus-visible,
.filter-chip:focus-visible, .edit-input:focus-visible { outline:none; box-shadow:var(--focus) }
.btn:active { transform:translateY(1px) }
.card:active { transform:translateY(0) }

/* Табличные цифры — суммы и колонки не «пляшут» по ширине */
.deal-table .num, .edit-table .num, .tile-val, .tile-sub, .tot-value,
.card-attempts, .cat-count, .money-pos, .money-neg, .rep-row b,
.card-phone, .m-phone { font-variant-numeric:tabular-nums }

/* Таблицы и карточки — мягче тени/переходы */
.card { box-shadow:var(--sh-1) }
.deal-table-wrap, .deals-totals, .report-card, .deal-section, .tile { box-shadow:var(--sh-1) }
.modal { box-shadow:var(--sh-2) }
.deal-table tbody tr { transition:background .12s }

/* Пустые состояния — аккуратная рамка вместо «висящей» иконки */
.empty { border:1px dashed var(--border); border-radius:var(--r-lg); background:var(--surface) }

/* Уважать системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* РЕДИЗАЙН: премиальная светлая тема (только оформление) */
body { font-family:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif,'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji'; }
:root { --sh-1:0 1px 2px rgba(20,20,25,.05); --sh-2:0 24px 60px rgba(20,20,25,.18); --focus:0 0 0 3px rgba(255,114,0,.20); }

/* Моноширинный для всех цифр/сумм/телефонов */
.card-phone, .m-phone, .deal-table .num, .edit-table .num, .tile-val, .tile-sub,
.tot-value, .money-pos, .money-neg, .rep-row b, .deal-badge, .pay-status,
.card-attempts, .cat-count { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }

/* Шапка и сайдбар — белые, мягкая линия */
header, aside { background:#fff; }
.brand-text { letter-spacing:-.2px; }

/* Карточки клиентов */
.card { border-radius:14px; box-shadow:var(--sh-1); }
.card:hover { border-color:var(--orange); box-shadow:0 6px 20px rgba(20,20,25,.09); transform:translateY(-2px); }
.card-name { font-weight:600; }

/* Категории-бейджи: тёмный текст на мягкой заливке (для светлого фона) */
.cat-nodial { background:oklch(.955 .035 25);  color:oklch(.53 .17 25) }
.cat-call   { background:oklch(.955 .05 55);   color:oklch(.56 .16 47) }
.cat-cat    { background:oklch(.955 .06 88);   color:oklch(.52 .10 78) }
.cat-kp     { background:oklch(.955 .035 250); color:oklch(.52 .13 250) }
.cat-mes    { background:oklch(.955 .04 295);  color:oklch(.52 .15 295) }
.cat-defer  { background:oklch(.955 .04 210);  color:oklch(.52 .10 210) }
.cat-deal   { background:oklch(.955 .05 155);  color:oklch(.48 .13 155) }
.cat-bad    { background:oklch(.945 .004 70);  color:oklch(.50 .006 60) }

/* Активная категория в сайдбаре */
.cat-btn.active { background:var(--orange-soft); color:var(--orange); }
.cat-btn.active .cat-count { background:var(--orange); color:#fff; }

/* Статусы платежей — мягкие пилюли */
.pay-status { border-radius:20px; }
.ps-paid    { background:oklch(.955 .05 155);  color:oklch(.48 .13 155) }
.ps-partial { background:oklch(.955 .06 88);   color:oklch(.52 .10 78) }
.ps-overdue { background:oklch(.955 .035 25);  color:oklch(.53 .17 25) }
.ps-pending { background:oklch(.945 .004 70);  color:oklch(.55 .006 60) }

/* Таблицы и плитки */
.deal-table th { background:oklch(.98 .003 75); }
.deal-table tbody tr:hover { background:oklch(.98 .003 75); }
.tile { border-radius:14px; box-shadow:var(--sh-1); }
.tile-val { letter-spacing:-.5px; }
.deal-badge { color:#1a1a1a; font-weight:600; }

/* Итоги сделок */
.deals-totals .tot-value { letter-spacing:-.3px; }

/* Модалки — светлые, глубокая тень */
.modal { box-shadow:var(--sh-2); }
.modal-close { background:var(--surface3); }
.modal-close:hover { background:oklch(.92 .004 75); }

/* Кнопки быстрых статусов и фильтры */
.filter-chip.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.quick-btn:hover { background:var(--orange-soft); border-color:var(--orange); color:var(--orange); }

/* ПРЕМИУМ-КАРТОЧКИ + АВАТАРЫ (по макету) */
.card-grid { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.card { padding:16px 16px 14px; border-radius:16px; }
.card-top { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.avatar {
  width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; letter-spacing:.3px;
}
.card-id { min-width:0; flex:1; }
.avatar .av-ico { width:22px; height:22px; opacity:.85; }
.avatar .av-ico svg { display:block; width:100%; height:100%; }
.card-top .card-name { font-weight:600; font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.card-top .card-phone { margin:3px 0 0; font-size:12.5px; }
.card-top .card-attempts { align-self:flex-start; }
.card-cat { text-transform:none; letter-spacing:0; font-size:11px; font-weight:600; padding:4px 10px; border-radius:8px; }
.card-status { margin-top:2px; }
.card-last-action { display:flex; gap:6px; border-top:1px solid var(--border); }

/* Точки-индикаторы категорий в сайдбаре (вместо эмодзи) */
.cat-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:10px; flex:0 0 auto; }
.cat-btn > span:first-child { display:flex; align-items:center; min-width:0; }
.cat-btn > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-title { letter-spacing:.6px; }

/* ═══════════ СДЕЛКИ: пастельные статусы, флаги, итоги (по макету) ═══════════ */
.deal-badge, .pay-status { font-family:'Golos Text',sans-serif; }
.deal-badge {
  font-weight:600; font-size:11px; padding:4px 11px; border-radius:8px; letter-spacing:0; color:inherit;
}
/* Пастельные пары под каждый статус сделки */
.ds-new        { background:oklch(.945 .004 70);  color:oklch(.48 .01 60) }
.ds-advance    { background:oklch(.955 .035 250); color:oklch(.50 .13 250) }
.ds-production { background:oklch(.955 .06 85);   color:oklch(.50 .10 72) }
.ds-ready      { background:oklch(.955 .045 300); color:oklch(.50 .15 300) }
.ds-shipped    { background:oklch(.955 .045 230); color:oklch(.50 .12 230) }
.ds-installed  { background:oklch(.955 .05 155);  color:oklch(.46 .13 155) }
.ds-closed     { background:oklch(.955 .05 155);  color:oklch(.46 .13 155) }
.ds-cancelled  { background:oklch(.955 .035 25);  color:oklch(.53 .17 25) }

/* Флаг-пилюля с цветной точкой */
.flag-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:100px; font-size:11px; font-weight:600; white-space:nowrap; }
.flag-dot  { width:7px; height:7px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.muted-dash { color:var(--muted); }

/* Бейдж срочного на кнопке «Сегодня» + кнопка быстрого погашения платежа */
.today-badge {
  background:var(--danger); color:#fff; font-size:10px; font-weight:700;
  min-width:17px; height:17px; padding:0 5px; border-radius:100px;
  display:inline-flex; align-items:center; justify-content:center; margin-left:2px;
  font-family:'JetBrains Mono',monospace;
}
.row-pay {
  background:oklch(.955 .05 155); color:oklch(.42 .13 155); border:none; border-radius:8px;
  padding:5px 9px; cursor:pointer; font-family:inherit; font-size:11px; font-weight:600; margin-right:4px;
}
.row-pay:hover { background:oklch(.92 .07 155); }

/* Таблица сделок — просторнее; моно для №/дат */
.deal-table th { padding:11px 14px; }
.deal-table td { padding:13px 14px; }
.deal-table td.dnum { font-family:'JetBrains Mono',monospace; color:var(--muted); font-size:12px; }

/* Итоги — единая карточка с разделителями */
.deals-totals { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0; padding:0; }
.deals-totals .tot-item { padding:14px 18px; }
.deals-totals .tot-item + .tot-item { border-left:1px solid var(--border); }
.deals-totals .tot-value { font-size:18px; letter-spacing:-.4px; }

/* ═══════════ НАПОМИНАНИЯ / ДЕДУП / КАНБАН ═══════════ */
.mono { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }

/* Чип «позвонить» на карточке клиента */
.nc-chip { font-size:11px; font-weight:600; padding:4px 10px; border-radius:8px; white-space:nowrap; }
.nc-over   { background:oklch(.955 .035 25);  color:oklch(.5 .17 25) }
.nc-today  { background:oklch(.955 .05 55);   color:oklch(.52 .15 47) }
.nc-future { background:oklch(.945 .004 70);  color:oklch(.5 .006 60) }
.nc-auto   { background:oklch(.96 .03 85);    color:oklch(.5 .1 75) }   /* автодожим: давно без контакта */

/* Кнопка «Позвонить сегодня» в сайдбаре */
.calls-btn { margin-bottom:8px; border-bottom:1px dashed var(--border); border-radius:10px 10px 0 0; padding-bottom:12px; }
.cat-count.count-hot { background:var(--danger); color:#fff; }

/* Дедупликация */
.dedup-group { border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:12px; background:var(--surface); }
.dedup-head { display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:8px; }
.dedup-head span:last-child { color:var(--muted); font-weight:500; font-size:12px; }
.dedup-row { display:flex; align-items:center; gap:9px; padding:7px 4px; border-radius:8px; cursor:pointer; font-size:13px; }
.dedup-row:hover { background:var(--surface2); }
.dedup-name { font-weight:600; }
.dedup-info { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Переключатель Таблица/Доска */
.view-toggle { display:flex; gap:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.view-toggle .btn { border:none; border-radius:0; }
.view-toggle .btn + .btn { border-left:1px solid var(--border); }

/* Канбан-доска */
.kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; align-items:flex-start; margin-bottom:14px; }
.kb-col { flex:0 0 225px; min-width:225px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px; transition:border-color .12s, background .12s; }
.kb-col.kb-over { border-color:var(--orange); background:var(--orange-soft); }
.kb-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:6px; }
.kb-meta { font-size:10.5px; color:var(--muted); font-family:'JetBrains Mono',monospace; white-space:nowrap; }
.kb-body { display:flex; flex-direction:column; gap:8px; min-height:36px; }
.kb-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 11px; cursor:grab; box-shadow:var(--sh-1); transition:box-shadow .12s, border-color .12s; }
.kb-card:hover { border-color:var(--orange); box-shadow:0 4px 12px rgba(20,20,25,.08); }
.kb-card:active { cursor:grabbing; }
.kb-client { font-weight:600; font-size:13px; margin-bottom:2px; }
.kb-num { font-size:11px; color:var(--muted); }
.kb-sum { font-size:13px; font-weight:700; margin-top:5px; }
.kb-flags { display:flex; gap:4px; margin-top:6px; }
.kb-empty { color:var(--muted); font-size:12px; text-align:center; padding:8px 0; }

/* ═══════ БРЕНД-ПОЛИРОВКА ═══════
   Фирменный оранжевый «Минских окон» #F2A03C вместо кислотного #FF7200,
   тёплый фон-«бумага» в тон клиентской странице статуса, тёмный текст на
   оранжевом (белый на #F2A03C не проходит контраст 4.5:1), микродетали. */
:root {
  --orange:#F2A03C;
  --orange-deep:#d88a24;
  --orange-ink:#241c0e;                    /* текст на оранжевом */
  --orange-soft:rgba(242,160,60,.16);
  --bg:#f4f1ea;
  --surface2:#f7f4ee;
  --surface3:#efeae0;
  --border:#e8e2d6;
  --focus:0 0 0 3px rgba(242,160,60,.4);
}
::selection { background:rgba(242,160,60,.35) }

/* Кнопки и акценты: градиентный фирменный оранжевый + тёмный текст */
.btn-primary {
  background:linear-gradient(145deg,#f7b45c,var(--orange) 60%,var(--orange-deep));
  border-color:transparent; color:var(--orange-ink);
  box-shadow:0 4px 12px -5px rgba(242,160,60,.65);
}
.btn-primary:hover { background:linear-gradient(145deg,#f9c078,#f4ab50 60%,#e0932c); border-color:transparent; }
.brand-icon { background:linear-gradient(145deg,#f7b45c,var(--orange) 55%,var(--orange-deep)); box-shadow:0 3px 10px -3px rgba(242,160,60,.6); }
.brand-icon .ico { color:var(--orange-ink); }
.cat-btn.active { color:#8a5a10; font-weight:700; box-shadow:inset 3px 0 0 var(--orange); }
.cat-btn.active .cat-count { background:var(--orange); color:var(--orange-ink); }
.filter-chip.active { color:var(--orange-ink); font-weight:700; }

/* Модалки: мягкое появление + тёплое затемнение */
.modal-bg { background:rgba(26,21,12,.5); }
.modal-bg.show .modal { animation:modalIn .22s cubic-bezier(.22,1,.36,1); }
@keyframes modalIn { from { opacity:0; transform:translateY(12px) scale(.98) } }

/* Логин — брендовая тёмная заставка, как на странице клиента */
#loginBg {
  background:
    radial-gradient(120% 140% at 82% -12%, rgba(242,160,60,.26), transparent 55%),
    linear-gradient(170deg,#24211b, #191713);
  backdrop-filter:none;
}
#loginBg .modal { border:none; box-shadow:0 32px 90px rgba(0,0,0,.5); border-radius:20px; padding:28px; }
#loginBg .brand-icon { width:40px; height:40px; border-radius:12px; }
#loginBg .brand-icon .ico { width:22px; height:22px; }

/* Тост — тёмная пилюля вместо зелёного прямоугольника */
.toast {
  background:#241f16; color:#fff; border-radius:12px; font-weight:600;
  box-shadow:0 14px 34px -10px rgba(20,15,5,.5); padding:11px 22px;
}

/* Тонкий тёплый скроллбар */
::-webkit-scrollbar { width:10px; height:10px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:#dcd4c4; border-radius:8px; border:3px solid var(--bg) }
::-webkit-scrollbar-thumb:hover { background:#ccc2ac }

/* Управление пользователями в настройках (роль + отзыв сессий) */
.user-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.user-row:last-child { border-bottom: 0; }
.user-main { flex: 1; min-width: 0; }
.user-main .dedup-name { display: block; }
.user-main .dedup-info { display: block; font-size: 12px; }
.user-role { flex: 0 0 132px; padding: 4px 6px; font-size: 12px; }
.user-revoke { flex: 0 0 auto; padding: 4px 10px; font-size: 12px; }

/* ── Вкладки клиентов в настройках (справочник категорий) ───────────────
   Строка узкая и плотная: элементов много, а модалка настроек не резиновая.
   На телефоне ряд переносится — кнопки в 34px пальцем не нажать. */
.cat-adm-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.cat-adm-row:last-child { border-bottom: 0; }
.cat-adm-off { opacity: .55; }
.cat-adm-color {
  flex: 0 0 28px; width: 28px; height: 28px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: 6px;
}
.cat-adm-short { flex: 1 1 110px; min-width: 90px; }
.cat-adm-seg { flex: 0 0 104px; padding: 4px 4px; font-size: 11px; }
.cat-adm-flag {
  flex: 0 0 auto; display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.cat-adm-flag input { margin: 0; }
.cat-adm-count {
  flex: 0 0 26px; text-align: right; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cat-adm-btn { flex: 0 0 auto; padding: 3px 6px; font-size: 12px; min-height: 26px; }
.cat-adm-btn:disabled { opacity: .35; cursor: default; }

@media (max-width: 720px) {
  .cat-adm-short { flex: 1 1 100%; }
  .cat-adm-seg { flex: 1 1 auto; }
  .cat-adm-btn { min-height: 42px; padding: 8px 12px; }
}

/* ── KPI: переключатели, плитки, таблица ────────────────────────────────
   Таблица широкая (12 колонок), поэтому у неё свой горизонтальный скролл —
   это задумано, а не поломка вёрстки. */
.kpi-controls {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.kpi-controls .btn { padding: 4px 10px; font-size: 12px; }
.kpi-controls .btn.active { background: var(--orange-soft); color: var(--orange); border-color: var(--orange); }

.kpi-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.kpi-tile {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.kpi-tile-warn { border-color: var(--warn, #e0701a); }
.kpi-tile-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-tile-lab { font-size: 11px; color: var(--muted); margin-top: 2px; }

.kpi-table { font-size: 12px; white-space: nowrap; }
.kpi-table td, .kpi-table th { padding: 6px 8px; }
.kpi-th { cursor: pointer; user-select: none; }
.kpi-th:hover { color: var(--orange); }
.kpi-flat { color: var(--muted); }
.user-norm { flex: 0 0 62px; padding: 4px 6px; font-size: 12px; text-align: right; }

@media (max-width: 720px) {
  .kpi-tiles { grid-template-columns: 1fr 1fr; }
  .user-norm { flex: 0 0 56px; }
}

/* ── Фильтры справочника организаций ────────────────────────────────────
   Строка фильтров у справочника своя: поиск здесь длинный (название, ИНН,
   адрес), а на телефоне все поля растягиваются на всю ширину. */
.org-filters { align-items: center; }
.org-filters .filter-select { min-width: 150px; }
.org-search { flex: 1 1 240px; min-width: 180px; }

@media (max-width: 720px) {
  .org-filters .filter-select, .org-search { flex: 1 1 100%; width: 100%; min-width: 0; }
}

/* Замерщик: клиентской базы у него нет, вкладка не нужна */
.role-installer #navClients,
.role-installer #sidebar { display: none; }

/* ── Строка лида во вкладке «Поиск лидов» ───────────────────────────── */
.lead-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.lead-row:last-child { border-bottom: 0; }
.lead-src { flex: 0 0 118px; min-width: 0; }
.lead-kind { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.lead-main { flex: 1; min-width: 0; }
.lead-title { font-weight: 600; overflow-wrap: anywhere; }
.lead-phone a { color: var(--blue); text-decoration: none; font-size: 13px; }
.lead-phone a:hover { text-decoration: underline; }
/* Подробности бывают в несколько строк (виды работ, лицензия, адрес) —
   ограничиваем тремя, иначе одна карточка занимает пол-экрана. */
.lead-details {
  font-size: 12px; color: var(--muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lead-side { flex: 0 0 132px; text-align: right; font-size: 12px; }
.lead-actions { flex: 0 0 auto; display: flex; gap: 6px; }

/* ── Телефон: строка лида в столбик ─────────────────────────────────── */
@media (max-width: 720px) {
  .lead-row { flex-wrap: wrap; gap: 6px; padding: 14px 0; }
  /* Источник и срок/сумма — одной строкой сверху, как подпись карточки */
  .lead-src { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; }
  .lead-kind { margin-top: 0; }
  .lead-side { flex: 0 0 auto; text-align: right; margin-left: auto; }
  .lead-side > div { display: inline-block; margin-left: 8px; }
  .lead-main { flex: 1 1 100%; }
  .lead-details { -webkit-line-clamp: 2; }
  /* Кнопки во всю ширину: попасть пальцем в мелкую кнопку у края невозможно */
  .lead-actions { flex: 1 1 100%; }
  .lead-actions .btn { flex: 1; justify-content: center; }

  /* Вкладки источников и статусов скроллятся горизонтально, а не ломают вёрстку */
  #leadsView .detail-head { gap: 6px; }
  #leadsView .detail-head > div { width: 100%; }
  #leadsView .btn { white-space: nowrap; }

  /* Пользователи в настройках — та же беда с фиксированными колонками */
  .user-row { flex-wrap: wrap; }
  .user-main { flex: 1 1 100%; }
  .user-role { flex: 1 1 auto; }
}

/* ── Мелкие переполнения на телефоне ────────────────────────────────── */
@media (max-width: 720px) {
  /* Фильтры уже переносятся, но отдельный селект с длинным вариантом
     («КП ОТПРАВЛЕНО / В РАБОТЕ») распирал строку наружу. */
  .filter-group { min-width: 0; max-width: 100%; }
  .filter-select { max-width: 100%; }

  /* Модалка не должна быть шире экрана, а её строки — переноситься. */
  .modal { max-width: calc(100vw - 20px); }
  .modal .dedup-row { flex-wrap: wrap; gap: 6px; }
  .modal .dedup-row .btn { flex: 1 1 auto; }
  .modal .dedup-name, .modal .dedup-info { overflow-wrap: anywhere; }

  /* Кнопки под палец: 34 px мало, промахиваешься. */
  .lead-actions .btn, .modal .btn { min-height: 42px; }
}

@media (max-width: 720px) {
  /* Группа «подпись + селект» на телефоне занимает всю ширину: иначе длинный
     вариант («КП ОТПРАВЛЕНО / В РАБОТЕ») распирает её наружу. */
  .filters .filter-group { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  .filters .filter-select { flex: 1 1 auto; width: 100%; min-width: 0; }
  /* Поля в модалках считают ширину вместе с рамкой, иначе вылезают на пиксели. */
  .modal .m-input, .modal .edit-input { box-sizing: border-box; max-width: 100%; }
}

/* Двух- и трёхколоночные ряды полей (даты периода, реквизиты, суммы).
   На телефоне схлопываются в один столбец: иначе поле с датой не помещается
   в половину экрана и распирает модалку. */
.field-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.field-2col > *, .field-3col > * { min-width: 0; }
@media (max-width: 720px) {
  .field-2col, .field-3col { grid-template-columns: 1fr; }
}

/* ── Вкладка лидов: шапка и ряды вкладок ────────────────────────────── */
.leads-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.leads-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.leads-conn { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }

@media (max-width: 720px) {
  /* Вкладки — одной прокручиваемой строкой вместо трёх рядов кнопок. */
  .leads-tabs {
    flex-wrap: nowrap; overflow-x: auto; margin-bottom: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .leads-tabs::-webkit-scrollbar { display: none; }
  .leads-tabs .btn { flex: 0 0 auto; padding: 7px 12px; font-size: 13px; }
  /* Состояние источников и пояснение видны в модалке «Источники» — на телефоне
     они только съедают экран до первого лида. */
  .leads-conn, .leads-hint { display: none; }
  .leads-head { margin-bottom: 8px; }
  .leads-head .list-title { font-size: 18px; }
  .leads-head .btn { padding: 8px 12px; font-size: 13px; }
}

/* ── Шапка на телефоне: три компактных ряда ──────────────────────────────
   Было семь кнопок в шапке и четыре ряда на 375 px — список клиентов
   начинался ниже середины экрана. Второстепенное уехало в меню «Ещё»,
   в шапке осталась только навигация.

   Ряд 1: логотип и «Ещё» — кнопка меню занимает место справа от логотипа,
          а не отдельную строку;
   ряд 2: два экрана и «Сегодня» равными долями, с подписями;
   ряд 3: переключатель направления и поиск в одной строке. */
@media (max-width: 720px) {
  header { flex-wrap: wrap; gap: 6px; padding: 8px 10px; align-items: center; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-text { font-size: 14px; }
  .brand-sub { font-size: 10px; }

  #moreBtn { flex: 0 0 auto; order: 1; padding: 9px 12px; font-size: 13px; }

  #navClients, #navDeals, header .btn[onclick*="openToday"] {
    order: 2; flex: 1 1 30%; min-width: 0; justify-content: center;
    padding: 9px 4px; font-size: 13px; white-space: nowrap;
  }
  header .btn .today-badge { font-size: 10px; min-width: 16px; padding: 0 4px; }
  header .btn .ico { flex: 0 0 auto; }

  /* Переключатель направления делит третий ряд с поиском. */
  .seg-switch { order: 3; flex: 0 0 auto; }
  .seg-opt { padding: 8px 12px; font-size: 13px; }

  /* Поиск нужен только на «Клиентах» — на остальных вкладках он занимал
     целую строку впустую. */
  .search-input { display: none; }
  body.view-clients .search-input {
    display: block; order: 4; flex: 1 1 140px; min-width: 0;
  }
}

@media (max-width: 720px) {
  /* Заголовок вкладки дублирует активную кнопку в шапке — на телефоне
     это лишний ряд перед первым лидом. */
  .leads-head .list-title { display: none; }
  .leads-head { margin: 0 0 6px; }
  .leads-head .btn { flex: 1; }
}

/* ── Переключатель направления (окна / фасады) ──────────────────────── */
.seg-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
}
.seg-opt {
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 6px 14px; border-radius: 8px; white-space: nowrap; transition: background .12s, color .12s;
}
.seg-opt:hover { color: var(--text); }
.seg-opt.active { background: var(--surface); color: var(--orange); box-shadow: var(--sh-1); }

@media (max-width: 720px) {
  /* Направление — отдельным рядом во всю ширину, обе кнопки поровну. */
  /* Порядок и размер переключателя заданы выше, в блоке шапки (order: 3):
     раньше он стоял здесь и разворачивался на всю ширину, занимая
     отдельный ряд. Теперь делит строку с поиском. */
  .seg-opt { flex: 0 0 auto; padding: 8px 12px; }
}


/* ── Супер-VIP (v18) ───────────────────────────────────────────────────── */
/* Метка первого лица. Намеренно НЕ похожа на пастельные бейджи категорий:
   категория говорит «где человек в воронке», VIP — «кто он», и путать эти
   две вещи взглядом не должно. Отсюда контурный, а не заливной вид. */
.card-vip {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 8px;
  color: var(--warn);
  border: 1px solid var(--warn);
  background: transparent;
  cursor: help;
}

/* Точка вкладки в сайдбаре — тем же цветом, что и метка на карточке. */
.cat-dot-vip { background: var(--warn); }
.vip-btn.active .cat-dot-vip { background: currentColor; }

/* Переключатель в карточке клиента. */
.vip-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.vip-toggle input { width: 16px; height: 16px; accent-color: var(--warn); cursor: pointer; }

/* ── Потенциал заказа (v19) ───────────────────────────────────────────── */
/* Сумма на карточке. Намеренно не похожа ни на категорию, ни на VIP:
   деньги — отдельный род информации, и глаз должен цеплять их первыми. */
.card-money {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 3px 9px;
  border-radius: 8px;
  color: oklch(.38 .10 155);
  background: oklch(.94 .05 155);
  cursor: help;
}
.card-money i { font-style: normal; font-weight: 600; font-size: 10px; opacity: .65; }

/* Блок в карточке клиента */
.pot-row { display: flex; gap: 8px; align-items: center; }
.pot-amount { position: relative; flex: 1; }
.pot-amount .m-input { padding-right: 26px; font-variant-numeric: tabular-nums; font-weight: 600; }
.pot-cur { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
           color: var(--muted); font-size: 13px; pointer-events: none; }
.pot-clear { flex: 0 0 auto; }

.pot-probs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.pot-prob {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 8px 4px; cursor: pointer; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--muted);
  font: inherit; line-height: 1.2;
}
.pot-prob:hover { border-color: var(--orange); color: var(--text); }
.pot-prob.active { border-color: var(--orange); background: var(--orange-soft); color: var(--text); }
.pot-prob-n { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pot-prob-s { font-size: 10px; }

.pot-hint { margin-top: 8px; font-size: 12px; color: var(--muted); }
.pot-hint-ok { color: oklch(.45 .11 155); font-weight: 600; }
.pot-hint-warn { color: oklch(.48 .10 78); }

/* Сводка по воронке */
.pot-tiles { display: grid; gap: 10px; margin: 14px 0 6px;
             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pot-tile { padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md);
            background: var(--surface2); }
.pot-tile-main { background: oklch(.96 .04 155); border-color: oklch(.85 .07 155); }
.pot-tile-warn { background: oklch(.97 .03 78); border-color: oklch(.89 .07 78); }
.pot-tile-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
              letter-spacing: -.02em; }
.pot-tile-l { margin-top: 4px; font-size: 11px; color: var(--muted); }

.pot-note { margin: 10px 0; padding: 10px 12px; font-size: 12px; color: var(--muted);
            background: var(--surface3); border-radius: var(--r-sm); }
.pot-h { margin: 20px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
         text-transform: uppercase; color: var(--muted); }

.pot-bars { display: flex; flex-direction: column; gap: 8px; }
.pot-bar { display: grid; grid-template-columns: 150px 1fr 110px; gap: 10px;
           align-items: center; font-size: 13px; }
.pot-bar-track { height: 12px; background: var(--surface3); border-radius: 6px; overflow: hidden; }
.pot-bar-fill { display: block; height: 100%; background: var(--orange); border-radius: 6px; }
.pot-bar-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pot-bar-n { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px;
             font-weight: 600; color: var(--muted); background: var(--surface3);
             border-radius: 6px; }

.pot-top { display: flex; flex-direction: column; }
.pot-top-row { display: grid; grid-template-columns: 1fr 130px 52px 130px; gap: 10px;
               align-items: center; padding: 9px 4px; cursor: pointer; font-size: 13px;
               border-bottom: 1px solid var(--border); }
.pot-top-row:hover { background: var(--surface2); }
.pot-top-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pot-top-c { font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pot-top-p { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pot-top-a { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .pot-probs { grid-template-columns: repeat(2, 1fr); }
  .pot-bar { grid-template-columns: 110px 1fr 84px; font-size: 12px; }
  .pot-top-row { grid-template-columns: 1fr 74px 100px; }
  .pot-top-c { display: none; }
}

/* ── Меню «Ещё» ───────────────────────────────────────────────────────────
   На широком экране — панель под кнопкой, на телефоне — лист снизу:
   до верхнего края экрана большим пальцем не дотянуться. */
.more-bg { display: none; position: fixed; inset: 0; z-index: 60; }
.more-bg.show { display: block; }
.more-panel {
  position: absolute; top: 56px; right: 12px; width: 260px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
.more-title {
  padding: 8px 10px 4px; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.more-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.more-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 10px; min-height: 44px;
  font: inherit; font-size: 14px; text-align: left; color: var(--text);
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.more-item:hover { background: var(--surface2); }
.more-item .ico { flex: 0 0 18px; color: var(--muted); }
.more-item .today-badge { margin-left: auto; }
.more-item-exit { color: var(--danger); }
.more-item-exit .ico { color: var(--danger); }
/* Точка на кнопке «Ещё»: внутри есть непрочитанное (новые лиды). Без неё
   спрятанный бейдж «Поиск лидов» перестал бы кого-либо звать. */
.more-dot {
  width: 7px; height: 7px; margin-left: 5px; border-radius: 50%;
  background: var(--danger); flex: 0 0 auto;
}

/* ── Лента категорий на телефоне ─────────────────────────────────────────
   Сайдбар на узком экране не помещается, а переключение категорий — главная
   навигация в клиентах. Поэтому не бургер, а горизонтальная лента: видно
   сразу и текущую категорию, и счётчики, переключение в один тап. */
.cat-strip { display: none; }
@media (max-width: 820px) {
  .cat-strip {
    display: flex; gap: 6px; align-items: center;
    padding: 8px 10px; overflow-x: auto; overflow-y: hidden;
    background: var(--surface); border-bottom: 1px solid var(--border);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* Шапка тоже липкая, поэтому лента прилипает ПОД ней, а не поверх:
       иначе обе оказываются на top: 0 и перекрывают друг друга.
       Высоту шапки держим в переменной — она разная на телефоне и планшете. */
    position: sticky; top: var(--header-h, 0px); z-index: 20;
  }
  .cat-strip::-webkit-scrollbar { display: none; }
  body:not(.view-clients) .cat-strip { display: none; }

  .cat-chip {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    min-height: 38px; padding: 8px 12px;
    font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
    color: var(--muted); background: var(--surface2);
    border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  }
  .cat-chip .cat-dot { width: 7px; height: 7px; }
  .cat-chip-n {
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 1px 6px; border-radius: 999px;
    background: var(--surface3); color: var(--muted);
  }
  .cat-chip.active {
    color: var(--text); background: var(--orange-soft); border-color: var(--orange);
  }
  .cat-chip.active .cat-chip-n { background: var(--orange); color: #fff; }
  .cat-chip-hot .cat-chip-n { background: var(--danger); color: #fff; }

  /* Панель «Ещё» на телефоне — лист снизу во всю ширину. */
  .more-panel {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    max-height: 80vh; overflow-y: auto;
  }
  .more-bg.show { background: rgba(0,0,0,.35); }
}

/* ── Вложения карточки (v20) ─────────────────────────────────────────── */
.att-group + .att-group { margin-top: 14px; }
.att-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.att-add {
  font: inherit; font-size: 12px; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--orange); background: none; border: 0;
  padding: 6px 8px; min-height: 34px; border-radius: var(--r-sm); cursor: pointer;
}
.att-add:hover { background: var(--orange-soft); }

.att-row { display: flex; align-items: center; gap: 4px; }
.att-row + .att-row { margin-top: 4px; }
.att-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 8px; min-height: 46px; text-align: left; font: inherit;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; color: var(--text);
}
.att-open:hover { border-color: var(--orange); background: var(--orange-soft); }
.att-ico {
  flex: 0 0 38px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: var(--muted); background: var(--surface3); border-radius: 6px;
}
.att-ico-pdf { color: oklch(.45 .15 25); background: oklch(.95 .04 25); }
.att-ico-img { color: oklch(.42 .11 250); background: oklch(.95 .04 250); }
.att-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.att-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-sub { font-size: 11px; color: var(--muted); }
.att-act {
  flex: 0 0 auto; width: 34px; min-height: 46px; display: flex;
  align-items: center; justify-content: center; font-size: 15px;
  color: var(--muted); background: none; border: 0; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none;
}
.att-act:hover { background: var(--surface3); color: var(--text); }
.att-del:hover { background: oklch(.95 .04 25); color: var(--danger); }
.att-empty { padding: 10px; font-size: 12px; color: var(--muted);
             background: var(--surface3); border-radius: var(--r-sm); }
.att-busy { padding: 10px; margin-bottom: 8px; font-size: 12px; color: var(--orange);
            background: var(--orange-soft); border-radius: var(--r-sm); }

/* Быстрый просмотр: PDF во встроенном просмотрщике, фото как есть. */
.att-view-body {
  margin-top: 10px; background: var(--surface3); border-radius: var(--r-md);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 320px; max-height: 70vh;
}
.att-frame { width: 100%; height: 70vh; border: 0; display: block; }
.att-img { max-width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.att-nopreview { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.att-nopreview-ico {
  width: 56px; height: 56px; margin: 0 auto 12px; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
  color: var(--muted); background: var(--surface); border-radius: 10px;
}
.att-view-dl { margin-top: 10px; }

@media (max-width: 720px) {
  .att-frame { height: 60vh; }
  .att-view-body { min-height: 240px; }
}

/* Метки вложений на карточке в списке: сразу видно, есть ли КП и замеры,
   без открытия карточки. Контурные — чтобы не спорить с суммой и категорией. */
.card-att {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 8px; cursor: help;
  color: var(--muted); background: transparent;
  border: 1px solid var(--border);
}
.card-att-kp { color: oklch(.45 .13 25); border-color: oklch(.82 .08 25); }

/* ── Заблокированный сотрудник в настройках ──────────────────────────────
   Блокировка после серии неудачных попыток временная и снимается сама,
   но администратор должен видеть её сразу: иначе «не могу войти» и «забыл
   пароль» выглядят одинаково, а лечатся по-разному. */
.user-row.user-locked { background: oklch(.97 .03 25); border-radius: var(--r-sm); }
.user-lock-note {
  display: block; margin-top: 3px; font-size: 11px; line-height: 1.35;
  color: oklch(.45 .13 25);
}
.user-unlock { flex: 0 0 auto; color: oklch(.45 .13 25); border-color: oklch(.85 .07 25); }
.user-unlock:hover { background: oklch(.94 .05 25); }
.user-pass { flex: 0 0 auto; }
@media (max-width: 720px) {
  .user-unlock, .user-pass { min-height: 42px; }
}