/* Тема «Пульт» — светлый вариант «Мышиный светлый» (2026-09-15).
   Накрывает Bootstrap 5 data-bs-theme="light" точечными переменными —
   остальное (карточки, таблицы, формы, канбан-доска) наследует тему Bootstrap как есть. */

:root {
  /* Светлая рабочая область варианта Б (2026-09-24): фон страницы светлее
     прежнего «мышиного» #c9c4b8 — на нём белые карточки и поля ввода
     читаются как отдельные поверхности, а не сливаются с подложкой. */
  --crm-bg: #e8e4da;
  --crm-surface: #ffffff;
  --crm-surface-2: #f7f5f0;
  --crm-border: #c9c2b4;
  --crm-border-strong: #a49d8d;
  --crm-ink: #1a1712;
  --crm-ink-muted: #55503f;
  --crm-accent: #b8410a;
  /* Тот же терракот, но темнее — для ТЕКСТА и ссылок: светлый #b8410a на
     фоне страницы давал контраст 3,18:1 при норме 4,5:1 (аудит 2026-09-23). */
  --crm-accent-text: #8c3108;
  --crm-accent-ink: #fff2e8;
  --crm-green: #2f8a55;
  --crm-green-text: #235f3c;
  --crm-amber: #b3760f;
  --crm-red: #b8410a;
  /* Боковое меню */
  --crm-side-bg: #2b2721;
  --crm-side-bg-active: #3d372e;
  --crm-side-ink: #e8e4da;
  --crm-side-ink-muted: #cfc8bb;
  --crm-side-accent: #d4602a;
  --crm-side-width: 232px;
  --crm-topbar-h: 70px;

  --bs-body-bg: var(--crm-bg);
  --bs-body-bg-rgb: 232, 228, 218;
  --bs-body-color: var(--crm-ink);
  --bs-border-color: var(--crm-border);
  --bs-primary: var(--crm-accent);
  --bs-primary-rgb: 184, 65, 10;
  --bs-link-color: var(--crm-accent-text);
  --bs-link-color-rgb: 140, 49, 8;
  --bs-link-hover-color: #5e2105;
  --bs-link-hover-color-rgb: 94, 33, 5;
  --bs-tertiary-bg: var(--crm-surface-2);
  --bs-secondary-bg: var(--crm-surface);
}

html {
  font-size: 18px;
}

body {
  font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
  background: var(--crm-bg);
}

/* ---------- рамка у диалоговых окон ---------- */
.modal-content {
  border: 1px solid var(--crm-border);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 20px 48px -16px rgba(0, 0, 0, 0.6);
}
h1, h2, h3, h4, h5, h6 {
  font-family: "PT Serif", Georgia, serif;
}
.num, .crm-num {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.btn-outline-primary {
  --bs-btn-color: var(--crm-accent);
  --bs-btn-border-color: var(--crm-accent);
  --bs-btn-hover-bg: var(--crm-accent);
  --bs-btn-hover-border-color: var(--crm-accent);
  --bs-btn-hover-color: var(--crm-accent-ink);
}
.btn-primary {
  --bs-btn-bg: var(--crm-accent);
  --bs-btn-border-color: var(--crm-accent);
  --bs-btn-color: var(--crm-accent-ink);
  --bs-btn-hover-bg: var(--crm-ink);
  --bs-btn-hover-border-color: var(--crm-ink);
  --bs-btn-hover-color: var(--crm-surface);
  --bs-btn-active-bg: var(--crm-ink);
  --bs-btn-active-border-color: var(--crm-ink);
  --bs-btn-active-color: var(--crm-surface);
}

/* ---------- навбар ---------- */
.navbar.crm-navbar {
  background: var(--crm-surface) !important;
  border-bottom: 1px solid var(--crm-border);
}
.crm-navbar .navbar-brand {
  font-family: "Oswald", "Arial Narrow", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .95rem;
  color: var(--crm-ink) !important;
}
.crm-navbar .navbar-brand::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--crm-accent);
  margin-right: 9px;
}
.crm-navbar .nav-link {
  font-size: .88rem;
  color: var(--crm-ink-muted);
}
.crm-navbar .nav-link:hover { color: var(--crm-ink) !important; }

/* ---------- рабочий стол: верхняя плашка ---------- */
.cs-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.cs-title {
  font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .12em;
  font-size: .95rem; text-transform: uppercase; color: var(--crm-ink);
}
.cs-date { font-family: "JetBrains Mono", monospace; font-size: .78rem; color: var(--crm-ink-muted); }

