/* Визуальный язык панели CRM Pro.
 *
 * Палитра и шрифт — с лендинга crm-pro.pro (решение владельца 31.10.2026):
 * тёмно-синее меню, белые карточки на голубоватом фоне и цвета групп лендинга
 * для этапов и акцентов — синий, фиолетовый, бирюзовый, янтарный, розовый.
 *
 * Из сети не грузится ничего: CSP панели — default-src 'self'. Golos Text
 * лежит рядом (static/fonts, вариативный 400–800); логотип — inline SVG.
 */

@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/golos-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/golos-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/golos-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Брендовый циан — действия и «где я». */
  --brand-50: #EAF1FF;
  --brand-600: #2563EB;
  --brand-700: #1D4ED8;
  --brand-800: #1E40AF;
  /* Тёмно-синий лендинга — меню и тёмные плашки. */
  --navy: #0A1533;
  --navy-600: #26345E;
  /* Цвета групп лендинга: светлый и тёмный край градиента. */
  --c-blue-1: #3B82F6; --c-blue-2: #1D4ED8;
  --c-violet-1: #8B5CF6; --c-violet-2: #6D28D9;
  --c-teal-1: #14B8A6; --c-teal-2: #0F766E;
  --c-amber-1: #FCD34D; --c-amber-2: #F59E0B;
  --c-rose-1: #FB7185; --c-rose-2: #E11D48;
  /* Бирюзовый: «оплачено до» в карточке клиники (крупная дата, не текст мелким). */
  --teal-600: #0F766E;
  /* Поверхности: фон страницы, заливки, линии, текст. */
  --surface-50: #F3F6FC;
  --surface-100: #F1F5F9;
  --surface-200: #E2E8F0;
  --surface-400: #94A3B8;
  --surface-600: #475569;
  --surface-900: #0F172A;
  /* Состояния. Тон 700 — для текста на подложке 50 (контраст AA). */
  --danger-50: #FEF2F2;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;
  --warning-50: #FFFBEB;
  --warning-600: #D97706;
  --warning-700: #B45309;
  --success-50: #ECFDF5;
  --success-600: #059669;
  --success-700: #047857;
  /* Радиусы: метки — кнопки и поля — блоки — карточки. */
  --r-sm: .375rem;
  --r: .625rem;
  --r-lg: .875rem;
  --r-xl: 1.125rem;
  --shadow-card: 0 1px 2px rgb(15 23 42 / .04), 0 1px 3px rgb(15 23 42 / .06);
  --ring: 0 0 0 3px rgb(37 99 235 / .25);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: 400 15px/1.55 "Golos Text", system-ui, -apple-system, sans-serif;
  color: var(--surface-900);
  background: var(--surface-50);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.3; }
h1 { font-size: 22px; letter-spacing: -.01em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Фокус клавиатуры виден всегда и везде: обвод у ссылок и кнопок, кольцо у
 * полей (обвод на поле спорил бы с его собственной рамкой). */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

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

/* minmax(0,1fr), а не 1fr: у элемента сетки минимальная ширина по умолчанию
 * `auto`, и широкая таблица внутри растягивает КОЛОНКУ, а с ней и всю
 * страницу — вместо того чтобы прокручиваться внутри своей обёртки. */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 12px 14px;
  background: var(--navy);
  color: #fff;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 18px;
  color: #fff;
}
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand svg { flex: none; }
/* Дуги звука знака CRMpro читаются только с ~40 px; на 24-34 px (боковая
 * панель, вход) тонкий штрих вырождается в шум — ниже порога знак остаётся
 * зубом без них (см. panel/templates/base.html, макрос brand_mark). */
.brand-mark-sm .brand-mark-arc { display: none; }
.sidebar-brand b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
/* Подпись — surface-600, а НЕ surface-400: на белом у 400 контраст 2.56 против
 * требуемых 4.5 (замерено). Второстепенной её делают размер и насыщенность,
 * а не бледность. */
