/* Дизайн-система CRM ТВК.
   Один файл на все страницы. Раньше стили были скопированы в каждую из шести
   и успели разойтись — поэтому любая правка внешнего вида требовала шести
   правок и всё равно давала разный результат.

   Опорные решения (взяты у CRM с лучшими оценками за интерфейс):
   - Attio, Folk — спокойная типографика, один акцент, тонкие линии вместо
     рамок и теней. Плотно, но не тесно.
   - Pipedrive — статус виден цветом, а не словом в сером тексте; мобильная
     версия равноправна, а не «тоже открывается».
   - HubSpot — боковая навигация со счётчиками: сколько висит, видно не заходя.

   Главное отличие от прошлой версии: красный больше не кнопка.
   Он был на каждом действии, и экран из-за этого всё время кричал.
   Теперь красный — только бренд и то, что действительно требует внимания
   (просрочено, пропущено, отказ). Основное действие — графит. */

:root {
  --bg:#f5f6f8;
  --surface:#fff;
  --surface-2:#fafbfc;
  --fg:#15181d;
  --fg-2:#4b5563;
  --muted:#7b8494;
  --line:#e6e8ec;
  --line-2:#eff1f4;
  --brand:#b8232a;
  --primary:#15181d;
  --focus:#2563eb;
  --r:10px;
  --r-lg:14px;
  --r-pill:999px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 6px 20px rgba(16,24,40,.10);
  --side-w:236px;

  /* Семантика статусов. Один набор на всю CRM: и обращения, и сделки,
     и задачи красятся из него, чтобы «жёлтое» везде значило одно и то же. */
  --amber-bg:#fff6e5;  --amber-fg:#8a5a00;
  --blue-bg:#eaf1fe;   --blue-fg:#1b4ea3;
  --violet-bg:#f2effb; --violet-fg:#59389d;
  --green-bg:#e8f6ec;  --green-fg:#1d6b34;
  --red-bg:#fdecec;    --red-fg:#a51f1f;
  --grey-bg:#f0f2f5;   --grey-fg:#5a6472;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--fg); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0; font-weight:650; letter-spacing:-.01em; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:6px; }

/* ------------------------------------------------------------ каркас */

.app { display:flex; min-height:100vh; }

.side {
  width:var(--side-w); flex:0 0 var(--side-w);
  background:var(--surface); border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; padding:14px 12px 12px;
}
.brand { display:flex; align-items:center; gap:10px; padding:4px 8px 16px; }
.brand .mark {
  width:30px; height:30px; border-radius:8px; flex:0 0 30px;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; letter-spacing:.02em;
}
.brand b { font-size:15px; font-weight:650; }
.brand span { display:block; font-size:11px; color:var(--muted); font-weight:400; letter-spacing:.02em; }

.nav { display:flex; flex-direction:column; gap:1px; }
.nav a {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px;
  color:var(--fg-2); font-size:14px; text-decoration:none;
}
.nav a:hover { background:var(--line-2); text-decoration:none; }
.nav a.on { background:#eef0f3; color:var(--fg); font-weight:600; }
.nav a.on .ic { color:var(--brand); }
.nav .ic { flex:0 0 18px; width:18px; height:18px; color:var(--muted); }
.nav .txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav .badge {
  flex:0 0 auto; min-width:20px; height:19px; padding:0 6px;
  border-radius:var(--r-pill); background:var(--grey-bg); color:var(--grey-fg);
  font-size:11.5px; font-weight:650; line-height:19px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.nav .badge.hot { background:var(--brand); color:#fff; }
.nav .sep { height:1px; background:var(--line); margin:10px 10px; }
.nav .cap { padding:6px 10px 2px; font-size:11px; color:var(--muted);
            text-transform:uppercase; letter-spacing:.06em; font-weight:650; }

.side .foot { margin-top:auto; padding:10px 10px 2px; border-top:1px solid var(--line); }
.side .foot .me { font-size:13.5px; font-weight:600; }
.side .foot .role { font-size:12px; color:var(--muted); }
.side .foot a { font-size:12.5px; color:var(--muted); }

/* Контейнер контента. Назван col-main, а не main: кнопка главного действия
   тоже .main, и два разных смысла у одного класса — это ровно та ошибка,
   из-за которой кнопки растягивались во всю строку. */
.col-main { flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar {
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:0 24px; height:58px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:20;
}
.topbar h1 { font-size:17px; }
.topbar .sub { font-size:13px; color:var(--muted); font-weight:400; }
.topbar .right { margin-left:auto; display:flex; align-items:center; gap:10px; }

.wrap { padding:20px 24px 60px; max-width:1180px; width:100%; }
.wrap.wide { max-width:none; }

/* ------------------------------------------------------- типовые блоки */

.msg { padding:10px 13px; border-radius:var(--r); margin-bottom:14px; font-size:14px;
       border:1px solid transparent; }
.msg.err  { background:var(--red-bg);   color:var(--red-fg);   border-color:#f6d5d5; }
.msg.ok   { background:var(--green-bg); color:var(--green-fg); border-color:#cfe8d6; }
.msg.warn { background:var(--amber-bg); color:var(--amber-fg); border-color:#f3e0ba; }

.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.tabs a {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:var(--r-pill); font-size:13.5px;
  background:var(--surface); border:1px solid var(--line); color:var(--fg-2);
  text-decoration:none;
}
.tabs a:hover { background:var(--line-2); text-decoration:none; }
.tabs a.on { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }
.tabs a b { font-weight:650; font-variant-numeric:tabular-nums; opacity:.65; }
.tabs a.on b { opacity:.8; }

.pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; line-height:1;
  padding:4px 8px; border-radius:6px;
  background:var(--grey-bg); color:var(--grey-fg); white-space:nowrap;
}
.pill.amber  { background:var(--amber-bg);  color:var(--amber-fg); }
.pill.blue   { background:var(--blue-bg);   color:var(--blue-fg); }
.pill.violet { background:var(--violet-bg); color:var(--violet-fg); }
.pill.green  { background:var(--green-bg);  color:var(--green-fg); }
.pill.red    { background:var(--red-bg);    color:var(--red-fg); }
.pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.8; }

.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:16px 18px; margin-bottom:12px;
}
.card.pad-s { padding:13px 15px; }
.card h2 { font-size:18px; margin-bottom:3px; }
.card h3 { font-size:14px; margin-bottom:10px; }
.card > .sub { color:var(--muted); font-size:13.5px; margin:0 0 14px; }

/* Аватар-инициалы вместо строки «ответственный: Иванов» — так взгляд
   цепляется за человека быстрее, чем читает подпись. */
.ava {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; flex:0 0 22px;
  background:#e6eaf0; color:#3f4a5a; font-size:10.5px; font-weight:700;
  letter-spacing:.01em;
}
.ava.n0{background:#e4ecf7;color:#2c5282} .ava.n1{background:#f7e9e4;color:#8a4a2f}
.ava.n2{background:#e7f2e9;color:#2f6b3d} .ava.n3{background:#efe8f7;color:#5b3f8a}
.ava.n4{background:#f7f0dd;color:#7a5c14} .ava.n5{background:#e2f0f2;color:#1f5f68}
.ava.none { background:transparent; border:1px dashed #c9cfd8; color:var(--muted); }
.who { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--fg-2); }

.muted { color:var(--muted); }
.note  { color:var(--muted); font-size:13px; }
.num   { font-variant-numeric:tabular-nums; }
.empty { color:var(--muted); padding:44px 0; text-align:center; font-size:14px; }
.empty .big { display:block; font-size:15px; color:var(--fg-2); margin-bottom:4px; }

/* ------------------------------------------------------------- кнопки */

.btn, button, input[type=submit] {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 14px; border-radius:9px; font-size:13.5px; font-weight:600;
  font-family:inherit; cursor:pointer; white-space:nowrap;
  background:var(--surface); color:var(--fg); border:1px solid var(--line);
  text-decoration:none;
}
.btn:hover, button:hover { background:var(--line-2); text-decoration:none; }
.btn.main, button.main { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn.main:hover, button.main:hover { background:#000; }
.btn.danger, button.danger { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.ghost, button.ghost { background:transparent; border-color:transparent; color:var(--fg-2); }
.btn.ghost:hover, button.ghost:hover { background:var(--line-2); }
.btn.s, button.s { padding:5px 10px; font-size:12.5px; border-radius:7px; }
.btn[disabled], button[disabled] { opacity:.5; cursor:default; }

/* --------------------------------------------------------------- формы */

input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=search], input[type=date], input[type=number], select, textarea {
  padding:8px 11px; border:1px solid var(--line); border-radius:9px;
  font-size:14px; font-family:inherit; color:var(--fg);
  background:var(--surface); max-width:100%;
}
input:focus, select:focus, textarea:focus { border-color:#c3cbd6; }
textarea { min-height:70px; resize:vertical; }
select {
  appearance:none; padding-right:28px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%237b8494' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
}
label.lb { display:block; font-size:12.5px; color:var(--muted); margin:12px 0 5px; font-weight:500; }
.row { display:flex; gap:8px; flex-wrap:wrap; }
.row > * { flex:1; min-width:150px; }
.row.tight > * { flex:0 0 auto; min-width:0; }

form.search { display:flex; gap:8px; margin-bottom:16px; }
form.search input[name=q] { flex:1; min-width:0; padding:9px 13px; font-size:14.5px; }

/* ------------------------------------------------------------- таблицы */

/* overflow-x:auto, а не hidden: у списка клиентов восемь столбцов, и на
   ноутбуке последний — с кнопкой «позвонить» — просто обрезался и был
   недоступен. Лучше полоса прокрутки, чем недостижимая кнопка. */
.tbl-wrap { background:var(--surface); border:1px solid var(--line);
            border-radius:var(--r-lg); overflow-x:auto; margin-bottom:16px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--line-2); }
th { background:var(--surface-2); font-weight:600; font-size:12px; color:var(--muted);
     text-transform:uppercase; letter-spacing:.04em; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--surface-2); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------------------------------------------------------- сводка/KPI */

.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:20px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
       padding:14px 16px; text-decoration:none; color:inherit; display:block; }
.kpi:hover { border-color:#d6dae1; text-decoration:none; }
.kpi .t { font-size:12.5px; color:var(--muted); margin-bottom:6px; }
.kpi .v { font-size:26px; font-weight:680; letter-spacing:-.02em; line-height:1.1;
          font-variant-numeric:tabular-nums; }
.kpi .v.alert { color:var(--brand); }
.kpi .h { font-size:12px; color:var(--muted); margin-top:4px; }

.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:14px; align-items:start; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.panel > h3 { padding:13px 16px; border-bottom:1px solid var(--line-2);
              font-size:13.5px; display:flex; align-items:center; gap:8px; margin:0; }
.panel > h3 a { margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:500; }
.panel .it { padding:11px 16px; border-bottom:1px solid var(--line-2);
             display:flex; gap:10px; align-items:flex-start; }
.panel .it:last-child { border-bottom:0; }
.panel .it .g { flex:1; min-width:0; }
.panel .it .g .n { font-weight:600; font-size:14px; }
.panel .it .g .m { font-size:12.5px; color:var(--muted); }
.panel .none { padding:20px 16px; color:var(--muted); font-size:13.5px; text-align:center; }

/* ------------------------------------------------------- доска (сделки) */

.board { display:flex; gap:12px; overflow-x:auto; padding-bottom:12px; }
.col { flex:0 0 268px; background:#eef0f3; border-radius:var(--r-lg); padding:10px; }
.col > h3 { font-size:12.5px; color:var(--fg-2); padding:2px 4px 10px;
            display:flex; align-items:center; gap:7px; }
.col > h3 .n { margin-left:auto; color:var(--muted); font-weight:600; }
.col .dc { background:var(--surface); border:1px solid var(--line); border-radius:10px;
           padding:10px 12px; margin-bottom:8px; display:block; color:inherit; text-decoration:none; }
.col .dc:hover { border-color:#c9cfd8; text-decoration:none; }
.col .dc .t { font-weight:600; font-size:13.5px; margin-bottom:3px; }
.col .dc .s { font-size:12px; color:var(--muted); display:flex; gap:7px; align-items:center;
              flex-wrap:wrap; margin-top:6px; }
.col .sum { font-size:12px; color:var(--muted); padding:0 4px 8px; font-variant-numeric:tabular-nums; }

/* -------------------------------------------------------------- тосты */

#toasts { position:fixed; right:18px; bottom:18px; z-index:100;
          display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast { background:#15181d; color:#fff; padding:10px 15px; border-radius:10px;
         font-size:13.5px; box-shadow:var(--shadow-lg); max-width:340px;
         animation:tin .18s ease-out; }
.toast.bad { background:var(--brand); }
@keyframes tin { from { opacity:0; transform:translateY(6px); } }
.busy { opacity:.55; pointer-events:none; }

/* ------------------------------------------------------------ телефон */

.mobile-only { display:none; }

@media (max-width:900px) {
  .app { display:block; }

  /* Боковая панель уезжает вниз, в зону большого пальца: так сделано
     в мобильных Pipedrive и HubSpot, и это единственный вариант,
     при котором CRM реально открывают в машине. */
  .side {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    width:auto; height:auto; flex:none;
    flex-direction:row; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right:0; border-top:1px solid var(--line); z-index:50;
    box-shadow:0 -2px 10px rgba(16,24,40,.06);
  }
  .side .brand, .side .foot, .nav .sep, .nav .cap { display:none; }
  .nav { flex-direction:row; width:100%; gap:0; }
  .nav a {
    position:relative;
    flex:1; flex-direction:column; gap:2px; padding:6px 2px;
    font-size:10.5px; text-align:center; border-radius:8px; min-width:0;
  }
  .nav a.on { background:transparent; color:var(--brand); }
  .nav .ic { width:21px; height:21px; flex:0 0 21px; }
  .nav .txt { flex:none; width:100%; font-size:10.5px; }
  .nav .badge {
    position:absolute; top:2px; left:50%; margin-left:4px;
    min-width:16px; height:16px; line-height:16px; padding:0 4px; font-size:10px;
    background:var(--brand); color:#fff;
  }

  .topbar { padding:0 16px; height:52px; }
  .topbar h1 { font-size:16px; }
  .topbar .sub { display:none; }
  .wrap { padding:14px 14px 92px; }

  .mobile-only { display:block; }
  .desk-only { display:none !important; }

  /* Таблицы превращаются в карточки: горизонтальная прокрутка таблицы
     на телефоне — это гарантированно потерянные столбцы справа. */
  .tbl-wrap { border:0; background:transparent; border-radius:0; }
  .tbl-wrap thead { display:none; }
  .tbl-wrap table, .tbl-wrap tbody, .tbl-wrap tr, .tbl-wrap td { display:block; width:auto; }
  .tbl-wrap tr {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); padding:12px 14px; margin-bottom:9px;
  }
  .tbl-wrap td { border:0; padding:2px 0; text-align:left; }
  .tbl-wrap td.num { text-align:left; }
  .tbl-wrap td[data-l]:before {
    content:attr(data-l) " "; color:var(--muted); font-size:12px;
  }
  .tbl-wrap td.head:before { content:none; }
  .tbl-wrap td.head { font-size:15px; font-weight:650; margin-bottom:4px; }
  .tbl-wrap tbody tr:hover td { background:transparent; }

  .kpis { grid-template-columns:repeat(2,1fr); gap:9px; }
  .kpi { padding:12px 13px; }
  .kpi .v { font-size:22px; }
  #toasts { left:12px; right:12px; bottom:76px; align-items:stretch; }
  .toast { max-width:none; }
}

@media (max-width:420px) {
  .nav a .txt { font-size:9.5px; }
}

/* Печать: в CRM печатают списки, а не интерфейс. */
@media print {
  .side, .topbar .right, .tabs, .acts, #toasts { display:none !important; }
  .app { display:block; } .wrap { padding:0; max-width:none; }
  .card, .tbl-wrap { border-color:#ccc; }
}

/* ------------------------------------------------- карточка обращения */

/* Порядок чтения задан размером, а не порядком слов: сначала видно, КТО
   (телефон и компания), потом ЧТО нужно, и только потом служебное —
   когда, откуда, кто ведёт. Раньше всё это было одним серым текстом
   одного размера, и карточку приходилось именно читать, а не смотреть. */
.rq { background:var(--surface); border:1px solid var(--line);
      border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden; }
.rq.urgent  { box-shadow:inset 3px 0 0 var(--amber-fg); }
.rq.missed  { box-shadow:inset 3px 0 0 var(--brand); }
.rq .bd { padding:14px 16px 12px; }
.rq .hd { display:flex; align-items:flex-start; gap:10px; }
.rq .hd .g { flex:1; min-width:0; }
.rq .tel { font-size:16.5px; font-weight:650; letter-spacing:-.01em;
           font-variant-numeric:tabular-nums; }
.rq .tel.no { color:var(--muted); font-weight:500; font-size:15px; }
.rq .co { font-size:14px; color:var(--fg-2); margin-top:1px; }
.rq .co a { font-weight:600; }
.rq .subj { font-size:14px; color:var(--fg-2); margin-top:7px; }
.rq .cmt { font-size:13.5px; color:var(--fg-2); margin-top:8px;
           padding:7px 11px; background:var(--surface-2); border-radius:8px;
           border-left:2px solid var(--line); }
.rq .meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.rq .meta .t { font-size:12px; color:var(--muted); }

.rq .acts { display:flex; gap:7px; flex-wrap:wrap; align-items:center;
            padding:10px 16px; border-top:1px solid var(--line-2);
            background:var(--surface-2); }
.rq .acts form { display:contents; }
.rq .acts .sp { flex:1; }

/* Статус и ответственный — не «поля формы», а видимое состояние, которое
   можно поменять на месте. Поэтому выпадающий список покрашен как ярлык. */
select.st {
  font-size:12.5px; font-weight:600; padding:5px 24px 5px 9px; border-radius:7px;
  border:1px solid transparent; background-color:var(--grey-bg); color:var(--grey-fg);
  background-position:right 6px center;
}
select.st.amber  { background-color:var(--amber-bg);  color:var(--amber-fg); }
select.st.blue   { background-color:var(--blue-bg);   color:var(--blue-fg); }
select.st.violet { background-color:var(--violet-bg); color:var(--violet-fg); }
select.st.green  { background-color:var(--green-bg);  color:var(--green-fg); }
select.st.red    { background-color:var(--red-bg);    color:var(--red-fg); }
select.own { font-size:12.5px; padding:5px 24px 5px 9px; border-radius:7px; max-width:150px; }

/* Поля, которые нужны не каждый раз — привязка к компании и комментарий —
   спрятаны под «ещё». В прошлой версии они стояли в одну строку с
   кнопками: пять элементов управления подряд, и на телефоне это
   превращалось в кашу. */
.rq .more { border-top:1px solid var(--line-2); }
.rq .more > summary {
  list-style:none; cursor:pointer; padding:9px 16px;
  font-size:12.5px; color:var(--muted); font-weight:600;
  background:var(--surface-2); user-select:none;
}
.rq .more > summary::-webkit-details-marker { display:none; }
.rq .more > summary:after { content:" ⌄"; }
.rq .more[open] > summary:after { content:" ⌃"; }
.rq .more .in { padding:12px 16px 14px; display:flex; flex-direction:column; gap:9px; }
.rq .more .ln { display:flex; gap:7px; }
.rq .more .ln input { flex:1; min-width:0; }

.addbox { background:var(--surface); border:1px solid var(--line);
          border-radius:var(--r-lg); margin-bottom:16px; }
.addbox > summary { list-style:none; cursor:pointer; padding:13px 16px;
                    font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; }
.addbox > summary::-webkit-details-marker { display:none; }
.addbox > summary:before { content:"+"; font-size:17px; color:var(--muted); font-weight:500; }
.addbox .in { padding:0 16px 16px; }
.addbox .hint { color:var(--muted); font-size:13px; margin:0 0 12px; }

@media (max-width:900px) {
  .rq .acts { padding:10px 14px; }
  .rq .acts .sp { display:none; }
  .rq .acts > form:first-child button { width:100%; }
  select.own { max-width:none; flex:1; }
}

/* ---------------------------------------------------------- задачи */

.tk { display:flex; gap:12px; align-items:flex-start; }
.tk > .pill { margin-top:2px; min-width:48px; justify-content:center; }
.tk .g { flex:1; min-width:0; }
.tk .txt { font-size:14.5px; font-weight:500; }
.tk .m { font-size:12.5px; color:var(--muted); margin-top:3px; }
.tk.late { box-shadow:inset 3px 0 0 var(--brand); }
.tk.done .txt { text-decoration:line-through; color:var(--muted); font-weight:400; }
.tka { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.tka form { display:contents; }
.tka input[type=date] { padding:5px 8px; font-size:12.5px; border-radius:7px; }

@media (max-width:900px) {
  .tk { flex-wrap:wrap; }
  .tka { width:100%; margin-top:8px; }
  .tka button { flex:1; }
}

/* ------------------------------- совместимость с разметкой старых страниц

   «Клиенты» и «Сделки» размечены своими классами (.tag, .tot, .grid, .g3,
   .row2). Переименовывать их в разметке — это сотни правок ради ничего:
   дешевле и безопаснее один раз описать их здесь через те же токены,
   что и всё остальное. Внешне они неотличимы от новых блоков. */

.tag {
  display:inline-flex; align-items:center; font-size:12px; font-weight:600;
  line-height:1.3; padding:4px 8px; border-radius:6px;
  background:var(--grey-bg); color:var(--grey-fg);
}
/* Названия сегментов длинные («Ядро — профильный монтажник»): в ярлыке они
   должны переноситься, иначе распирают столбец и выдавливают соседние. */
td .tag { white-space:normal; }
.tag.rep, .tag.won { background:var(--green-bg); color:var(--green-fg); }
.tag.lost         { background:var(--red-bg);   color:var(--red-fg); }
.tag.srv          { background:var(--violet-bg);color:var(--violet-fg); }

.tot { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
       padding:14px 16px; margin-bottom:16px; font-size:13.5px; color:var(--fg-2); line-height:1.65; }
.tot b { color:var(--fg); font-weight:650; }

form.f { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
form.f input[name=q] { flex:1; min-width:180px; }
form.f label { display:flex; align-items:center; gap:6px; margin:0;
               font-size:13.5px; color:var(--fg-2); white-space:nowrap; }
form.f label input[type=checkbox] { width:auto; margin:0; }

/* Поле под подписью — всегда во всю ширину карточки: так форма читается
   сверху вниз одной колонкой, а не рассыпается по строке. */
.card label { display:block; font-size:12.5px; color:var(--muted); margin:14px 0 5px; font-weight:500; }
.card label .note { font-weight:400; }
.card label + input, .card label + select, .card label + textarea,
.card > form > input[type=text], .card textarea { width:100%; }
.card form + form { margin-top:4px; }

.grid { display:flex; gap:26px; flex-wrap:wrap; margin-bottom:4px; }
.grid > div { font-size:15px; font-weight:600; }
.grid > div span { display:block; color:var(--muted); font-size:12px;
                   font-weight:400; margin-bottom:2px; }

.g3 { display:flex; gap:10px; flex-wrap:wrap; }
.g3 > div { flex:1; min-width:150px; }
.g3 > div input, .g3 > div select { width:100%; }

.row2 { display:flex; gap:8px; flex-wrap:wrap; }
.row2 input { flex:1; min-width:130px; }

.chk { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:14px; }
.chk input { width:auto; }

/* Старые страницы печатали заголовок карточки через inline-размер.
   Здесь он задаётся один раз и одинаково. */
.card h2 { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.card h2 .tag { font-weight:600; }

/* Адрес в карточке обращения. Когда телефон есть — почта идёт мелко
   рядом; когда обращение пришло письмом и номера нет — адрес и есть
   главная строка, но набирать его глазами длиннее номера, поэтому
   кегль чуть меньше. */
.rq .mail { font-size:12.5px; color:var(--muted); margin-left:9px; }
.rq .tel.mail-main { font-size:14.5px; font-weight:600; word-break:break-all; }