/* ---------- KPI-метры ---------- */
.cs-meters { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.cs-meter {
  flex: 1; min-width: 170px; border-radius: 6px; padding: 13px 15px;
  border: 1px solid var(--crm-border); border-left: 4px solid var(--tile, var(--crm-border));
  background: color-mix(in srgb, var(--tile, var(--crm-border)) 10%, var(--crm-surface));
}
.cs-meter-label { font-family: "Oswald", sans-serif; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--crm-ink-muted); margin-bottom: 9px; }
.cs-meter-row { display: flex; align-items: flex-end; gap: 10px; }
.cs-meter-num { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.55rem; color: var(--crm-ink); }
.cs-leds { display: flex; gap: 3px; align-items: flex-end; }
.cs-leds i { width: 5px; display: block; border-radius: 1px; background: var(--crm-border); }
.cs-leds i.on { background: var(--led, var(--crm-accent)); }

/* ---------- панели ---------- */
.cs-stack { display: flex; flex-direction: column; gap: 16px; }
.cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-panel { background: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: 6px; padding: 15px; }
.cs-panel h3 {
  font-family: "Oswald", sans-serif; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--crm-ink-muted); margin: 0 0 12px; font-weight: 600;
}
.cs-panel--project { border-left: 4px solid var(--crm-green); }
.cs-panel--project h3 { color: var(--crm-green); }
.cs-empty { font-size: .82rem; color: var(--crm-ink-muted); }

/* ---------- список задач/сделок ---------- */
.cs-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--crm-border); }
.cs-row:first-child { border-top: none; }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cs-dot.red { background: var(--crm-red); } .cs-dot.amber { background: var(--crm-amber); } .cs-dot.green { background: var(--crm-green); }
.cs-row-main { flex: 1; min-width: 0; }
.cs-row-title { font-size: .85rem; color: var(--crm-ink); text-decoration: none; }
.cs-row-title:hover { color: var(--crm-accent); }
.cs-row-sub { font-size: .74rem; color: var(--crm-ink-muted); margin-top: 1px; }
.cs-row-time { font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--crm-ink-muted); flex: none; }

/* ---------- воронка как схема ---------- */
.cs-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-flow-box {
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
  border: 1.5px solid var(--crm-border); border-radius: 3px; background: var(--crm-bg);
  padding: 9px 12px; text-align: center; width: 152px; height: 118px; flex: none;
}
.cs-flow-box.active { background: var(--crm-accent); border-color: var(--crm-accent); }
.cs-flow-box--project {
  border-color: color-mix(in srgb, var(--crm-green) 45%, var(--crm-border));
  background: color-mix(in srgb, var(--crm-green) 10%, var(--crm-bg));
}
.cs-flow-box--project.active { background: var(--crm-green); border-color: var(--crm-green); }
.cs-flow-name {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  font-size: .82rem; line-height: 1.25; color: var(--crm-ink-muted); white-space: normal; word-break: break-word;
}
.cs-flow-box.active .cs-flow-name { color: var(--crm-accent-ink); }
.cs-flow-num { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: .88rem; color: var(--crm-ink); }
.cs-flow-box.active .cs-flow-num { color: var(--crm-accent-ink); }
.cs-flow-arrow { color: var(--crm-ink-muted); font-size: .78rem; padding: 0 1px; }