.sidebar-brand span { display: block; font-size: 12px; font-weight: 500; color: #B9C6E6; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  position: relative;
  display: block;
  padding: 9px 12px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  color: #C7D2EE;
  transition: background-color 120ms ease, color 120ms ease;
}
.sidebar-nav a:hover { background: rgb(255 255 255 / .08); color: #fff; text-decoration: none; }
.sidebar-nav a.active { background: var(--brand-700); color: #fff; }
.sidebar-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-count {
  min-width: 22px; padding: 1px 7px; border-radius: 10px;
  background: var(--c-amber-1); color: #1F1300; font-size: 12px; font-weight: 700; text-align: center;
}
/* Полоска слева у открытого раздела — та же примета, что в CRMpro: «где я»
 * видно боковым зрением, не вчитываясь в подсветку. */
.sidebar-nav a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 18px;
  margin-top: -9px;
  border-radius: 0 3px 3px 0;
  background: var(--c-amber-1);
}

/* Отрицательные поля — чтобы разделитель шёл во всю ширину панели, как её
 * собственная линия, а не висел укороченным отрезком внутри отступов. */
.sidebar-user {
  margin: auto -12px 0;
  padding: 12px 12px 0;
  border-top: 1px solid rgb(255 255 255 / .12);
}
.sidebar-user p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #C7D2EE;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Монограмма учётки: панель общая на нескольких человек, и «под кем я вошёл»
 * должно читаться без вчитывания. ОДНА буква, а не две: «OW» от «owner» читается
 * как случайная пара знаков, буква — как монограмма. Полный логин стоит рядом. */
.sidebar-user i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  font: 700 13px/1 "Golos Text", system-ui, sans-serif;
  font-style: normal;
}
.sidebar-user form { margin: 0; }
.sidebar-user .btn-secondary { width: 100%; }

.main { max-width: 1100px; min-width: 0; padding: 28px 32px; }

.page-title { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 4px; }
.page-sub { font-size: 14px; color: var(--surface-600); margin: 0 0 22px; }

/* Заголовок страницы и главное действие — в одной строке: действие ищут
 * глазами там же, где читают название раздела, а не в конце длинной таблицы. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 20px;
}
.page-head .page-title, .page-head .page-sub { margin: 0; }
.page-head .page-sub { margin-top: 4px; }

/* Раздел внутри страницы. Карточки вокруг таблиц дизайн-система запрещает,
 * поэтому разделы отбиваются только воздухом — его и задаём здесь в одном
 * месте, чтобы отступы не расползались по шаблонам. */
.section { margin-top: 32px; }
.section > h2 { margin: 0 0 12px; }
/* Подзаголовок второго блока раздела отбивается сверху: иначе он упирается
 * в кнопку предыдущей формы и читается как её подпись. Селектор тот же
 * вес плюс класс — иначе правило выше («margin: 0 0 10px») его перебьёт. */
.section h3 { margin: 0 0 10px; }
.section h3.h3-gap { margin-top: 30px; }

/* Вторичный текст в строке таблицы или под формой. */
.muted { color: var(--surface-600); }

/* --- Вход ------------------------------------------------------------------ */

.auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 20px; }
.auth .card { width: 100%; max-width: 380px; padding: 28px; }
.auth-mark { display: block; color: var(--brand-600); margin: 0 0 14px; }
.auth .btn { width: 100%; margin-top: 4px; }

/* --- Компоненты ------------------------------------------------------------ */

.card { background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: 24px; }

/* Табличные цифры на всю таблицу: даты и числа в столбце должны стоять
 * столбиком, иначе одинаковые по длине значения выглядят разными. */
/* Ширина по содержимому, а не 100%: четыре коротких столбца, растянутые на
 * тысячу пикселей, читаются как строка с дырой посередине — глаз теряет
 * строку между «Дентал Плюс» и её состоянием. Таблица кончается там, где
 * кончаются данные. */
/* `separate` + нулевой зазор вместо `collapse`: выглядит так же (границы
 * только снизу ячеек, дублироваться нечему), но при `collapse` прилипающий
 * столбец действия (.cell-action) в части браузеров позиционируется неверно —
 * рамки там рисует таблица, а не ячейка. В Chromium работает и так, и так
 * (проверено), но закладываться на это незачем. */
.table { width: auto; max-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.table th {
  padding: 0 12px 8px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--surface-600);
  border-bottom: 1px solid var(--surface-200);
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--surface-100); vertical-align: top; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table tr:last-child td { border-bottom: 0; }

/* Деньги — моноширинными цифрами и вправо: столбец сумм читается сравнением
 * длины, а прыгающая ширина цифр это сравнение ломает. */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Значение, которое нельзя рвать переносом: дата со временем в журнале. */