/* ---------- график со сроками (размерные метки) ---------- */
.cs-tl-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 14px; margin-bottom: 26px; }
.cs-tl-row:last-child { margin-bottom: 0; }
.cs-tl-name { font-size: .82rem; color: var(--crm-ink); line-height: 1.3; }
.cs-tl-name a { color: inherit; text-decoration: none; }
.cs-tl-name a:hover { color: var(--crm-accent); }
.cs-tl-sub { font-size: .72rem; color: var(--crm-ink-muted); margin-top: 2px; }
.cs-tl-track { position: relative; height: 20px; border-left: 1.5px solid var(--crm-border); border-right: 1.5px solid var(--crm-border); }
.cs-tl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--crm-border); }
.cs-tl-fill { position: absolute; top: 6px; height: 8px; left: 0; background: var(--crm-accent); border-radius: 1px; }
.cs-tl-fill.overdue { background: var(--crm-red); }
.cs-tl-marker { position: absolute; top: -20px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.cs-tl-marker-label { font-family: "JetBrains Mono", monospace; font-size: .64rem; color: var(--crm-ink-muted); white-space: nowrap; }
.cs-tl-marker.soon .cs-tl-marker-label,
.cs-tl-marker.overdue .cs-tl-marker-label { color: var(--crm-red); }
.cs-tl-marker-line { width: 1.5px; height: 12px; background: var(--crm-border); margin-top: 2px; }
.cs-tl-marker.soon .cs-tl-marker-line,
.cs-tl-marker.overdue .cs-tl-marker-line { background: var(--crm-red); }

@media (max-width: 720px) {
  .cs-cols { grid-template-columns: 1fr; }
  .cs-tl-row { grid-template-columns: 130px 1fr; }
  .cs-tl-name { font-size: .74rem; }
}

/* ---------- рабочий стол: увеличенный шрифт (правка 2026-09-18) ----------
   Ограничено обёрткой .cs-dashboard, чтобы не менять те же классы
   (cs-panel/cs-row/cs-tl-*) на карточках клиента/сделки/проекта. */
.cs-dashboard .cs-title { font-size: 1.05rem; }
.cs-dashboard .cs-date { font-size: .88rem; }
.cs-dashboard .cs-meter-label { font-size: .78rem; }
.cs-dashboard .cs-meter-num { font-size: 1.85rem; }
.cs-dashboard .cs-panel h3 { font-size: .82rem; }
.cs-dashboard .cs-flow-box { height: 128px; }
/* Ряды этапов — в одну строку: плашки при нехватке места сужаются (до 162px
   в обычном виде), а на узких экранах (планшет/телефон) переносятся. */
.cs-dashboard .cs-flow { flex-wrap: nowrap; }
.cs-dashboard .cs-flow-box { flex: 0 1 162px; min-width: 0; padding-left: 8px; padding-right: 8px; }
.cs-dashboard .cs-flow-arrow { flex: none; }
@media (max-width: 1199.98px) {
    .cs-dashboard .cs-flow-name { font-size: .76rem; }
    .cs-dashboard .cs-flow-box { padding-left: 4px; padding-right: 4px; }
    .cs-dashboard .cs-flow { gap: 3px; }
}
@media (max-width: 991.98px) {
    .cs-dashboard .cs-flow { flex-wrap: wrap; gap: 6px; }
    .cs-dashboard .cs-flow-box { flex: none; width: 162px; }
}
.cs-dashboard .cs-flow-name { font-size: .95rem; }
.cs-dashboard .cs-flow-num { font-size: 1.05rem; }
.cs-dashboard .cs-row-title { font-size: .98rem; }
.cs-dashboard .cs-row-sub { font-size: .85rem; }
.cs-dashboard .cs-row-time { font-size: .84rem; }
.cs-dashboard .cs-tl-name { font-size: .95rem; }
.cs-dashboard .cs-tl-sub { font-size: .84rem; }
.cs-dashboard .cs-tl-marker-label { font-size: .74rem; }
.cs-dashboard .cs-empty { font-size: .92rem; }
.cs-dashboard .cs-panel { border-left: 4px solid var(--crm-accent); }
.cs-dashboard .cs-panel--project { border-left-color: var(--crm-green); }

/* ---------- длинные имена файлов в списках (правка 2026-09-21) ----------
   Имя обрезается многоточием, дата и «×» остаются на месте; полное имя видно
   во всплывающей подсказке (title). */
.list-group-item > .cs-file-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: .75rem;
}
.list-group-item > .cs-file-name + span { flex-shrink: 0; }

/* ---------- карточка проекта с данными сделки (2026-09-21) ---------- */
.src-tag {
    font-family: "Oswald", sans-serif; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--crm-green); border: 1px solid var(--crm-green); border-radius: 3px;
    padding: 1px 6px; margin-left: .5rem; vertical-align: middle; white-space: nowrap; font-weight: 500;
}
.src-tag.deal { color: var(--crm-amber); border-color: var(--crm-amber); }
.src-tag.client { color: var(--crm-ink-muted); border-color: var(--crm-ink-muted); }
.handoff { border-left: 4px solid var(--crm-green); }
.chip {
    display: inline-block; font-size: .78rem; border: 1px solid var(--crm-border); border-radius: 3px;
    padding: 0 7px; margin: 0 4px 3px 0; background: var(--crm-surface-2);
}
.pay-bar { height: 8px; background: var(--crm-surface-2); border: 1px solid var(--crm-border); border-radius: 2px; overflow: hidden; min-width: 140px; }
.pay-bar > i { display: block; height: 100%; background: var(--crm-green); }
.doc-group { border-bottom: 1px solid var(--crm-border); padding: .55rem 0; }
.doc-group:first-child { padding-top: 0; }
.doc-group:last-child { border-bottom: 0; padding-bottom: 0; }
.doc-group .lbl {
    font-family: "Oswald", sans-serif; font-size: .74rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--crm-ink-muted);
}
.doc-group > .d-flex > .cs-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- диалог «Выполнение работ» (2026-09-22) ----------
   Макет: CRM/образцы/дизайн-варианты-процентовка-смр-пнр/index.html */