.nowrap { white-space: nowrap; }
.money, .table th.money, .table td.money { text-align: right; }

/* Узкий экран не должен заставлять страницу ездить вбок целиком: прокручивается
 * ОДНА таблица, шапка и меню остаются на месте. */
.table-wrap { overflow-x: auto; }
/* Таблица и форма, идущие встык, обязаны быть отбиты: иначе поля читаются
 * как ещё одна строка таблицы, а кнопка — как её заголовок. */
.table-wrap + form, form + .table-wrap { margin-top: 24px; }

/* Действие в строке не должно уезжать за край прокрутки. На 400px таблица
 * аддонов шире экрана, и кнопка «Удалить» в последнем столбце обрезалась
 * посередине слова. Столбец прилипает к правому краю обёртки и стоит на месте,
 * пока данные едут под ним; подложка — цвет фона страницы, иначе сквозь него
 * просвечивал бы уезжающий текст.
 * Прилипание в таблице требует `border-collapse: separate` — см. .table. */
.table td.cell-action, .table th.cell-action {
  position: sticky;
  right: 0;
  padding-left: 16px;
  background: var(--surface-50);
}

/* Форма в две колонки: у половины полей (ИНН, БИК, кресел, срок) значение
 * короче подписи, и во всю ширину они выглядят как опечатка вёрстки. */
/* Ширину формы держит сетка, а не каждое поле по отдельности: поле во всю
 * ширину строки рядом с двумя половинными давало рваный правый край.
 * 760px — это ~370px на колонку: хватает и ИНН, и юридическому адресу. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; max-width: 760px; }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 940px; }
.field-wide { grid-column: 1 / -1; }

/* Флажки: подпись читается как текст (15px, обычная насыщенность), а не как
 * подпись поля — иначе десяток прав в плане превращается в стену заголовков. */
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; }
/* Внутри поля отступ уже даёт само поле — иначе под флажками зияет дыра. */
.field .checks { margin-bottom: 0; }
/* Селектор из двух классов — не для красоты: `.field label` ниже по файлу
 * задаёт подписям 13px/600 surface-600, и одиночный `.check` ему проигрывал —
 * подписи флажков выходили полужирными и блёклыми, как заголовки полей. */
.checks .check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 400;
  color: var(--surface-900);
  cursor: pointer;
}
.checks .check input { margin: 0; }
.checks .check input:disabled { cursor: not-allowed; }

.btn, .btn-secondary, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font: 600 14px/1 "Figtree", "Inter", system-ui, -apple-system, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease;
}
/* Основное действие — brand-700, а НЕ brand-600, как у `.btn-primary` в боевом
 * CRMpro: белое на brand-600 даёт 3.68 (замерено) — это AA для крупного текста,
 * но кнопки у нас 14px/600. На brand-700 контраст 5.36. Расхождение с
 * фронтендом клиники здесь осознанное: доступность важнее буквального совпадения
 * оттенка. brand-600 остаётся там, где текста на нём нет, — полоска активного
 * пункта, кольцо фокуса, рамка поля в фокусе. */
.btn { background: var(--brand-700); color: #fff; }
.btn:hover { background: var(--brand-800); text-decoration: none; }
.btn-secondary { background: #fff; border-color: var(--surface-200); color: var(--surface-900); }
.btn-secondary:hover { background: var(--surface-50); border-color: var(--surface-400); text-decoration: none; }
/* Разрушающее действие — тихое по умолчанию: цвет и рамка danger-600 на белом
 * (контраст 4.83), заливка только под курсором и в фокусе (белое на danger-600 —
 * те же 4.83). Залитая красная кнопка в строке таблицы кричала громче главного
 * действия страницы: на тарифах два «Удалить» перебивали «Сохранить аддон», на
 * счёте «Отменить счёт» спорил с «Оплачен». Заливкой на странице остаётся одна
 * кнопка — главная. */
.btn-danger { background: #fff; border-color: var(--danger-600); color: var(--danger-600); }
.btn-danger:hover, .btn-danger:focus-visible {
  background: var(--danger-600);
  border-color: var(--danger-600);
  color: #fff;
  text-decoration: none;
}
.btn:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: .55; cursor: not-allowed; }
/* Действие внутри строки таблицы: полная высота 38px раздувает строку вдвое и
 * кричит громче самих данных. Размер — единственное отличие, цвет и форма те же. */
.btn-sm { height: 30px; padding: 0 11px; font-size: 13px; }

.field { display: block; margin: 0 0 14px; }
.field label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--surface-600); }

/* Флажки из общего правила исключены: ширина 100% растянула бы квадратик
 * во всю строку. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--surface-200);
  border-radius: var(--r);
  background: #fff;
  color: var(--surface-900);
  font: 400 15px/1.5 "Figtree", "Inter", system-ui, -apple-system, sans-serif;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: var(--ring);
}
/* Лестница скидок и ступени цен — короткие строки вида «6 20», а не проза:
 * поле шириной в тысячу пикселей под них выглядит ошибкой вёрстки. */
textarea { max-width: 560px; }

input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  box-shadow: none;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.badge-ok { background: var(--success-50); color: var(--success-700); }
.badge-warn { background: var(--warning-50); color: var(--warning-700); }
.badge-danger { background: var(--danger-50); color: var(--danger-700); }
.badge-muted { background: var(--surface-100); color: var(--surface-600); }

.alert-error, .alert-warn, .alert-info {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  font-size: 14px;
}
.alert-error { background: var(--danger-50); color: var(--danger-700); }
.alert-warn { background: var(--warning-50); color: var(--warning-700); }
.alert-info { background: var(--brand-50); color: var(--brand-700); }

.empty { padding: 24px 0; color: var(--surface-600); font-size: 14px; }

.actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 20px 0 0; }
/* Отметка оплаты и отмена счёта — две РАЗНЫЕ формы, которым положено стоять в
 * одной строке: строку держит обёртка `.actions`, а форма внутри неё выстраивает
 * своё поле и кнопку по нижнему краю. */
.actions form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0; }
.actions .field { margin: 0; min-width: 220px; max-width: 300px; }

/* --- Паспорт контура (карточка клиники) ------------------------------------ */

/* Единственное громкое место во всей панели. Слева — кто это (название и слаг
 * одного кегля: слаг не подпись к названию, а вторая половина имени — он уходит
 * в домен и в имена контейнеров), справа — до какого числа оплачено. Про контур
 * спрашивают ровно это, и ответ виден не читая. */
.passport {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px 32px;
}
.passport-id { min-width: 0; }
.passport-id h1 { margin: 0; }
.passport-slug {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--surface-600);
  overflow-wrap: anywhere;
}
/* Приметы контура — через воздух, а не через точки-разделители. */
.passport-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--surface-600);
}
.passport-paid { flex: none; text-align: right; }
.passport-paid p { margin: 0; }
.paid-label { font-size: 13px; font-weight: 600; color: var(--surface-600); }
/* Дата — главная цифра страницы: 28px и табличные цифры, чтобы соседние
 * карточки читались сравнением, а не вчитыванием. */
.paid-date {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
/* Замеры на белом: teal-600 — 3.74, warning-700 — 5.02, danger-700 — 6.47.
 * У бирюзового меньше 4.5, и это осознанно: дата набрана 28px/700, то есть
 * это «крупный текст» по WCAG 1.4.3, где порог AA равен 3.0. Затемнять её
 * ради формального 4.5 значило бы уйти от прописанного дизайн-системой
 * тона «оплачено» — и заодно сделать спокойное состояние таким же громким,
 * как просрочку. Мелким текстом этот тон нигде не используется. */
.paid-ok { color: var(--teal-600); }
.paid-warn { color: var(--warning-700); }
.paid-danger { color: var(--danger-700); }
.passport-paid .badge { margin-top: 6px; }

/* --- Отбор счетов по состоянию --------------------------------------------- */

/* Те же приметы, что у пунктов меню: выбранное — подложка brand-50. Точки между
 * ссылками не нужны, отбивки хватает. */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.filters a {
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--surface-600);
  transition: background-color 120ms ease, color 120ms ease;
}
.filters a:hover { background: var(--surface-100); color: var(--surface-900); text-decoration: none; }
.filters a.active { background: var(--brand-50); color: var(--brand-700); }

/* --- Печатная форма счёта --------------------------------------------------- */

/* Единственная таблица панели с рамками: это бланк, который уходит на бумагу и
 * в бухгалтерию клиники, и границы ячеек там — часть документа, а не украшение. */