/* Форма оборачивает шапку/тело/подвал диалога (нужно для сохранения всех
   строк одним POST) — без display:contents она перестаёт быть прозрачной
   для flex-раскладки .modal-content, на которой держится прокрутка
   .modal-dialog-scrollable (шапка/тело/подвал должны быть прямыми
   потомками .modal-content), и диалог просто не пролистывался. */
#executionForm { display: contents; }
.pz-zone {
  font-family: "Oswald", sans-serif; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--crm-ink-muted); background: var(--crm-surface-2); border-top: 1px solid var(--crm-border);
  border-bottom: 1px solid var(--crm-border); padding: .45rem .9rem;
}
.pz-zone .pz-zone-meta { float: right; font-family: "JetBrains Mono", monospace; text-transform: none; letter-spacing: 0; font-size: .72rem; }
.pz-table { margin-bottom: 0; }
.pz-table th { font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; color: var(--crm-ink-muted); font-weight: 600; border-bottom-width: 1px; }
.pz-table td { vertical-align: middle; font-size: .86rem; }
.pz-model { color: var(--crm-ink-muted); font-size: .78rem; }
.pz-qty-input { width: 64px; margin: 0 auto; text-align: center; font-family: "JetBrains Mono", monospace; }
.pz-qty-input.pz-complete { border-color: var(--crm-green); background: color-mix(in srgb, var(--crm-green) 8%, var(--crm-surface)); }
.pz-qty-input.pz-partial { border-color: var(--crm-amber); background: color-mix(in srgb, var(--crm-amber) 8%, var(--crm-surface)); }
.pz-nocable { color: var(--crm-ink-muted); font-size: .72rem; }
.pz-meters { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--crm-border); background: var(--crm-surface-2); }
.pz-meter { flex: 1; border-radius: 6px; padding: 10px 14px; border: 1px solid var(--crm-border); border-left: 4px solid var(--tile, var(--crm-border)); background: var(--crm-surface); }
.pz-meter-label { font-family: "Oswald", sans-serif; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--crm-ink-muted); margin-bottom: 6px; }
.pz-meter-row { display: flex; align-items: baseline; gap: 8px; }
.pz-meter-num { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.5rem; color: var(--crm-ink); }
.pz-meter-sub { font-size: .74rem; color: var(--crm-ink-muted); }
.pz-bar { height: 6px; border-radius: 3px; background: var(--crm-border); overflow: hidden; margin-top: 8px; }
.pz-bar > i { display: block; height: 100%; background: var(--tile); width: 0%; }
.pz-note { font-size: .74rem; color: var(--crm-ink-muted); padding: 8px 20px 0; }

/* ============================================================================
   ВАРИАНТ Б (2026-09-24) — боковое меню, светлая рабочая область, телефон.
   Макет: CRM/образцы/дизайн-варианты-рабочий-стол-вариант-б/ и холст
   https://claude.ai/artifact/JbqN87vtahSicbdbenjb3Q
   ========================================================================= */

/* ---------- каркас страницы ----------
   Шапка идёт через всю ширину и прилипает к верху: в ней логотип (на тёмном
   блоке, зрительно продолжающем меню), поиск и действия. Ниже — меню и
   рабочая область. Меню тоже прилипает, чтобы разделы были под рукой на
   длинных страницах. */