.invoice-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 20px 0 0;
  font-size: 14px;
}
.invoice-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
.invoice-table th, .invoice-table td {
  padding: 8px 10px;
  border: 1px solid var(--surface-200);
  text-align: left;
  vertical-align: top;
}
.invoice-table th { font-size: 13px; font-weight: 600; color: var(--surface-600); }
.invoice-total { margin: 16px 0 0; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Узкий экран ----------------------------------------------------------- */

/* Боковая панель становится верхней строкой: на 400px колонка в 240px съела
 * бы больше половины ширины. */
@media (max-width: 800px) {
  /* Строки задаются явно: без этого сетка с min-height:100vh растягивает ОБЕ
   * строки поровну, боковая панель получает лишнюю высоту, и перенесённые
   * пункты меню разъезжаются по ней на треть экрана. */
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    border-right: 0;
  }
  .sidebar-brand { padding: 0; }
  .sidebar-nav { order: 3; flex-direction: row; flex-wrap: wrap; width: 100%; gap: 4px; }
  .sidebar-nav a { padding: 7px 10px; font-size: 13px; }
  .sidebar-nav a.active::before { display: none; }
  .sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 0 auto;
    padding: 0;
    border-top: 0;
  }
  .sidebar-user p { margin: 0; padding: 0; }
  .sidebar-user .btn-secondary { width: auto; height: 34px; padding: 0 12px; }
  .main { padding: 16px; }
  /* Длинная подпись кнопки («Сменить тариф (действует сразу, без перерасчёта)»)
   * на 400px шире экрана, а `white-space: nowrap` не даёт ей сжаться — и
   * страница уезжает вбок целиком. На узком экране подпись переносится, высота
   * кнопки становится по содержимому, но не ниже прежних 38px. */
  .btn, .btn-secondary, .btn-danger {
    height: auto;
    min-height: 38px;
    padding: 8px 16px;
    white-space: normal;
  }
  /* Паспорт в колонку: блок «Оплачено до» встаёт под именем и выравнивается по
   * тому же левому краю — прижатая вправо дата на 400px висела бы в пустоте. */
  .passport-paid { text-align: left; }
  .form-grid, .form-grid-3, .invoice-parties { grid-template-columns: minmax(0, 1fr); }
  .invoice-parties { gap: 16px; }
}

/* Совсем узкий экран: логин учётки уступает место кнопке выхода, монограмма
 * остаётся — по ней видно, под кем вошли. */
@media (max-width: 460px) {
  .sidebar-user p span { display: none; }
}

/* --- Заявки, клиники, роадмап (31.10.2026) --------------------------------- */

.sidebar-user .btn-secondary { background: transparent; color: #fff; border-color: rgb(255 255 255 / .28); }
.sidebar-user .btn-secondary:hover { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .5); }
.sidebar-user i { background: var(--brand-700); color: #fff; }

.page-title { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.main { max-width: 1240px; }

/* Цвет по номеру: этап роадмапа, карточка заявки, плашка направления. */
.tone-1 { --t1: var(--c-blue-1); --t2: var(--c-blue-2); --tl: #EAF1FF; --tt: #1D4ED8; }
.tone-2 { --t1: var(--c-violet-1); --t2: var(--c-violet-2); --tl: #F1EBFF; --tt: #6D28D9; }
.tone-3 { --t1: var(--c-teal-1); --t2: var(--c-teal-2); --tl: #E3F7F4; --tt: #0F766E; }
.tone-4 { --t1: var(--c-amber-1); --t2: var(--c-amber-2); --tl: #FFF4DC; --tt: #92400E; }
.tone-5 { --t1: var(--c-rose-1); --t2: var(--c-rose-2); --tl: #FFE9EE; --tt: #BE123C; }
.tone-6 { --t1: var(--c-blue-1); --t2: var(--c-blue-2); --tl: #EAF1FF; --tt: #1D4ED8; }

.filters a .count { margin-left: 6px; font-weight: 700; }

.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.lead-card {
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border-radius: var(--r-xl); padding: 18px 20px;
  box-shadow: var(--shadow-card); border-top: 6px solid var(--t1, var(--c-blue-1));
}
.lead-card h2 { margin: 0; font-size: 19px; font-weight: 700; }
.lead-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lead-meta { margin: 4px 0 0; font-size: 14px; color: var(--surface-600); }
.lead-when { flex: none; font-size: 12px; color: var(--surface-600); }
.lead-contact { font-size: 14px; border-top: 1px solid var(--surface-100); padding-top: 10px; }
.lead-contact p { margin: 0 0 4px; }
.lead-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.lead-actions form { margin: 0; }
.lead-actions form:first-child { flex: 1 1 140px; }
.lead-actions form:first-child .btn { width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 3px 10px; border-radius: 8px; background: var(--tl, var(--brand-50)); color: var(--tt, var(--brand-700)); font-size: 13px; font-weight: 600; }

.btn-accent { background: linear-gradient(150deg, var(--c-blue-1), var(--c-blue-2)); color: #fff; border: 0; }
.btn-accent:hover { filter: brightness(1.05); text-decoration: none; }

/* Полоска этапов: шесть отрезков, пройденные и текущий — цветом своего этапа. */
.stagebar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.stagebar span { height: 7px; border-radius: 4px; background: var(--surface-200); }
.stagebar span.on { background: var(--t1); }

.client-list { display: grid; gap: 12px; }
.client-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: center;
  background: #fff; border-radius: var(--r-xl); padding: 16px 20px; box-shadow: var(--shadow-card); color: inherit;
}
.client-row:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--brand-600); }
.client-row h2 { margin: 0; font-size: 18px; }
.client-row p { margin: 2px 0 0; font-size: 13px; color: var(--surface-600); }
.client-stage p { margin: 6px 0 0; font-weight: 600; color: var(--surface-900); }
.client-paid { text-align: right; }
.client-paid b { display: block; font-size: 17px; }

.hero {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;
  background: linear-gradient(150deg, var(--c-blue-1), var(--c-blue-2)); color: #fff;
  border-radius: 22px; padding: 24px 26px; margin-bottom: 18px;
}
.hero h1 { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.hero p { margin: 0 0 6px; color: #DCE6FF; }
.hero .chip { background: rgb(255 255 255 / .18); color: #fff; }
.hero-paid { flex: 0 1 260px; background: #fff; color: var(--surface-900); border-radius: 16px; padding: 16px 18px; }
.hero-paid .paid-date { font-size: 28px; }
.hero-paid p { color: var(--surface-600); margin: 0; font-size: 13px; }
.hero-paid p.paid-ok { color: var(--teal-600); }
.hero-paid p.paid-warn { color: var(--warning-700); }
.hero-paid p.paid-danger { color: var(--danger-700); }
.hero-paid p.paid-date { font-size: 28px; }
.card .actions + .field { margin-top: 18px; }

.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card-grid .card { min-width: 0; }
.card-wide { grid-column: 1 / -1; }
.card h2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; margin: 0 0 12px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--surface-100); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--surface-600); }

.roadmap-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.roadmap-list li { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.roadmap-list .num {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; border: 2px solid var(--t1); color: var(--tt);
}
.roadmap-list li.done .num, .roadmap-list li.current .num { background: linear-gradient(150deg, var(--t1), var(--t2)); color: #fff; border: 0; }
.roadmap-list li.next { color: var(--surface-600); }
.roadmap-list li.current b { color: var(--surface-900); }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 6px 16px; margin: 0 0 14px; }
.feature-grid label { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 30px; cursor: pointer; }
.feature-grid input { width: 18px; height: 18px; accent-color: var(--brand-700); }
.feature-grid .badge { margin-left: auto; }

.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1 1 auto; min-width: 0; }

/* Выбор срока счёта кнопками вместо поля «месяцев». */
.months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 460px; }
.months label { position: relative; display: block; cursor: pointer; }
.months input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.months span {
  display: flex; align-items: center; justify-content: center; height: 46px; border-radius: var(--r);
  border: 1.5px solid var(--surface-200); background: #fff; font-weight: 700; font-size: 15px;
}
.months input:checked + span { border: 2px solid var(--brand-700); background: var(--brand-50); color: var(--brand-700); }
.months input:focus-visible + span { box-shadow: var(--ring); }
.months-out { margin: 8px 0 0; font-size: 13px; color: var(--teal-600); font-weight: 600; }

.city-field { position: relative; }
.city-list {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none;
  background: #fff; border: 1.5px solid var(--brand-700); border-radius: var(--r); box-shadow: 0 10px 24px rgb(10 21 51 / .12);
  max-height: 280px; overflow: auto;
}
.city-list button { display: block; width: 100%; padding: 9px 10px; border: 0; background: none; text-align: left; font: inherit; font-size: 14px; border-radius: 6px; cursor: pointer; }
.city-list button:hover, .city-list button:focus-visible { background: var(--brand-50); }

.label-like { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--surface-600); }
.hint { font-size: 13px; color: var(--surface-600); margin: 6px 0 0; }

/* Публичный роадмап: без меню, для владельца клиники, в первую очередь с телефона. */
.rm { min-height: 100vh; background: var(--surface-50); }
.rm-head { background: var(--navy); color: #fff; padding: 24px 20px 26px; }
.rm-head > div, .rm-body { max-width: 640px; margin: 0 auto; }
.rm-brand { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.rm-head h1 { margin: 14px 0 6px; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.rm-head p { margin: 0 0 14px; color: #B9C6E6; }
.rm-head .stagebar span { background: var(--navy-600); }
.rm-head .stagebar span.on { background: var(--t1); }
.rm-body { padding: 18px 16px 32px; display: grid; gap: 10px; }
.rm-step { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 16px; padding: 14px 16px; }
.rm-step .num {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; border: 2px solid var(--t1); color: var(--tt);
}
.rm-step.done .num { background: linear-gradient(150deg, var(--t1), var(--t2)); color: #fff; border: 0; }
.rm-step b { display: block; font-size: 16px; }
.rm-step span.sub { font-size: 13px; color: var(--surface-600); }
.rm-step.current { flex-direction: column; align-items: stretch; background: linear-gradient(150deg, var(--t1), var(--t2)); color: #fff; padding: 18px; }
.rm-step.current .rm-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rm-step.current .now { padding: 3px 10px; border-radius: 8px; background: rgb(255 255 255 / .22); font-size: 13px; font-weight: 700; }
.rm-step.current .sub { color: rgb(255 255 255 / .85); }
.rm-step.current .kv { border-color: rgb(255 255 255 / .25); }
.rm-step.current .kv span:first-child { color: #fff; }
.rm-note { margin: 6px 0 0; font-size: 14px; color: var(--surface-600); }
.rm-wait { background: var(--warning-50); color: var(--warning-700); border-radius: 12px; padding: 12px 14px; font-size: 14px; }

@media (max-width: 800px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .client-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .client-paid { text-align: left; }
  .hero h1 { font-size: 24px; }
  .hero-paid { flex-basis: 100%; }
  .page-title { font-size: 24px; }
}

/* --- Печать ---------------------------------------------------------------- */

/* Печатают со страницы счёта. На бумаге не нужны ни меню, ни кнопки. */
@media print {
  body { background: #fff; }
  .shell { display: block; }
  .sidebar, .actions, .noprint, .btn, .btn-secondary, .btn-danger { display: none !important; }
  .main { max-width: none; padding: 0; }
  .card { box-shadow: none; padding: 0; }
  /* На бумаге прокручивать нечего: обёртка не должна обрезать бланк. */
  .table-wrap { overflow-x: visible; }
  /* На бумаге серая линия пропадает: рамки бланка печатаем чёрным. */
  .invoice-table th, .invoice-table td { border-color: #000; }
}

/* --- Движение -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* --- Документы (03.11.2026) ------------------------------------------------ */

.doc-notice { margin: 0 0 22px; padding: 12px 16px; border-radius: 12px; background: #FFF4DC; color: #7C2D12; font-size: 14px; }
.doc-stage { margin-top: 26px; }
.doc-stage h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 19px; }
.doc-stage h2 span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(150deg, var(--t1), var(--t2)); color: #fff; font-size: 15px;
}
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.doc-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border-radius: var(--r-xl); padding: 14px 18px; box-shadow: var(--shadow-card);
  border-left: 5px solid var(--t1);
}
.doc-list b { font-size: 16px; }
.doc-list p { margin: 3px 0 0; font-size: 13px; color: var(--surface-600); }
.doc-list .btn-secondary { flex: none; }
@media (max-width: 640px) {
  .doc-list li { flex-direction: column; align-items: stretch; }
}