.crm-shell { display: flex; flex-direction: column; min-height: 100vh; }
.crm-body { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.crm-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.crm-content { padding: 22px 28px 40px; flex: 1 1 auto; }
.crm-brand {
    flex: 0 0 var(--crm-side-width);
    width: var(--crm-side-width);
    align-self: stretch;
    margin: -9px 12px -9px -28px;
    background: var(--crm-side-bg);
    display: flex; align-items: center; justify-content: center;
    padding: 8px 16px;
}
.crm-brand img { height: 48px; width: auto; display: block; }

/* ---------- боковое меню ---------- */
/* !important и удвоенный селектор — потому что Bootstrap на экранах шире
   992px гасит фон выдвижной панели своим `background-color: transparent
   !important` (.offcanvas-lg), и меню становилось светлым. */
.crm-side.offcanvas-lg,
.crm-side {
    width: var(--crm-side-width);
    flex: 0 0 var(--crm-side-width);
    background-color: var(--crm-side-bg) !important;
    color: var(--crm-side-ink);
    display: flex;
    flex-direction: column;
    padding: 14px 0 16px;
    position: sticky;
    top: var(--crm-topbar-h);
    align-self: flex-start;
    min-height: calc(100vh - var(--crm-topbar-h));
    max-height: calc(100vh - var(--crm-topbar-h));
    overflow-y: auto;
}
.crm-side-brand {
    display: flex; align-items: center; gap: 9px; padding: 0 20px 18px;
    font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; font-size: .9rem; color: #fff; text-decoration: none;
}
.crm-side-brand::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--crm-side-accent); flex: none;
}
.crm-side-nav { padding: 0 12px; display: flex; flex-direction: column; gap: 2px; }
.crm-side-link {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px;
    border-radius: 6px; color: var(--crm-side-ink-muted); text-decoration: none;
    font-size: .88rem; line-height: 1.2;
}
.crm-side-link svg { flex: none; stroke: currentColor; }
.crm-side-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.crm-side-link.active { background: var(--crm-side-bg-active); color: #fff; font-weight: 700; }
.crm-side-link.active svg { stroke: var(--crm-side-accent); }
.crm-side-count {
    margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: .72rem;
    color: #8f8778;
}
.crm-side-foot {
    margin-top: auto; padding: 14px 20px 0; border-top: 1px solid var(--crm-side-bg-active);
    display: flex; align-items: center; gap: 10px;
}
.crm-side-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--crm-side-accent);
    color: var(--crm-side-bg); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .78rem; flex: none;
}
.crm-side-user { font-size: .82rem; color: var(--crm-side-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-side-logout {
    margin-left: auto; background: none; border: 0; padding: 4px 2px;
    color: var(--crm-side-ink-muted); font-size: .76rem; text-decoration: underline;
}
.crm-side-logout:hover { color: #fff; }

/* ---------- верхняя полоса ---------- */
.crm-topbar {
    min-height: var(--crm-topbar-h);
    background: var(--crm-surface);
    border-bottom: 1px solid var(--crm-border);
    display: flex; align-items: stretch; gap: 12px;
    padding: 9px 28px;
    position: sticky; top: 0; z-index: 1030;
}
.crm-topbar > *:not(.crm-brand) { align-self: center; }
.crm-search { flex: 1 1 auto; max-width: 460px; min-width: 0; position: relative; }
.crm-search .form-control {
    border-radius: 999px; padding-left: 38px; background: var(--crm-surface);
}
.crm-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--crm-ink-muted);
}
.crm-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.crm-burger {
    display: none; width: 42px; height: 38px; border: 1px solid var(--crm-border);
    border-radius: 6px; background: var(--crm-surface); padding: 0;
    align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.crm-burger i { display: block; width: 17px; height: 2px; background: var(--crm-ink); }

/* ---------- контраст: серые кнопки и мелкие действия ----------
   btn-outline-secondary Bootstrap (#6c757d) давал на фоне страницы 2,7:1. */
.btn-outline-secondary {
    --bs-btn-color: var(--crm-ink-muted);
    --bs-btn-border-color: var(--crm-border-strong);
    --bs-btn-bg: var(--crm-surface-2);
    --bs-btn-hover-bg: var(--crm-ink-muted);
    --bs-btn-hover-border-color: var(--crm-ink-muted);
    --bs-btn-hover-color: var(--crm-surface);
}
.btn-outline-primary { --bs-btn-color: var(--crm-accent-text); --bs-btn-border-color: var(--crm-accent-text); }
.btn-outline-danger { --bs-btn-color: #96262f; --bs-btn-border-color: #96262f; }
.btn-link { --bs-btn-color: var(--crm-accent-text); }
.text-muted { color: var(--crm-ink-muted) !important; }
a { color: var(--crm-accent-text); }

/* ---------- поля ввода: белые, с видимой рамкой ---------- */
.form-control, .form-select {
    background-color: var(--crm-surface);
    border-color: var(--crm-border-strong);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--crm-surface-2); }
.form-control::placeholder { color: #8b8474; }

/* ---------- карточки-панели ---------- */
.crm-card {
    background: var(--crm-surface); border: 1px solid var(--crm-border);
    border-radius: 8px; padding: 16px 18px;
}
.crm-card-title {
    font-family: "Oswald", sans-serif; font-size: .62rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--crm-ink-muted); font-weight: 600;
}

/* ---------- полосы этапов на рабочем столе ---------- */
.st-strip { display: flex; gap: 8px; align-items: stretch; }
.st-tile {
    flex: 1 1 0; min-width: 0; text-decoration: none;
    border: 1px solid var(--crm-border); border-radius: 6px; padding: 11px 12px;
    display: flex; flex-direction: column; gap: 6px; background: var(--crm-surface-2);
}
.st-tile:hover { border-color: var(--crm-border-strong); background: #f2efe6; }
.st-tile-name { font-size: .74rem; line-height: 1.25; color: #3d3a30; }
.st-tile-num { font-family: "JetBrains Mono", monospace; font-size: 1.1rem; color: var(--crm-ink); }
.st-tile-num.zero { color: #8f8778; }
.st-tile.current { border-color: var(--crm-accent); background: #f7ece3; }
.st-tile.current .st-tile-name { color: var(--crm-accent-text); font-weight: 700; }
.st-tile.current .st-tile-num { color: var(--crm-accent-text); font-weight: 700; }
.st-tile.done { border-color: var(--crm-green); background: #eaf2ec; }
.st-tile.done .st-tile-name { color: var(--crm-green-text); font-weight: 700; }
.st-tile.done .st-tile-num { color: var(--crm-green-text); font-weight: 700; }

/* ---------- KPI-плашки ---------- */
.kpi-row { display: flex; gap: 14px; }
.kpi { flex: 1 1 0; min-width: 0; }
.kpi-num { font-family: "JetBrains Mono", monospace; font-size: 1.7rem; font-weight: 700; }
.kpi-num.zero { color: #8f8778; }
.kpi-sub { font-size: .78rem; color: var(--crm-ink-muted); }

/* ---------- строки списков внутри карточек ---------- */
.crm-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #ede9df; }
.crm-line:last-child { border-bottom: 0; padding-bottom: 0; }
.crm-line-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #8f8778; }
.crm-line-dot.accent { background: var(--crm-accent); }
.crm-line-dot.green { background: var(--crm-green); }
.crm-line-dot.red { background: #96262f; }
.crm-line-title { flex: 1 1 auto; min-width: 0; color: var(--crm-accent-text); text-decoration: none; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-line-title:hover { text-decoration: underline; }
.crm-line-side { font-size: .8rem; color: #3d3a30; flex: none; }
.crm-empty { font-size: .84rem; color: var(--crm-ink-muted); }

/* ---------- полоса готовности ---------- */
.crm-bar { flex: 1 1 auto; height: 7px; border-radius: 4px; background: #ede9df; overflow: hidden; min-width: 60px; }
.crm-bar > i { display: block; height: 100%; background: var(--crm-green); }
.crm-bar > i.mid { background: var(--crm-amber); }
.crm-bar > i.low { background: var(--crm-accent); }

/* ---------- таблицы списков ---------- */
.crm-table-card { background: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: 8px; overflow: hidden; }
.crm-table-card .table { margin-bottom: 0; --bs-table-bg: transparent; }
.crm-table-card .table > thead th {
    background: var(--crm-surface-2); border-bottom: 1px solid var(--crm-border);
    font-family: "Oswald", sans-serif; font-size: .64rem; letter-spacing: .09em;
    text-transform: uppercase; color: #3d3a30; font-weight: 600; white-space: nowrap;
}
.crm-table-card .table > tbody > tr > td { border-bottom-color: #ede9df; vertical-align: middle; }
.crm-table-card .table > tbody > tr:nth-child(even) > td { background: #faf8f3; }
.crm-table-card .table > tbody > tr:hover > td { background: #f2efe6; }
.crm-table-card a.crm-cell-link { color: var(--crm-accent-text); text-decoration: none; font-weight: 700; }
.crm-table-card a.crm-cell-link:hover { text-decoration: underline; }
.crm-none { color: #8f8778; }

/* ---------- метки этапов ---------- */
.stage-chip {
    display: inline-block; border-radius: 4px; padding: 2px 8px; font-size: .74rem;
    border: 1px solid var(--crm-border-strong); background: var(--crm-surface-2); color: #3d3a30;
    white-space: nowrap;
}
.stage-chip.accent { border-color: var(--crm-accent); background: #f7ece3; color: var(--crm-accent-text); }
.stage-chip.green { border-color: var(--crm-green); background: #eaf2ec; color: var(--crm-green-text); }

/* ---------- телефон и планшет ---------- */
@media (max-width: 991.98px) {
    html { font-size: 17px; }
    /* Bootstrap-сетка внутри рабочей области даёт свои отрицательные поля —
       на узком экране это добавляло пару лишних пикселей ширины и страница
       ползала вбок. */
    .crm-main { overflow-x: hidden; }
    .crm-burger { display: flex; }
    .crm-brand {
        flex: 0 0 auto; width: auto; margin: -8px 4px -8px -14px;
        padding: 6px 12px;
    }
    .crm-brand img { height: 30px; }
    .crm-side.offcanvas-lg, .crm-side {
        position: fixed; top: 0; min-height: 100%; max-height: 100%;
        align-self: auto; padding-top: 20px;
    }
    .crm-topbar { padding: 8px 14px; gap: 8px; }
    .crm-search { max-width: none; }
    .crm-content { padding: 16px 14px 32px; }
    .crm-side.offcanvas-lg { width: 270px; }
    .kpi-row { flex-wrap: wrap; }
    .kpi { flex: 1 1 200px; }
    .st-strip { flex-wrap: wrap; }
    .st-tile { flex: 1 1 140px; }
}
@media (max-width: 575.98px) {
    .crm-topbar-actions .btn { padding: .3rem .6rem; font-size: .8rem; }
    .crm-content { padding: 14px 12px 28px; }
    .crm-card { padding: 13px 14px; }
    .st-tile { flex: 1 1 calc(50% - 4px); }
    .kpi { flex: 1 1 100%; }
    h1, .h1 { font-size: 1.45rem; }
    h2, .h2 { font-size: 1.2rem; }
    h3, .h3 { font-size: 1.1rem; }
    .table { font-size: .86rem; }
}

/* ---------- карточки сделки/проекта/клиента: спокойные заголовки разделов ----------
   Раньше все разделы были крупным PT Serif того же размера, что и название
   объекта, — иерархия читалась плохо (аудит 2026-09-23). Теперь разделы —
   мелкие прописные, как «ВОРОНКА СДЕЛОК» на рабочем столе, а название
   объекта остаётся единственным крупным заголовком страницы. */
.crm-content h2.h5:not(.modal-title) {
    font-family: "Oswald", sans-serif;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--crm-ink-muted);
    font-weight: 600;
    margin-bottom: .55rem;
}

/* ---------- выбор файла: системный контрол под общий стиль ---------- */
.crm-content input[type="file"].form-control { padding: .3rem .45rem; }
.crm-content input[type="file"]::file-selector-button {
    background: var(--crm-surface-2);
    border: 1px solid var(--crm-border-strong);
    border-radius: 5px;
    padding: .2rem .75rem;
    margin: -.05rem .7rem -.05rem 0;
    color: var(--crm-ink);
    font-family: inherit;
    font-size: .85rem;
}
.crm-content input[type="file"]::file-selector-button:hover { background: #f2efe6; }

/* ---------- пустые состояния: текст, а не «поле ввода» ---------- */
.crm-content .list-group-item.text-muted {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

/* ---------- зелёные действия: фирменный зелёный вместо бутстраповского ---------- */
.btn-success {
    --bs-btn-bg: var(--crm-green);
    --bs-btn-border-color: var(--crm-green);
    --bs-btn-hover-bg: var(--crm-green-text);
    --bs-btn-hover-border-color: var(--crm-green-text);
    --bs-btn-active-bg: var(--crm-green-text);
    --bs-btn-active-border-color: var(--crm-green-text);
}
.btn-outline-success { --bs-btn-color: var(--crm-green-text); --bs-btn-border-color: var(--crm-green); }
.badge.bg-secondary, .badge.text-bg-secondary { background: var(--crm-ink-muted) !important; }

/* ---------- страница входа ---------- */
.login-wrap {
    min-height: calc(100vh - 3rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    padding: 28px 30px 30px;
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .45);
}
.login-brand {
    display: flex; align-items: center; gap: 9px; margin-bottom: 18px;
    font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; font-size: .9rem; color: var(--crm-ink);
}
.login-brand::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--crm-accent); flex: none;
}

/* ---------- формы ---------- */
/* Формы не растягиваются на всю ширину экрана — читать строку в 1300 px тяжело. */
.crm-content > form,
.crm-content form.cs-stack { max-width: 1060px; }
/* Чекбоксы-списки (этапы воронки, «что нужно») рисуются Django без классов
   Bootstrap — приводим их к тому же размеру и цвету, что переключатели рядом. */
.crm-content .form-check input[type="checkbox"] { accent-color: var(--crm-accent); }
.crm-content .form-check input[type="checkbox"]:not(.form-check-input) {
    width: 1.05em; height: 1.05em; vertical-align: -.15em; margin-right: .45em;
}
.crm-content .form-check-input:checked { background-color: var(--crm-accent); border-color: var(--crm-accent); }
.crm-content .form-label { font-size: .88rem; color: var(--crm-ink-muted); margin-bottom: .25rem; }
.crm-content .form-text { color: var(--crm-ink-muted); }

/* ---------- выключенные кнопки ----------
   Bootstrap берёт для :disabled отдельные переменные, поэтому «Сформировать
   КП» в конструкторе (пока не добавлена ни одна позиция) оставалась синей,
   бутстраповской, хотя обычная btn-primary давно терракотовая. */
.btn-primary {
    --bs-btn-disabled-bg: #d6a894;
    --bs-btn-disabled-border-color: #d6a894;
    --bs-btn-disabled-color: #fff6f0;
}
.btn-outline-primary {
    --bs-btn-disabled-color: #b08a78;
    --bs-btn-disabled-border-color: #ded8cb;
}
.btn-success { --bs-btn-disabled-bg: #9cc0aa; --bs-btn-disabled-border-color: #9cc0aa; }

/* ---------- окно «Выполнение работ» на телефоне (2026-09-24) ----------
   Три плашки прогресса в ряд на узком экране ужимались так, что подпись
   «0 из 89 ед.» ломалась на четыре строки. Ставим их друг под другом. */
@media (max-width: 575.98px) {
    .pz-meters { flex-direction: column; gap: 8px; padding: 12px 14px; }
    .pz-meter { padding: 9px 12px; }
    .pz-meter-row { align-items: baseline; }
    .pz-meter-num { font-size: 1.25rem; }
    .pz-zone { padding: .4rem .75rem; }
    .pz-table td, .pz-table th { padding-left: .35rem; padding-right: .35rem; }
    .pz-qty-input { width: 54px; }
    .pz-note { padding: 8px 14px 0; }
}

/* ---------- отметки чек-листов (как в макете варианта А, 2026-09-24) ----------
   Раньше это были зелёные и серые бейджи Bootstrap с «✓» и «—» — тяжёлые
   плашки, которые спорили с текстом строки. Теперь выполненный шаг —
   зелёная галочка без фона, невыполненный — пустой квадрат. */
.chk { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.chk-done { stroke: var(--crm-green); }
.chk-empty {
    width: 18px; height: 18px; border: 2px solid var(--crm-border-strong);
    border-radius: 4px; background: transparent; padding: 0;
}
button.chk-empty { cursor: pointer; }
button.chk-empty:hover { border-color: var(--crm-accent); background: #f7ece3; }
.chk-label { font-size: .78rem; color: var(--crm-ink-muted); }
.chk-label.done { color: var(--crm-green-text); }

/* ---------- лента истории (2026-09-24) ----------
   Раньше каждое событие было отдельной карточкой с заголовком «Системное
   событие» — рамки и повторяющиеся заголовки съедали внимание. Теперь это
   строки с цветной точкой по типу события и временем справа. */
.hist-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid #ede9df; }
.hist-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hist-dot { width: 8px; height: 8px; border-radius: 50%; background: #8f8778; flex: none; margin-top: .45em; }
.hist-dot.accent { background: var(--crm-accent); }
.hist-dot.green { background: var(--crm-green); }
.hist-text { flex: 1 1 auto; min-width: 0; font-size: .88rem; line-height: 1.35; }
.hist-author { display: block; font-size: .76rem; color: var(--crm-ink-muted); margin-top: 2px; }
.hist-time { flex: none; font-size: .76rem; color: var(--crm-ink-muted); }

/* ---------- чек-лист воронки с прогрессом (макет варианта А) ---------- */
.step-bar { display: flex; gap: 5px; }
.step-bar > i { flex: 1 1 0; height: 6px; border-radius: 3px; background: #ded8cb; }
.step-bar > i.done { background: var(--crm-green); }
.step-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid #ede9df;
}
.step-row:last-child { border-bottom: 0; }
.step-name { flex: 1 1 auto; min-width: 0; }
.step-row.current {
    background: #f7ece3; margin: 0 -15px; padding-left: 15px; padding-right: 15px;
}
.step-row.current .step-name { font-weight: 700; }
.step-mark {
    flex: none; font-family: "Oswald", sans-serif; font-size: .62rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--crm-accent-text);
}

/* ---------- запуск с домашнего экрана телефона (2026-09-24) ----------
   В режиме приложения (ярлык CRM на iPhone) адресной строки нет, поэтому
   шапка оказывается у самого верха экрана — добавляем безопасные отступы
   под «чёлку» и нижнюю полосу жестов. В обычном браузере env() = 0. */
.crm-topbar { padding-top: calc(9px + env(safe-area-inset-top, 0px)); }
.crm-side { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.crm-content { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
@media (display-mode: standalone) {
    /* Ярлык открывает систему без вкладок браузера — лишняя рамка вокруг
       рабочей области ни к чему. */
    body { overscroll-behavior-y: none; }
}

/* ---------- кнопка «База оборудования» в верхней полосе (2026-09-24) ---------- */
.crm-base-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--crm-ink); background: var(--crm-surface); color: var(--crm-ink);
    font-size: .86rem; font-weight: 600; white-space: nowrap; line-height: 1;
}
.crm-base-btn:hover, .crm-base-btn:focus-visible { background: var(--crm-ink); color: var(--crm-surface); }
@media (max-width: 575.98px) {
    .crm-base-btn { height: 36px; padding: 0 12px; font-size: .8rem; }
    .crm-base-btn span { display: none; }
}