/* Цвета заданы ролями, а не «где какой оттенок»: тёмная тема ниже
   переопределяет только этот список, а сама вёрстка не меняется.
   Важное разделение — один и тот же --brand-deep раньше был и фоном
   бокового меню, и цветом заголовков. В тёмной теме это противоположные
   концы шкалы, поэтому роли разведены: --sidebar-bg и --heading. */
:root {
  color-scheme: light;
  --brand-deep: #0f0147;
  --brand-blue: #0d62ad;
  --brand-cyan: #007fb5;
  --navy: #0f0147;
  --blue: #0d62ad;
  --blue-soft: #eef7fb;
  --ink: #211d2f;
  --muted: #6e6b7b;
  --line: #dde2ec;
  --line-strong: #cfd5e2;
  --surface: #ffffff;
  --surface-2: #f8fbfd;
  --field-bg: #ffffff;
  --control-height: 44px;
  --surface-warning: #fffaf0;
  --surface-info: #f0f8fd;
  --background: #f5f7fb;
  --success: #287d4f;
  --success-soft: #e8f5ed;
  --success-border: #b7dfc7;
  --warning: #9a6700;
  --warning-soft: #fff3cd;
  --warning-border: #f0d58c;
  --danger: #b42318;
  --danger-soft: #feeceb;
  --danger-border: #f5b7b1;
  --info-text: #185f97;
  --info-border: #b9d6ec;
  --suspended-soft: #eee9f8;
  --suspended-text: #5a3d8a;
  --shadow: 0 12px 30px rgba(15, 1, 71, .08);
  --shadow-soft: 0 7px 20px rgba(15, 1, 71, .05);
  --shadow-card: 0 7px 18px rgba(15, 1, 71, .06);
  --shadow-card-hover: 0 10px 22px rgba(15, 1, 71, .10);
  --overlay: rgba(15, 1, 71, .5);
  --sidebar-bg: #0f0147;
  --sidebar-text: rgba(255, 255, 255, .82);
  --sidebar-muted: rgba(255, 255, 255, .55);
  --sidebar-line: rgba(255, 255, 255, .12);
  --sidebar-hover: rgba(255, 255, 255, .10);
  --heading: #0f0147;
  --primary-bg: #0d62ad;
  --primary-hover: #007fb5;
  --on-primary: #ffffff;
  --topbar-bg: rgba(255, 255, 255, .96);
  --table-head-bg: #f1f6fa;
  --row-hover: #fafcff;
  --focus-ring: rgba(13, 98, 173, .14);
  --hover-border: rgba(13, 98, 173, .45);
  --kanban-column-bg: #eef4f8;
  --kanban-column-border: #dbe4ec;
  --kanban-drop-bg: #e2f1f8;
  --kanban-empty-text: #829ab1;
  --kanban-empty-border: #b8c8d5;
  --scroll-thumb: #c3d3df;
  --scroll-thumb-hover: #a8bccb;
  --overdue-border: #e7a23b;
  --accent-line: #b9d6ec;
  --login-card-bg: rgba(255, 255, 255, .98);
  --login-card-border: rgba(255, 255, 255, .72);
}

/* Тёмная тема. Два блока с одинаковым содержимым — так требует устройство
   переключателя: без явного выбора идём за настройкой системы, а явный
   выбор сотрудника должен побеждать настройку системы в обе стороны. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand-deep: #cdd6f4;
    --brand-blue: #63a6e0;
    --brand-cyan: #4fb3de;
    --navy: #cdd6f4;
    --blue: #74b3e8;
    --blue-soft: #172a3c;
    --ink: #e4e6ee;
    --muted: #a0a5b8;
    --line: #2d3242;
    --line-strong: #3a4054;
    --surface: #1a1d28;
    --surface-2: #202433;
    --field-bg: #12141c;
    --surface-warning: #2a2213;
    --surface-info: #16283a;
    --background: #12141c;
    --success: #6ecf9a;
    --success-soft: #16301f;
    --success-border: #2f6244;
    --warning: #e0b155;
    --warning-soft: #33290f;
    --warning-border: #6b5620;
    --danger: #ef8378;
    --danger-soft: #331917;
    --danger-border: #6d332d;
    --info-text: #8fc4ea;
    --info-border: #2b4763;
    --suspended-soft: #241d33;
    --suspended-text: #b9a5e0;
    --shadow: 0 12px 30px rgba(0, 0, 0, .45);
    --shadow-soft: 0 7px 20px rgba(0, 0, 0, .35);
    --shadow-card: 0 7px 18px rgba(0, 0, 0, .35);
    --shadow-card-hover: 0 10px 22px rgba(0, 0, 0, .5);
    --overlay: rgba(0, 0, 0, .62);
    --sidebar-bg: #0c0e16;
    --sidebar-text: rgba(233, 236, 245, .78);
    --sidebar-muted: rgba(233, 236, 245, .45);
    --sidebar-line: rgba(255, 255, 255, .08);
    --sidebar-hover: rgba(255, 255, 255, .07);
    --heading: #dfe4f5;
    --primary-bg: #1c6cb8;
    --primary-hover: #2489c4;
    --on-primary: #ffffff;
    --topbar-bg: rgba(26, 29, 40, .96);
    --table-head-bg: #232838;
    --row-hover: #20242f;
    --focus-ring: rgba(99, 166, 224, .25);
    --hover-border: rgba(99, 166, 224, .55);
    --kanban-column-bg: #191d27;
    --kanban-column-border: #2a2f3d;
    --kanban-drop-bg: #1d2937;
    --kanban-empty-text: #7d8497;
    --kanban-empty-border: #343a4a;
    --scroll-thumb: #39404f;
    --scroll-thumb-hover: #4a5265;
    --overdue-border: #b57a2a;
    --accent-line: #2b4763;
    --login-card-bg: rgba(26, 29, 40, .97);
    --login-card-border: rgba(255, 255, 255, .10);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-deep: #cdd6f4;
  --brand-blue: #63a6e0;
  --brand-cyan: #4fb3de;
  --navy: #cdd6f4;
  --blue: #74b3e8;
  --blue-soft: #172a3c;
  --ink: #e4e6ee;
  --muted: #a0a5b8;
  --line: #2d3242;
  --line-strong: #3a4054;
  --surface: #1a1d28;
  --surface-2: #202433;
  --field-bg: #12141c;
  --surface-warning: #2a2213;
  --surface-info: #16283a;
  --background: #12141c;
  --success: #6ecf9a;
  --success-soft: #16301f;
  --success-border: #2f6244;
  --warning: #e0b155;
  --warning-soft: #33290f;
  --warning-border: #6b5620;
  --danger: #ef8378;
  --danger-soft: #331917;
  --danger-border: #6d332d;
  --info-text: #8fc4ea;
  --info-border: #2b4763;
  --suspended-soft: #241d33;
  --suspended-text: #b9a5e0;
  --shadow: 0 12px 30px rgba(0, 0, 0, .45);
  --shadow-soft: 0 7px 20px rgba(0, 0, 0, .35);
  --shadow-card: 0 7px 18px rgba(0, 0, 0, .35);
  --shadow-card-hover: 0 10px 22px rgba(0, 0, 0, .5);
  --overlay: rgba(0, 0, 0, .62);
  --sidebar-bg: #0c0e16;
  --sidebar-text: rgba(233, 236, 245, .78);
  --sidebar-muted: rgba(233, 236, 245, .45);
  --sidebar-line: rgba(255, 255, 255, .08);
  --sidebar-hover: rgba(255, 255, 255, .07);
  --heading: #dfe4f5;
  --primary-bg: #1c6cb8;
  --primary-hover: #2489c4;
  --on-primary: #ffffff;
  --topbar-bg: rgba(26, 29, 40, .96);
  --table-head-bg: #232838;
  --row-hover: #20242f;
  --focus-ring: rgba(99, 166, 224, .25);
  --hover-border: rgba(99, 166, 224, .55);
  --kanban-column-bg: #191d27;
  --kanban-column-border: #2a2f3d;
  --kanban-drop-bg: #1d2937;
  --kanban-empty-text: #7d8497;
  --kanban-empty-border: #343a4a;
  --scroll-thumb: #39404f;
  --scroll-thumb-hover: #4a5265;
  --overdue-border: #b57a2a;
  --accent-line: #2b4763;
  --login-card-bg: rgba(26, 29, 40, .97);
  --login-card-border: rgba(255, 255, 255, .10);
}

* { box-sizing: border-box; }
html { font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--background); }
body { margin: 0; min-height: 100vh; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, .brand strong, .login-brand strong, .topbar-title, .button { font-family: Montserrat, Inter, Arial, sans-serif; }

.environment-banner { position: fixed; inset: 0 0 auto 0; z-index: 100; min-height: 34px; padding: 7px 18px; display: flex; align-items: center; justify-content: center; gap: 8px; color: white; font-size: 12px; line-height: 20px; letter-spacing: .01em; text-align: center; }
.environment-banner strong { font-family: Montserrat, Inter, Arial, sans-serif; letter-spacing: .06em; }
.environment-banner--development { background: #b42318; }
.environment-banner--pilot { background: #9a6700; }
.has-environment-banner { padding-top: 34px; }
.has-environment-banner .app-shell { min-height: calc(100vh - 34px); }
.has-environment-banner .sidebar { top: 34px; }
.has-environment-banner .topbar { top: 34px; }
.has-environment-banner .sidebar-backdrop { top: 34px; }

.sidebar-backdrop { display: none; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 260px; background: var(--sidebar-bg); color: white; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 13px; color: white; padding: 19px 20px; border-bottom: 1px solid var(--sidebar-line); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 50px; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand strong, .login-brand strong { display: block; letter-spacing: .055em; font-weight: 600; }
.brand small, .login-brand small { display: block; opacity: .72; margin-top: 2px; }
.main-nav { padding: 18px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.main-nav a { color: var(--sidebar-text); padding: 12px 14px; border-radius: 12px; font-weight: 600; }
.main-nav a:hover { background: var(--sidebar-hover); color: white; text-decoration: none; }
.main-nav a.active { background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan)); color: white; text-decoration: none; box-shadow: 0 8px 20px rgba(0,127,181,.24); }
.sidebar-footer { margin-top: auto; padding: 18px 20px; color: var(--sidebar-muted); font-size: 12px; }
.main-area { margin-left: 260px; min-width: 0; flex: 1; }
.topbar { height: 72px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--topbar-bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); }
.topbar-title { font-weight: 600; color: var(--heading); letter-spacing: .01em; }
.user-menu { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 14px; }
.user-menu form { margin: 0; }
.link-button { border: 0; background: none; color: var(--blue); padding: 0; cursor: pointer; }
.menu-button { display: none; border: 0; background: transparent; font-size: 24px; color: var(--heading); }
.content { padding: 28px; max-width: 1500px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.page-heading h1 { margin: 0; color: var(--brand-cyan); font-size: clamp(25px, 3vw, 34px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.page-heading p { margin: 7px 0 0; color: var(--muted); }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; color: var(--ink); box-shadow: var(--shadow); }
.stat-card:hover { text-decoration: none; border-color: var(--hover-border); transform: translateY(-1px); }
.stat-card span { color: var(--muted); font-size: 14px; }
.stat-card strong { font-family: Montserrat, Inter, sans-serif; font-size: 32px; color: var(--brand-blue); }
.stat-card.warning { background: var(--surface-warning); }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.two-column.primary-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.panel-header h2 { margin: 0; font-size: 18px; color: var(--heading); font-weight: 600; }
.list-rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; color: var(--ink); border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }
.list-row:hover { text-decoration: none; }
.list-row span { min-width: 0; }
.list-row strong, .list-row small { display: block; }
.list-row small { color: var(--muted); margin-top: 4px; }
.list-rows.compact .list-row { padding: 10px 0; }
.empty-state { color: var(--muted); padding: 20px 0; text-align: center; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: 9px 18px; border: 1px solid var(--line); background: var(--surface); color: var(--heading); border-radius: 999px; font-weight: 600; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.button:hover { text-decoration: none; border-color: var(--brand-blue); color: var(--brand-blue); }
.button.primary { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--on-primary); box-shadow: 0 8px 18px rgba(13,98,173,.18); }
.button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); transform: translateY(-1px); }
.button.full { width: 100%; }
.badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--info-text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }

/* Поля фильтра равномерно заполняют строку и переносятся все вместе.
   Раньше выпадающие списки имели жёсткие 320px и не растягивались: в конце
   строки оставалась дыра, а следующий список уходил вниз — строка фильтров
   выглядела рваной и «съезжала» при каждом изменении ширины окна
   (жалоба заказчика 2026-09-06). Кнопки остаются по ширине текста, иначе
   вкладки «Моя доска» / «Поставленные мной» растянулись бы на пол-экрана. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.filter-bar > input, .filter-bar > select, .filter-bar > textarea, .filter-bar > label { flex: 1 1 220px; width: auto; min-width: 0; }
.filter-bar > label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.filter-bar > label > .form-control { flex: 1 1 auto; width: auto; }
.filter-bar > .button { flex: 0 0 auto; }
.form-control { width: 100%; min-height: var(--control-height); padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--field-bg); color: var(--ink); }
.form-control:focus { outline: 3px solid var(--focus-ring); border-color: var(--brand-blue); }
textarea.form-control { resize: vertical; }
.form-panel { max-width: 1050px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; }
.form-field { min-width: 0; }
.form-field.wide { grid-column: 1 / -1; }
.form-field > label:not(.checkbox-label), .stacked-form label { display: block; font-weight: 650; color: var(--navy); margin-bottom: 7px; }
.checkbox-label { display: flex; align-items: center; gap: 9px; min-height: var(--control-height); font-weight: 650; color: var(--navy); }
.form-check-input { width: 18px; height: 18px; }
.required, .field-error { color: var(--danger); }
.field-error, .help-text { display: block; margin-top: 5px; font-size: 12px; }
.help-text { color: var(--muted); }
.form-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
/* Правка прямо на карточке (2026-09-05): поля стоят в общем потоке карточки,
   поэтому форме не нужны ни своя рамка, ни своя ширина. */
.card-edit-form .form-actions { align-items: center; margin-top: 20px; }
.form-subheading { margin: 24px 0 12px; font-family: Montserrat, Inter, Arial, sans-serif; font-size: 15px; color: var(--heading); }
.panel-header small { color: var(--muted); font-size: 12px; text-align: right; }
.stacked-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.stacked-form p { margin: 0; }
.stacked-form input, .stacked-form select, .stacked-form textarea { width: 100%; min-height: var(--control-height); padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--field-bg); color: var(--ink); }

/* position: relative — иначе скрытые подписи (visually-hidden, absolute) выпадают из
   прокрутки таблицы и растягивают страницу на телефоне (столбец «Удалить» в
   позициях заказа, 2026-10-08). */
.responsive-table { overflow-x: auto; position: relative; }
.table-panel { padding: 0; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 15px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { background: var(--table-head-bg); color: var(--heading); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
td small { display: block; color: var(--muted); margin-top: 4px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.details-grid > div { min-width: 0; }
.details-grid .wide { grid-column: 1 / -1; }
dt { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
dd { margin: 0; overflow-wrap: anywhere; }
.details-text { margin-top: 16px; }
.details-text-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.details-text p { margin: 0; overflow-wrap: anywhere; }
.strikethrough { text-decoration: line-through; color: var(--muted); }
.inline-form { display: inline-block; }
.timeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.timeline-item { position: relative; padding-left: 18px; border-left: 2px solid var(--accent-line); }
.timeline-item::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.timeline-item strong, .timeline-item span { display: block; }
.timeline-item span { color: var(--muted); font-size: 12px; margin-top: 4px; }
.timeline-item p { margin: 7px 0 0; }

.messages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 18px; }
.message { padding: 12px 14px; border-radius: 9px; background: var(--blue-soft); color: var(--info-text); border: 1px solid var(--info-border); }
.message.success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.message.warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.message.error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.muted { color: var(--muted); }

.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.quick-action { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; min-height: 92px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }
.quick-action:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--hover-border); box-shadow: var(--shadow-card-hover); }
.quick-action strong { color: var(--heading); }
.quick-action small { color: var(--muted); }
.finance-highlight { border-left: 4px solid var(--brand-cyan); }
.inline-metrics { display: flex; flex-wrap: wrap; gap: 18px 36px; }
.inline-metrics span { display: grid; gap: 4px; }
.inline-metrics small { color: var(--muted); }
.balance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.balance-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 16px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface-2); }
.balance-card small { color: var(--muted); }
.balance-card strong { color: var(--heading); font-size: 18px; }
.variant-breakdown { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.variant-breakdown-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.variant-breakdown-row span:last-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.panel-padding { padding: 18px 20px 0; }
.heading-actions, .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.action-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.decision-inline { display: flex; align-items: center; gap: 10px; max-width: 760px; }
.decision-inline .form-control { flex: 1 1 320px; }
.decision-inline.status-inline { max-width: 320px; }
.decision-inline.status-inline .form-control { flex: 1 1 auto; }
.decision-inline.status-inline button { flex: 0 0 auto; white-space: nowrap; }
.badge.large { padding: 8px 12px; font-size: 13px; }
.status-posted, .status-closed { background: var(--success-soft); color: var(--success); }
.status-pending, .status-locked { background: var(--warning-soft); color: var(--warning); }
.status-suspended { background: var(--suspended-soft); color: var(--suspended-text); }
.status-rejected, .status-cancelled { background: var(--danger-soft); color: var(--danger); }
.status-draft, .status-open { background: var(--blue-soft); color: var(--blue); }
.status-done { background: var(--success-soft); color: var(--success); }
.status-waiting, .status-in_review { background: var(--warning-soft); color: var(--warning); }
.danger-text { color: var(--danger); }
.blocker-panel { border-left: 4px solid var(--warning); background: var(--surface-warning); }
.blocker-panel h2 { color: var(--warning); }
.blocker-panel ul { margin: 10px 0 0; padding-left: 20px; }
.blocker-panel li + li { margin-top: 7px; }
.reconciliation-value { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin-bottom: 20px; padding: 16px; border-radius: 13px; background: var(--blue-soft); }
.reconciliation-value small { color: var(--muted); }
.reconciliation-value strong { color: var(--heading); font-size: 22px; }
.button.success { background: var(--success); color: var(--on-primary); border-color: var(--success); }
.button.danger, .button.danger-outline { border-color: var(--danger); }
.button.danger { background: var(--danger); color: var(--on-primary); }
.button.danger-outline { color: var(--danger); background: var(--surface); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.nav-counter { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 7px; border-radius: 999px; background: var(--danger); color: var(--on-primary); font-size: 11px; font-weight: 800; }
.notification-unread { background: var(--surface-info); border-left: 3px solid var(--brand-cyan); }
.positions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }

.kanban-board { display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; padding: 2px 2px 18px; scroll-snap-type: x proximity; }
/* Столбец не растёт вниз бесконечно: он ограничен высотой экрана, а список
   карточек прокручивается внутри себя (см. .kanban-cards). Без этого страница
   становилась тем длиннее, чем больше заказов, и до нижних столбцов
   приходилось долго скроллить, теряя из виду заголовки. Правка 2026-09-04. */
.kanban-column { flex: 0 0 clamp(290px, 24vw, 320px); min-width: 0; min-height: 220px; max-height: max(320px, calc(100vh - 190px)); display: flex; flex-direction: column; background: var(--kanban-column-bg); border: 1px solid var(--kanban-column-border); border-radius: 18px; padding: 12px; scroll-snap-align: start; }
.kanban-column.is-drop-target { background: var(--kanban-drop-bg); border-color: var(--brand-cyan); box-shadow: inset 0 0 0 2px rgba(0,127,181,.14); }
.kanban-column-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 3px 3px 12px; }
.kanban-column-header h2 { margin: 0; color: var(--heading); font-size: 14px; line-height: 1.35; font-weight: 600; }
.kanban-count { min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: var(--surface); color: var(--brand-blue); font-size: 12px; font-weight: 800; border: 1px solid var(--line); }
/* min-height: 0 обязателен — иначе flex-элемент не сжимается ниже содержимого
   и прокрутка не включается. overscroll-behavior не даёт «докрутить» страницу,
   когда список внутри столбца закончился. */
.kanban-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 2px; align-content: start; }
.kanban-cards::-webkit-scrollbar { width: 9px; }
.kanban-cards::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; }
.kanban-cards::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
.kanban-cards::-webkit-scrollbar-track { background: transparent; }
.kanban-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; color: var(--ink); box-shadow: var(--shadow-card); }
.kanban-board[data-draggable="true"] .kanban-card { cursor: grab; }
.kanban-card:hover { text-decoration: none; border-color: var(--hover-border); box-shadow: var(--shadow-card-hover); }
.kanban-card.is-dragging { opacity: .45; cursor: grabbing; }
.kanban-card.is-saving { opacity: .65; pointer-events: none; }
.kanban-card.overdue { border-color: var(--overdue-border); box-shadow: var(--shadow-card); }
.kanban-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kanban-card strong { color: var(--heading); line-height: 1.3; }
.kanban-drag-handle { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; margin: -7px -7px 0 0; border-radius: 8px; color: var(--muted); font-size: 20px; line-height: 1; cursor: grab; touch-action: none; user-select: none; }
.kanban-drag-handle:hover { background: var(--blue-soft); color: var(--blue); }
/* Сворачивание карточек (2026-09-04). В свёрнутом виде остаются название
   компании и город — остальное прячется целиком блоком .kanban-card-body,
   чтобы не перечислять каждую строку по отдельности. */
.kanban-card-tools { flex: 0 0 auto; display: flex; align-items: flex-start; margin: -7px -7px 0 0; }
.kanban-card-tools .kanban-drag-handle { margin: 0; }
.kanban-collapse-toggle { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; user-select: none; transition: transform .15s ease, background .15s ease; }
.kanban-collapse-toggle:hover { background: var(--blue-soft); color: var(--blue); }
.kanban-collapse-toggle:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 1px; }
/* Сворачивание карточки (2026-09-07).
 *
 * Высотой управляет скрипт (kanban-board.js): он ставит конкретные значения
 * и снимает их, когда переход закончился. Чисто на CSS не вышло — переход к
 * height: auto здесь не отрабатывает, а приём с grid-template-rows 1fr → 0fr
 * бесполезен, потому что при неопределённой высоте контейнера `fr`
 * размеряется по содержимому (проверено в браузере: даже minmax(0, 0fr)
 * давал полные 92px).
 *
 * Раскладку детей держит внутренний блок, поэтому внешнему можно свободно
 * менять высоту. */
.kanban-card-body { overflow: hidden; }
.kanban-card-body-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.kanban-card.is-collapsed .kanban-card-body { display: none; }
.kanban-card.is-collapsed .kanban-collapse-toggle { transform: rotate(-90deg); }
}
.kanban-card-city { font-weight: 600; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .kanban-collapse-toggle { transition: none; } }
.kanban-product { color: var(--ink); line-height: 1.35; }
.kanban-meta, .kanban-date { color: var(--muted); font-size: 12px; }
.kanban-date { padding-top: 7px; border-top: 1px solid var(--line); }
.kanban-empty { padding: 24px 10px; text-align: center; color: var(--kanban-empty-text); font-size: 13px; border: 1px dashed var(--kanban-empty-border); border-radius: 10px; }
.kanban-notice { position: fixed; z-index: 40; top: 82px; right: 20px; max-width: min(420px, calc(100vw - 40px)); padding: 12px 15px; border: 1px solid var(--success-border); border-radius: 10px; background: var(--success-soft); color: var(--success); box-shadow: var(--shadow); font-weight: 650; }
.kanban-notice.error { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
body.is-kanban-dragging { user-select: none; }
.list-row-tools { display: flex; align-items: center; gap: 12px; }
.link-button.danger { color: var(--danger); font-size: 17px; line-height: 1; }

/* Чат сотрудников (2026-09-05). */
.chat-stream { display: flex; flex-direction: column; gap: 10px; max-height: max(320px, calc(100vh - 420px)); min-height: 220px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 12px; }
.chat-message { display: flex; }
.chat-message.own { justify-content: flex-end; }
.chat-bubble { max-width: min(680px, 82%); display: flex; flex-direction: column; gap: 5px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.chat-message.own .chat-bubble { border-color: var(--info-border); background: var(--blue-soft); }
.chat-author { font-weight: 650; font-size: 12px; color: var(--navy); }
.chat-bubble p { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.chat-time { font-size: 11px; color: var(--muted); align-self: flex-end; }
.chat-file { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.chat-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.chat-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chat-attach { font-size: 13px; color: var(--muted); }
.money-total { font-family: Montserrat, Inter, Arial, sans-serif; font-size: 20px; color: var(--heading); font-variant-numeric: tabular-nums; }
.money-total.negative, strong.negative { color: var(--danger); }
.chat-notice { position: fixed; z-index: 45; right: 20px; bottom: 20px; max-width: min(360px, calc(100vw - 40px)); padding: 12px 16px; border: 1px solid var(--success-border); border-radius: 12px; background: var(--success-soft); color: var(--success); box-shadow: var(--shadow); font-weight: 650; text-decoration: none; }
.chat-notice:hover { text-decoration: none; border-color: var(--success); }
@media (max-width: 760px) { .chat-notice { right: 12px; bottom: 12px; } }
/* Пока карточку тащат, «прилипание» столбцов выключено (2026-09-05).
   Столбцы у доски примагничиваются к краю (scroll-snap-align выше) — это
   удобно при обычном листании, но именно из-за этого доска не прокручивалась
   при перетаскивании: каждый маленький сдвиг тут же возвращался к ближайшему
   столбцу, и автопрокрутка не работала с самого начала. */
body.is-kanban-dragging .kanban-board { scroll-snap-type: none; }

/* Карточка окном поверх доски (2026-09-05).
 * max() вокруг 100vh — та же страховка, что у столбца канбана: в некоторых
 * средах предпросмотра 100vh возвращает 0, и окно схлопнулось бы. */
.card-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 26px 16px; }
.card-modal[hidden] { display: none; }
.card-modal-backdrop { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); }
.card-modal-window { position: relative; width: min(1080px, 100%); max-height: max(320px, calc(100vh - 52px)); overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 26px; border-radius: 18px; background: var(--background); box-shadow: 0 28px 70px rgba(5, 0, 31, .38); }
.card-modal-tools { position: sticky; top: -22px; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: -22px -24px 6px; padding: 12px 18px; background: var(--background); border-bottom: 1px solid var(--line); border-radius: 18px 18px 0 0; }
.card-modal-page { font-size: 13px; font-weight: 600; }
.card-modal-close { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.card-modal-close:hover { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.card-modal-loading { padding: 40px 10px; text-align: center; color: var(--muted); }
.card-modal.is-busy .card-modal-body { opacity: .55; }
.card-modal .page-heading { margin-top: 0; }
body.has-card-modal { overflow: hidden; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 18% 18%, rgba(0,127,181,.42), transparent 32%), radial-gradient(circle at 86% 84%, rgba(13,98,173,.32), transparent 30%), linear-gradient(145deg, #0f0147, #090127 68%, #0d62ad); }
.login-card { width: min(440px, 100%); background: var(--login-card-bg); border: 1px solid var(--login-card-border); box-shadow: 0 28px 80px rgba(5,0,31,.38); border-radius: 24px; padding: 36px; }
.login-brand { display: flex; align-items: center; gap: 14px; color: var(--heading); margin-bottom: 28px; }
.login-brand .brand-mark { width: 58px; height: 58px; flex-basis: 58px; }
.login-card h1 { margin: 0; color: var(--brand-cyan); font-weight: 600; }
.login-card .muted { margin: 8px 0 24px; }
.decision-form { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }

@media (max-width: 1050px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-column, .two-column.primary-wide { grid-template-columns: minmax(0, 1fr); }
  .quick-actions, .balance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .environment-banner { justify-content: flex-start; padding-inline: 12px; overflow: hidden; white-space: nowrap; width: 100%; }
  .environment-banner span { overflow: hidden; text-overflow: ellipsis; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 15; border: 0; padding: 0; background: var(--overlay); opacity: 0; transition: opacity .2s ease; }
  .sidebar-backdrop.open { display: block; opacity: 1; }
  .main-area { margin-left: 0; }
  .menu-button { display: block; }
  .topbar { padding: 0 16px; }
  .topbar-title, .user-menu span { display: none; }
  .content { padding: 20px 14px; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .page-heading .button { width: 100%; }
  .stats-grid, .form-grid, .details-grid { grid-template-columns: minmax(0, 1fr); }
  .form-field.wide, .details-grid .wide { grid-column: auto; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar > input, .filter-bar > select, .filter-bar > textarea, .filter-bar > label, .filter-bar > .button { width: 100%; flex: 0 0 auto; }
  .panel { padding: 16px; border-radius: 11px; }
  .table-panel { padding: 0; }
  th, td { padding: 11px 12px; }
  .user-menu { margin-left: auto; }
  .kanban-board { margin-right: -14px; }
  .kanban-column { flex-basis: min(84vw, 320px); }
  /* На телефоне шапка ниже, поэтому столбцу можно отдать больше высоты. */
  .kanban-column { max-height: calc(100vh - 150px); }
  .kanban-notice { top: 78px; right: 14px; }
  .card-modal { padding: 10px 8px; }
  .card-modal-window { padding: 16px 14px 20px; border-radius: 14px; max-height: max(320px, calc(100vh - 20px)); }
  .card-modal-tools { top: -16px; margin: -16px -14px 6px; padding: 10px 12px; border-radius: 14px 14px 0 0; }
  .quick-actions, .balance-grid { grid-template-columns: minmax(0, 1fr); }
  .positions-grid { grid-template-columns: minmax(0, 1fr); }
  .decision-inline { align-items: stretch; flex-direction: column; }
  .decision-inline .form-control, .decision-inline .button { width: 100%; flex-basis: auto; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .button { flex: 1 1 auto; }
}

/* Кнопка выбора темы и выравнивание (2026-09-06).
 *
 * Жалоба заказчика: «текста и кнопки, иногда съезжает, в зависимости от
 * экрана». Причины были в трёх местах, все — при промежуточной ширине окна,
 * когда мобильная раскладка ещё не включилась:
 *  - кнопка и поле в одной строке имели разную высоту (42 против 44);
 *  - заголовок страницы и кнопки справа стояли одной строкой без переноса,
 *    поэтому длинный заголовок сжимал кнопки и рвал их подписи;
 *  - длинное имя сотрудника в шапке распирало строку.
 */
.theme-toggle { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.theme-toggle:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 1px; }

/* Заголовок и кнопки: при нехватке места блок кнопок уходит на свою строку
   целиком, а не сжимается до нечитаемого. */
.page-heading { flex-wrap: wrap; }
/* flex-basis здесь — ширина, потому что строка горизонтальная. В мобильной
   раскладке .page-heading становится колонкой, и та же запись превратилась бы
   в высоту 320px — под подзаголовком открывалась пустая дыра на пол-экрана
   (поймано при проверке на телефоне). Поэтому ниже basis сбрасывается. */
.page-heading > div:first-child { flex: 1 1 320px; min-width: 0; }
.heading-actions { flex-shrink: 0; }
.panel-header { flex-wrap: wrap; }
.panel-header h2 { min-width: 0; overflow-wrap: anywhere; }

/* Шапка: высота задана минимумом, длинное имя обрезается многоточием. */
.topbar { height: auto; min-height: 72px; }
.user-menu span { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Строка списка: длинное название не должно выталкивать сумму за край. */
.list-row > span:first-child { flex: 1 1 auto; overflow-wrap: anywhere; }
.list-row > strong:last-child { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }

/* Действия под формой и в строке фильтров стоят по одной линии. */
.form-actions, .filter-bar { align-items: center; }
.form-actions { flex-wrap: wrap; }

@media (max-width: 1050px) {
  .page-heading .heading-actions { width: 100%; }
}

/* Ниже 760px .page-heading становится колонкой (правило выше по файлу), и
   flex-basis из горизонтальной раскладки начал бы задавать ВЫСОТУ — под
   подзаголовком открывалась пустая полоса в треть экрана. Сброс стоит здесь,
   а не в общем мобильном блоке: тот идёт раньше и при равной специфичности
   проигрывает. */
@media (max-width: 760px) {
  .page-heading > div:first-child { flex: 0 0 auto; }
}

/* Отгрузка одной страницей (2026-09-06): позиция заказа слева, количество и
   партия справа. На узком экране поля уходят под название позиции. */
.ship-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ship-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.ship-row-item { flex: 1 1 260px; min-width: 0; }
.ship-row-item strong { display: block; color: var(--heading); }
.ship-row-item small { display: block; margin-top: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ship-row-fields { flex: 1 1 340px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

/* Значки меню и сворачивание колонки (2026-09-06).
 *
 * Ширина меню задана переменной: её же использует отступ рабочей области,
 * поэтому свёрнутое и развёрнутое состояние не расходятся между собой. */
/* 280px, а не прежние 260: со значком слева «Склад и производство» и
   «Потенциальные клиенты» переставали помещаться и обрезались. */
:root { --sidebar-width: 280px; --sidebar-rail: 74px; }
.sidebar { width: var(--sidebar-width); overflow-x: hidden; overflow-y: auto; }
.main-area { margin-left: var(--sidebar-width); }
.nav-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.main-nav a { display: flex; align-items: center; gap: 10px; padding: 12px; }
.nav-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sidebar-collapse { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border: 0; border-radius: 10px; background: none; color: var(--sidebar-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.sidebar-collapse:hover { background: var(--sidebar-hover); }
.sidebar-collapse:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 1px; }
.sidebar-version { padding-left: 8px; }

/* Свёрнутое меню: остаются только значки, названия возвращаются при наведении
   мышью. Разворачивается оно ПОВЕРХ страницы — отступ рабочей области при
   этом не меняется, иначе содержимое дёргалось бы при каждом движении мыши
   вдоль левого края. Поэтому и селектор ниже — `.sidebar:not(:hover)`, а не
   просто `.sidebar`: свёрнутый вид действует, пока курсора на меню нет.
   Счётчик непрочитанных в свёрнутом виде превращается в точку — цифра в
   полосе шириной 74px не читается. */
:root[data-sidebar="rail"] .main-area { margin-left: var(--sidebar-rail); }
:root[data-sidebar="rail"] .sidebar { transition: width .15s ease; }
/* Задержка перед раскрытием: без неё меню распахивалось бы от любого движения
   мыши вдоль левого края. Обратно (при уходе курсора) — сразу, задержка
   действует только в состоянии наведения. */
:root[data-sidebar="rail"] .sidebar:hover { transition-delay: .18s; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
:root[data-sidebar="rail"] .sidebar:not(:hover) { width: var(--sidebar-rail); }
:root[data-sidebar="rail"] .sidebar:not(:hover) .brand { justify-content: center; padding: 19px 8px; }
:root[data-sidebar="rail"] .sidebar:not(:hover) .brand > span:last-child { display: none; }
:root[data-sidebar="rail"] .sidebar:not(:hover) .main-nav { padding: 18px 10px; }
:root[data-sidebar="rail"] .sidebar:not(:hover) .main-nav a { justify-content: center; padding: 12px 0; }
:root[data-sidebar="rail"] .sidebar:not(:hover) .nav-label { display: none; }
:root[data-sidebar="rail"] .sidebar:not(:hover) .sidebar-collapse { justify-content: center; padding: 9px 0; }
:root[data-sidebar="rail"] .sidebar-collapse .nav-icon { transform: rotate(180deg); }
:root[data-sidebar="rail"] .sidebar:not(:hover) .sidebar-version { display: none; }
:root[data-sidebar="rail"] .sidebar:not(:hover) .nav-counter { position: absolute; transform: translate(14px, -12px); min-width: 9px; height: 9px; padding: 0; font-size: 0; }
@media (prefers-reduced-motion: reduce) {
  :root[data-sidebar="rail"] .sidebar { transition: none; }
}

/* Доска использует всю ширину экрана: ограничение в 1500px разумно для
   текста, но на широком мониторе прятало столбцы за краем — приходилось
   листать вбок там, где место было (жалоба заказчика 2026-09-06). Столбцы
   при этом становятся чуть шире, но не растягиваются бесконечно. */
.content.wide { max-width: none; }
@media (min-width: 1600px) {
  .kanban-column { flex-basis: clamp(300px, 22vw, 360px); }
}

/* На телефоне меню и так выезжает поверх страницы во всю ширину, поэтому
   свёрнутое состояние там не действует. Блок стоит в конце файла: правила
   выше идут позже мобильного медиазапроса и иначе перебили бы его. */
@media (max-width: 760px) {
  :root[data-sidebar="rail"] .main-area { margin-left: 0; }
  :root[data-sidebar="rail"] .sidebar:not(:hover) { width: var(--sidebar-width); }
  :root[data-sidebar="rail"] .sidebar:not(:hover) .brand { justify-content: flex-start; padding: 19px 20px; }
  :root[data-sidebar="rail"] .sidebar:not(:hover) .brand > span:last-child { display: block; }
  :root[data-sidebar="rail"] .sidebar:not(:hover) .main-nav { padding: 18px 12px; }
  :root[data-sidebar="rail"] .sidebar:not(:hover) .main-nav a { justify-content: flex-start; padding: 12px; }
  :root[data-sidebar="rail"] .sidebar:not(:hover) .nav-label { display: block; }
  :root[data-sidebar="rail"] .sidebar-collapse { display: none; }
  :root[data-sidebar="rail"] .sidebar:not(:hover) .sidebar-version { display: block; }
  :root[data-sidebar="rail"] .sidebar:not(:hover) .nav-counter { position: static; transform: none; min-width: 22px; height: 22px; padding: 0 6px; font-size: 11px; }
}

/* Свёрнутый столбец доски (2026-09-06): узкая полоса с вертикальным названием.
 *
 * Ничего не прячется из разметки — меняется только вид: заголовок становится
 * колонкой, название разворачивается через writing-mode, а список карточек и
 * суммы скрываются. Кнопка остаётся сверху (order: -1), чтобы столбец можно
 * было раскрыть обратно. */
.kanban-column-toggle { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.kanban-column-toggle:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.kanban-column-toggle:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 1px; }

.kanban-column { transition: flex-basis .22s ease, padding .22s ease; }
.kanban-column.is-column-collapsed { flex-basis: 54px; min-height: 220px; padding: 12px 8px; }
.kanban-column.is-column-collapsed .kanban-column-header { flex-direction: column; align-items: center; gap: 12px; padding: 0; }
.kanban-column.is-column-collapsed .kanban-column-toggle { order: -1; }
.kanban-column.is-column-collapsed .kanban-column-header h2 { writing-mode: vertical-rl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: calc(100vh - 320px); }
.kanban-column.is-column-collapsed .kanban-column-header small { display: none; }
.kanban-column.is-column-collapsed .kanban-cards { display: none; }

/* Карточку можно бросить и в свёрнутый столбец: пока её тащат, столбец
   раскрывается, чтобы было видно, куда она попадёт. */
body.is-kanban-dragging .kanban-column.is-column-collapsed.is-drop-target { flex-basis: clamp(290px, 24vw, 320px); padding: 12px; }
body.is-kanban-dragging .kanban-column.is-column-collapsed.is-drop-target .kanban-column-header { flex-direction: row; align-items: flex-start; gap: 10px; padding: 3px 3px 12px; }
body.is-kanban-dragging .kanban-column.is-column-collapsed.is-drop-target .kanban-column-header h2 { writing-mode: horizontal-tb; max-height: none; }
body.is-kanban-dragging .kanban-column.is-column-collapsed.is-drop-target .kanban-cards { display: grid; }

/* Кому анимация мешает — тот её не увидит: системная настройка «уменьшить
   движение» отключает все переходы сворачивания разом. */
@media (prefers-reduced-motion: reduce) {
  .kanban-card-body,
  .kanban-column,
  .sidebar,
  :root[data-sidebar="rail"] .sidebar { transition: none; }
}

/* Карточка прямо в столбце, как в Trello (2026-09-18). Блок стоит под
   списком карточек, вне его прокрутки, поэтому всегда виден внизу столбца. */
.kanban-quick-add { margin-top: 10px; display: grid; gap: 8px; }
.kanban-quick-add [hidden] { display: none !important; }
.kanban-quick-add-open { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px dashed var(--kanban-empty-border); border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.kanban-quick-add-open:hover { border-color: var(--brand-blue); color: var(--brand-blue); background: var(--surface); }
.kanban-quick-add-open:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 1px; }
.kanban-quick-add-body { display: grid; gap: 8px; }
.kanban-quick-add-body textarea { min-height: 62px; resize: vertical; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); }
.kanban-quick-add-actions { display: flex; align-items: center; gap: 8px; }
.kanban-quick-add-cancel { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.kanban-quick-add-cancel:hover { color: var(--ink); background: var(--surface); }
.kanban-column.is-column-collapsed .kanban-quick-add { display: none; }

/* Справочник контрагентов: вкладки с числами, передача ответственному,
   подписи в строках (2026-10-02). Цвета — только из палитры, поэтому обе
   темы работают без отдельных правил. */
.segment-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.segment-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--heading); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.segment-tab:hover { text-decoration: none; border-color: var(--brand-blue); color: var(--brand-blue); }
.segment-tab.active { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--on-primary); }
.segment-count { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--info-text); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.segment-tab.active .segment-count { background: color-mix(in srgb, var(--on-primary) 20%, transparent); color: var(--on-primary); }
.list-meta { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface); }
.bulk-bar.has-selection { border-style: solid; border-color: var(--brand-blue); }
.bulk-bar .bulk-summary { flex: 1 1 260px; color: var(--muted); font-size: 14px; }
.bulk-bar.has-selection .bulk-summary { color: var(--heading); font-weight: 600; }
.bulk-bar > select { flex: 0 1 260px; width: auto; min-width: 0; }
.counterparty-table .select-cell { width: 44px; text-align: center; }
.cell-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.counterparty-table .phone-link { white-space: nowrap; }
@media (max-width: 760px) {
  .counterparty-table .hide-narrow { display: none; }
}

/* Справочник, шаг 2 (2026-10-02): «Ещё фильтры», перспективность,
   раскрывающееся примечание, страница «Возможные дубли». */
.filter-bar > .more-filters { flex: 1 1 100%; }
.more-filters > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--brand-blue); font-size: 14px; font-weight: 600; list-style: none; }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::after { content: "▾"; font-size: 12px; transition: transform .2s ease; }
.more-filters[open] > summary::after { transform: rotate(180deg); }
.more-filters-body { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.more-filters-body > select, .more-filters-body > input { flex: 1 1 220px; width: auto; min-width: 0; }
.badge-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.badge.interest-high { background: var(--success-soft); color: var(--success); }
.badge.interest-low { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.badge.interest-none { background: var(--danger-soft); color: var(--danger); }
.notes-details > summary { cursor: pointer; list-style: none; }
.notes-details > summary::-webkit-details-marker { display: none; }
.notes-details .notes-toggle { color: var(--brand-blue); font-weight: 600; white-space: nowrap; }
.notes-details[open] .notes-preview, .notes-details[open] .when-closed, .notes-details:not([open]) .when-open { display: none; }
.notes-details .notes-full { margin-top: 8px; }
.duplicate-pair { display: grid; gap: 12px; margin-bottom: 14px; }
.duplicate-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.duplicate-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.duplicate-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.duplicate-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.duplicate-facts { display: grid; gap: 4px; margin: 10px 0 0; font-size: 14px; }
.duplicate-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
.duplicate-facts dt { color: var(--muted); }
.duplicate-facts dd { margin: 0; overflow-wrap: anywhere; }
.duplicate-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.duplicate-actions form { margin: 0; }
@media (max-width: 520px) { .duplicate-facts > div { grid-template-columns: 1fr; gap: 0; } }

/* Справочник, шаг 3 (2026-10-02): карточка компании для заполнения — одна на
   справочник и доску, строка звонка с кнопками итога, меню «Ещё», роль и
   статус текстом с «Изменить», свёрнутые панели. В тот же день заказчик:
   «интерфейс стал громоздким … не только карточки, но и меню этих разделов» —
   поэтому всё ниже плотное: поля ниже ростом, подписи контактов одной
   строкой, верх разделов в одну полосу. Цвета — только из палитры. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.button.small { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.muted-line { margin: 0; color: var(--muted); font-size: 14px; }

/* Верх разделов «Контрагенты» и «Потенциальные клиенты»: заголовок, фильтры
   и действия одной полосой вместо заголовка с абзацем, пяти кнопок и двух
   строк фильтров. */
.section-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.section-toolbar .section-title { margin: 0; color: var(--heading); font-size: 22px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
/* flex-shrink: 1 — иначе (общее .heading-actions { flex-shrink: 0 }) блок
   кнопок не сжимается и на телефоне вытягивается в одну строку шире экрана:
   так было на доске с четырьмя кнопками (2026-10-02). Сжимаясь, он переносит
   кнопки на следующую строку. */
.section-toolbar > .heading-actions { margin-left: auto; gap: 8px; flex-shrink: 1; }
.filter-bar.compact { gap: 8px; margin-bottom: 10px; }
.filter-bar.compact > input, .filter-bar.compact > select, .filter-bar.compact > label { flex: 1 1 170px; }
.filter-bar.compact > input[type="search"] { flex: 2 1 240px; }
.filter-bar.compact .form-control, .more-filters-body .form-control { min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.filter-bar.compact > .checkbox-label { flex: 0 0 auto; min-height: 38px; font-size: 13px; }
.filter-bar.compact > .more-filters { flex: 0 0 auto; }
.filter-bar.compact > .more-filters[open] { flex-basis: 100%; }
.tabs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.tabs-row > .segment-tabs { margin: 0; }
.tabs-row > .list-meta { margin: 0 0 0 auto; }
.segment-tab.calls-tab { border-color: var(--brand-blue); color: var(--brand-blue); }
.segment-tab.calls-tab.active { color: var(--on-primary); }
/* Класс .menu-button занят мобильной кнопкой «☰» (скрыта на компьютере) —
   для кнопок в меню «Ещё» его брать нельзя: так 2026-10-02 пропали кнопки
   сворачивания на доске потенциальных клиентов. */

/* Массовые действия появляются внизу экрана, только когда отмечена хотя бы
   одна строка (counterparty-list.js ставит is-idle, пока ничего не выбрано;
   без скрипта панель просто видна). */
.bulk-bar.floating { position: sticky; bottom: 14px; z-index: 6; margin: 12px 0; border-style: solid; border-color: var(--brand-blue); box-shadow: var(--shadow); }
.bulk-bar.floating.is-idle { display: none; }
.bulk-bar .form-control { min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }

/* Карточка компании для заполнения. */
.company-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.company-card-head h2 { margin: 0; color: var(--heading); font-size: 18px; font-weight: 600; }
.card-gaps { margin: 0; color: var(--warning); font-size: 13px; font-weight: 600; }
.card-gaps.is-complete { color: var(--success); }
.gap-chip + .gap-chip::before { content: ", "; }
.company-card .form-control, .compact-form .form-control { min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.company-card textarea.form-control, .compact-form textarea.form-control { min-height: 0; }
.company-card .form-field > label, .compact-form .form-field > label { margin-bottom: 4px; font-size: 13px; }
.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.card-grid .span-2 { grid-column: span 2; }
.card-static { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 38px; overflow-wrap: anywhere; font-size: 14px; }
.card-static-label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
/* Имена файлов загрузки — одно длинное «слово» без пробелов: без переноса в
   любом месте блок распирал страницу на телефоне (проверено на 375 px). */
.card-notes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; overflow-wrap: anywhere; }
.card-notes > .notes-details, .card-notes > span:last-child { flex: 1 1 280px; min-width: 0; }
.card-more { margin-top: 8px; }
.card-more > summary, .card-add > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--brand-blue); font-size: 14px; font-weight: 600; list-style: none; }
.card-more > summary::-webkit-details-marker, .card-add > summary::-webkit-details-marker { display: none; }
.card-more > summary::after { content: "▾"; font-size: 12px; transition: transform .2s ease; }
.card-more[open] > summary::after { transform: rotate(180deg); }
.card-more > .form-grid { margin-top: 10px; }
.compact-grid { gap: 10px 14px; }
.card-section-title { margin: 16px 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.contact-table { display: grid; gap: 6px; }
.contact-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 92px; align-items: center; gap: 8px; }
.contact-head { color: var(--muted); font-size: 12px; font-weight: 600; }
.contact-cell { min-width: 0; }
.contact-call { justify-self: start; font-size: 13px; font-weight: 600; white-space: nowrap; }
.contact-row-error { grid-column: 1 / -1; }
.card-add { margin-top: 6px; }
.card-add[open] > summary { margin-bottom: 6px; }
.need-lines { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.need-lines .muted { color: var(--muted); }
.need-add { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px 12px; }
.call-box { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--line); }
.call-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: end; gap: 10px 14px; }
.call-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.call-actions-label { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }

/* Меню «Ещё» и правка роли и статуса на месте. */
.action-menu { position: relative; }
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary::after { content: "▾"; margin-left: 6px; font-size: 12px; }
.action-menu-body { position: absolute; z-index: 25; top: calc(100% + 6px); right: 0; display: grid; gap: 10px; width: min(320px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.action-menu-body > a { font-weight: 600; }
.action-menu-form { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.action-menu-form label { color: var(--muted); font-size: 12px; font-weight: 700; }
.inline-edit { margin-top: 4px; }
.inline-edit > summary { display: inline-block; cursor: pointer; color: var(--brand-blue); font-size: 13px; font-weight: 600; list-style: none; }
.inline-edit > summary::-webkit-details-marker { display: none; }
.inline-edit > form, .inline-edit > .timeline { margin-top: 8px; }
.inline-edit > form { flex-wrap: wrap; }

/* Панели под карточкой — плотнее и без пустых «пока ничего нет» на пол-экрана. */
.compact-panel { padding-top: 16px; padding-bottom: 16px; }
.compact-panel .panel-header { margin-bottom: 10px; }
.facts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.facts-row dt { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.facts-row dd { margin: 4px 0 0; }
.triple-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.triple-list h3 { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.triple-list ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.triple-list li small { display: block; color: var(--muted); font-size: 12px; }
.fold-panel { padding-top: 14px; padding-bottom: 14px; }
.fold-panel > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.fold-panel > summary::-webkit-details-marker { display: none; }
.fold-panel > summary h2 { margin: 0; color: var(--heading); font-size: 16px; font-weight: 600; }
.fold-panel > summary::after { content: "▾"; margin-left: auto; color: var(--brand-blue); font-size: 13px; transition: transform .2s ease; }
.fold-panel[open] > summary { margin-bottom: 10px; }
.fold-panel[open] > summary::after { transform: rotate(180deg); }
.fold-count { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--info-text); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.fold-add { display: inline-block; margin-top: 10px; font-weight: 600; }
.bulk-bar > .bulk-reason { flex: 0 1 220px; width: auto; min-width: 0; }
.form-actions.compact { margin-top: 12px; padding-top: 12px; }

/* На телефоне строка фильтров становится столбцом (правило выше, 760 px), а в
   столбце «базовая ширина» flex задаёт ВЫСОТУ — поля вытягивались в блоки по
   200 px. Ловушка уже описана в памятке (2026-09-06), поймана снова при
   проверке на 375 px: сбрасываем основу у плотной строки фильтров. */
@media (max-width: 760px) {
  .filter-bar.compact > input,
  .filter-bar.compact > input[type="search"],
  .filter-bar.compact > select,
  .filter-bar.compact > label,
  .filter-bar.compact > .button,
  .filter-bar.compact > .more-filters,
  .filter-bar.compact > .more-filters[open] { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 960px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 0; border-bottom: 1px solid var(--line); }
  .contact-head { display: none; }
  /* Без строки подписей над таблицей подпись нужна у каждого поля. */
  .contact-cell > label.visually-hidden { position: static; width: auto; height: auto; margin: 0 0 2px; overflow: visible; clip: auto; white-space: normal; display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
  .need-add, .facts-row, .triple-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .card-grid, .contact-row, .need-add, .call-grid, .facts-row, .triple-list { grid-template-columns: minmax(0, 1fr); }
  .card-grid .span-2 { grid-column: auto; }
  .call-actions-label { flex: 1 1 100%; margin-left: 0; }
  .section-toolbar > .heading-actions { margin-left: 0; }
  /* На телефоне кнопки шапки стоят слева — меню раскрывается вправо от них. */
  .action-menu-body { right: auto; left: 0; }
}

/* Карточка заказа (2026-10-02, «стало громоздко»): этапы полосой, одна кнопка
   следующего шага, строка цифр, позиции одной таблицей «заказано — отгружено —
   цена», оплаты и отгрузки рядом. */
.order-toolbar { margin-bottom: 4px; }
.order-subtitle { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.stage-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.stage-strip li { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 600; }
.stage-strip li.is-done { border-color: transparent; background: var(--success-soft); color: var(--success); }
.stage-strip li.is-current { border-color: transparent; background: var(--brand-blue); color: var(--on-primary); }
.order-hint { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.order-hint.is-warning { color: var(--warning); font-weight: 600; }
.order-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.order-figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.order-figure > span { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
/* Без overflow-wrap: anywhere — с ним число рвалось посередине
   («369 600 000,0 / 0 UZS»). Разряды разделены неразрывным пробелом, так что
   перенос возможен только перед валютой. */
.order-figure > strong { color: var(--heading); font-size: 17px; font-variant-numeric: tabular-nums; }
.order-figure > small { color: var(--muted); font-size: 12px; }
.order-figure.is-warning { background: var(--surface-warning); }
.order-figure.is-warning > strong { color: var(--warning); }
.order-lines th, .order-lines td { padding: 8px 10px; }
.order-lines .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-lines td .form-control { min-width: 110px; }
.order-lines td:first-child .form-control { min-width: 220px; }
.order-lines .line-delete { width: 1%; text-align: center; }
.order-lines .line-delete input { width: auto; min-width: 0; min-height: 0; }
.line-add { margin: 8px 0 4px; }
.order-main-fields { margin-top: 12px; }
.order-comment { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.order-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: start; }
.free-payments { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.free-payments .help-text { margin: 0; font-size: 13px; }
.free-payment { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.comment-row { display: flex; gap: 8px; margin-bottom: 12px; }
.comment-row .form-control { flex: 1 1 auto; min-width: 0; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.timeline.compact { gap: 10px; }
@media (max-width: 960px) {
  .order-columns { grid-template-columns: minmax(0, 1fr); }
}

/* Доска и карточка задачи (2026-10-05, «оптимизировать интерфейсы … больше
   свободы»). На карточке доски без разворота — одна строка: приоритет,
   исполнитель, срок (красным, если прошёл), чек-лист «2/5» и число
   комментариев. Значки — из того же набора, что и в меню. */
.task-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.task-card-meta .badge { padding: 2px 8px; font-size: 11px; }
.task-card-who { color: var(--ink); font-weight: 600; }
.task-card-due.is-overdue { color: var(--danger); font-weight: 700; }
.task-card-count { display: inline-flex; align-items: center; gap: 3px; }
.task-card-count.is-complete { color: var(--success); }
.meta-icon { flex: 0 0 auto; }
.task-title-text { color: var(--heading); }
/* Галочка «Проверить перед закрытием» стоит в одном ряду с полями — по
   нижнему краю, вровень с ними (над полями у остальных — подпись). */
.compact-form .task-check { min-height: 38px; margin-top: 21px; font-size: 14px; }
.task-row-form { margin: 10px 0 0; }
.task-row-form input[type="file"] { flex: 1 1 auto; min-width: 0; font-size: 13px; }
/* Первая форма в меню «Ещё» — без черты сверху: над ней ничего нет. */
.action-menu-body > .action-menu-form:first-child { padding-top: 0; border-top: 0; }
.task-feed-comment > strong { color: var(--heading); }
.task-feed-move > strong, .task-feed-change > strong, .task-feed-created > strong { color: var(--muted); font-weight: 600; font-size: 13px; }
@media (max-width: 600px) {
  .compact-form .task-check { margin-top: 0; }
}

/* Склад и производство (2026-10-05, «интерфейс очень сложный, при этом логика
   работы довольно простая»): склад одной таблицей, журнал смен одной строкой
   на смену, смена одной формой. Цвета — только из палитры. */
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.stock-table th, .stock-table td { padding: 8px 10px; }
.stock-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock-table td.num .cell-sub { white-space: normal; }
.stock-table td > a { font-weight: 600; color: var(--heading); }
.stock-table .stock-group th { background: var(--surface-2); color: var(--heading); font-size: 13px; text-transform: none; letter-spacing: 0; }
.stock-table .stock-group th span { margin-left: 8px; color: var(--muted); font-weight: 500; }
.history-table td { font-size: 14px; }

.field-caption { display: block; margin-bottom: 4px; color: var(--navy); font-size: 13px; font-weight: 650; }
.seg-choice { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.seg-option { position: relative; display: inline-flex; align-items: center; min-height: 30px; padding: 0 16px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.seg-option input { position: absolute; opacity: 0; pointer-events: none; }
.seg-option:has(input:checked) { background: var(--primary-bg); color: var(--on-primary); }
.seg-option:has(input:focus-visible) { outline: 2px solid var(--brand-cyan); outline-offset: 1px; }
.product-spec { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 8px; }
.spec-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spec-caption { color: var(--muted); font-size: 11px; }
.material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 14px; }
.material-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.material-cell > label { color: var(--navy); font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.material-cell .help-text { margin: 0; }
.output-rows { display: grid; gap: 8px; }
.output-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px; }
.output-head { color: var(--muted); font-size: 12px; font-weight: 600; }
.output-note { grid-column: 1 / -1; margin: 0; }
.shift-row { align-items: flex-start; }
/* Выше по специфичности, чем общее .list-row > span:first-child { flex: 1 1 auto }:
   иначе колонка даты растягивалась и строки журнала съезжали. */
.list-row.shift-row > .shift-when { flex: 0 0 120px; }
.list-row.shift-row > .shift-what { flex: 1 1 auto; display: grid; gap: 2px; font-size: 14px; }
/* Погашенное поле (плотность у глыбы, модуль в строке «как «Что варим»») —
   заметно бледнее, чтобы было видно: туда не вписывают. */
.shift-form .form-control:disabled { background: var(--surface-2); opacity: .45; cursor: not-allowed; }
.shift-what small { margin: 0; }
.shift-label { color: var(--muted); }
.shift-row.is-cancelled .shift-what > span { color: var(--muted); text-decoration: line-through; }
.inventory-reason { max-width: 420px; margin: 10px 0; }
.count-cell .form-control { max-width: 170px; }
.period-field { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 600px) {
  .product-spec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .product-spec > select { grid-column: 1 / -1; }
  .output-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid var(--line); }
  .output-head { display: none; }
  .output-row > .output-cell:first-of-type { grid-column: 1 / -1; }
  /* Без строки подписей над строками выгрузки подпись нужна у каждого поля. */
  .output-cell > label.visually-hidden { position: static; width: auto; height: auto; margin: 0 0 2px; overflow: visible; clip: auto; white-space: normal; display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
  .shift-row { flex-wrap: wrap; }
  .list-row.shift-row > .shift-when { flex-basis: 100%; }
}

/* Перестановка карточек вверх-вниз (2026-10-05): пока карточку тащат, линия
   показывает, куда она встанет. Линия лежит поверх списка, а не между
   карточками, — иначе список прыгал бы при каждом её сдвиге. */
.kanban-cards { position: relative; }
.kanban-drop-marker { position: absolute; z-index: 2; left: 4px; right: 6px; height: 3px; border-radius: 3px; background: var(--brand-blue); pointer-events: none; }

/* «Заказы в производстве» на вкладке «План под заказы» (2026-10-05): заказ,
   что осталось отгрузить, и кнопка следующего шага справа. */
.list-row.production-order { align-items: flex-start; }
.production-order-main small { margin-top: 3px; }
.production-order-actions { flex-wrap: wrap; justify-content: flex-end; }
.production-order-actions .inline-edit > form { min-width: 260px; }
/* Финансы одной страницей (2026-10-06): строки записей ленты, «фишки»
   выбора в короткой форме расхода, полоски «куда ушли деньги». */
.money-row { align-items: flex-start; }
.money-row.has-question { box-shadow: inset 3px 0 0 var(--warning); padding-left: 10px; border-radius: 0; }
.money-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.money-row-main > a { color: var(--heading); }
.money-row-main small { margin-top: 0; }
.money-row-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.money-row-chips:empty { display: none; }
.money-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.money-amount { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--heading); }
.money-amount.money-income { color: var(--success); }
.money-amount.is-void { color: var(--muted); text-decoration: line-through; }
.money-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.chip-choice { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-option { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--heading); font-size: 14px; font-weight: 600; cursor: pointer; }
.chip-option input { position: absolute; opacity: 0; pointer-events: none; }
.chip-option:has(input:checked) { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--on-primary); }
.chip-option:has(input:focus-visible) { outline: 2px solid var(--brand-cyan); outline-offset: 1px; }
.quick-money-form input[name="amount"] { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.spend-row > span:first-child { display: flex; flex-direction: column; gap: 6px; }
.spend-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.spend-bar > span { display: block; height: 100%; background: var(--brand-blue); }
@media (max-width: 760px) {
  .money-row { flex-wrap: wrap; }
  .money-row-side { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .money-row-actions { flex-wrap: nowrap; }
}
.comment-row .button { white-space: nowrap; }
.recount-input { max-width: 220px; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.quick-money-form .field-caption { font-size: 14px; }
/* Окно короткой формы денег (2026-10-07, «трату — окном, а не отдельной
   страницей»): то же окно, что у карточек досок, только узкое. Просьбы о
   деньгах: «Выдать» одной кнопкой, «Отказать» с причиной. */
.card-modal.is-form .card-modal-window { width: min(620px, 100%); }
.card-modal.is-form .card-modal-tools { justify-content: space-between; }
.modal-form-heading { font-size: 17px; color: var(--heading); }
.card-modal.is-form .order-subtitle { margin-top: 0; }
.card-modal.is-form .quick-money-form { margin: 0; }
.modal-form-problem { margin-bottom: 12px; }
.request-row { align-items: flex-start; flex-wrap: wrap; }
.request-row > .request-main { flex: 1 1 260px; }
.request-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.request-issue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.request-issue .form-control, .request-decline .form-control { min-height: 36px; padding-top: 5px; padding-bottom: 5px; font-size: 14px; }
.request-issue .request-amount { width: 140px; text-align: right; font-variant-numeric: tabular-nums; }
.request-issue select.form-control { width: auto; min-width: 150px; }
.request-decline > summary { list-style: none; }
.request-decline > summary::-webkit-details-marker { display: none; }
.request-decline[open] > form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.request-decline[open] > form .form-control { width: min(280px, 100%); }
.request-result { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.badge.muted { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.money-reminder { margin: 0 0 14px; }
.money-reminder a { font-weight: 700; }
.month-export { margin-top: -4px; }
@media (max-width: 760px) {
  .request-actions, .request-issue { width: 100%; }
  .request-issue .request-amount { flex: 1 1 120px; width: auto; }
}
/* «Согласования» (2026-10-07): дело — строка с решением прямо в ней. */
.decision-row { flex-wrap: wrap; align-items: flex-start; }
/* .list-row.decision-row — сильнее общего .list-row > span:first-child
   { flex: 1 1 auto }: иначе описание занимало строку целиком и значок
   «ждёт N дн.» уезжал под него. */
.list-row.decision-row > .request-main { flex: 1 1 320px; }
.decision-row > .request-actions { flex: 1 1 100%; }
.decision-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; }
.decision-side form { display: inline-flex; }
/* Сильнее .list-rows.compact .list-row { padding: 10px 0 }: иначе текст прилипал к полосе. */
.list-rows .list-row.decision-row.is-overdue { box-shadow: inset 3px 0 0 var(--warning); padding-left: 12px; border-radius: 0; }
.badge.success { background: var(--success-soft); color: var(--success); }
.request-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.request-banner-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Склад (2026-10-07): «Требует внимания» — сверху вкладки «Остатки»; у строки
   своя кнопка, полоса слева — насколько срочно. */
.attention-panel .panel-header { margin-bottom: 4px; }
.list-rows .list-row.attention-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-left: 12px; border-radius: 0; }
.list-rows .list-row.attention-row.is-danger { box-shadow: inset 3px 0 0 var(--danger); }
.list-rows .list-row.attention-row.is-warning { box-shadow: inset 3px 0 0 var(--warning); }
.list-row.attention-row > .attention-text { flex: 1 1 320px; font-size: 14px; }
.list-row.attention-row > .button { flex: 0 0 auto; }

/* Смена по переделам: блоки рядом на широком экране, друг под другом — на узком. */
.shift-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.shift-head .form-field { margin: 0; }
.check-field { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-height); font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer; }
.check-field input { width: 18px; height: 18px; }
.stage-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 16px; align-items: start; }
.stage-block .panel-header { flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.stage-target { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.stage-target > .spec-caption { align-self: center; font-size: 12px; font-weight: 600; }
.stage-target .spec-field .form-control { width: 96px; }
.stage-block .output-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-block .output-rows.with-density .output-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage-block .output-rows.other-outputs .output-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.stage-block .output-cell > label { display: block; margin: 0 0 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.stage-block .output-cell > label small { font-weight: 500; }
.shift-form.is-idle .stage-blocks { opacity: .4; pointer-events: none; }
.shift-missing a { font-weight: 700; }
/* Уведомления одной страницей (2026-10-07): «Требует внимания» сверху,
   новое по дням с разделами и строкой «×N» вместо повторов. */
.list-rows .list-row.attention-row.is-info { box-shadow: inset 3px 0 0 var(--info-border); }
.attention-more { margin-top: 4px; }
.attention-more > summary { padding: 8px 12px; color: var(--brand-blue); font-size: 14px; font-weight: 600; cursor: pointer; }
.notification-topics { margin-bottom: 6px; }
.notification-day { margin: 16px 0 2px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.notification-topics + .notification-day, .panel-header + .notification-day { margin-top: 4px; }
.list-rows .list-row.notification-row { justify-content: flex-start; padding-left: 12px; padding-right: 12px; }
.list-row.notification-row > .badge { flex: 0 0 auto; min-width: 74px; justify-content: center; }
.list-row.notification-row > .notification-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.list-row.notification-row > .notification-time { flex: 0 0 auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.notification-repeat { display: inline; margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
@media (max-width: 760px) {
  .list-rows .list-row.notification-row { flex-wrap: wrap; gap: 6px 10px; }
  .list-row.notification-row > .badge { min-width: 0; }
  .list-row.notification-row > .notification-main { flex-basis: 100%; order: 3; }
}
/* Уведомления в Telegram (2026-10-08). */
.telegram-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.telegram-row > .telegram-text { flex: 1 1 320px; min-width: 0; }
.telegram-row strong, .telegram-row small { display: block; }
.telegram-row small { margin-top: 4px; color: var(--muted); }
.telegram-row + .telegram-people { margin-top: 12px; }
/* Заявки с сайта — своей колонкой; настройки уведомлений (2026-10-08). */
.notification-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 18px; align-items: start; margin-bottom: 20px; }
.notification-columns > .panel { margin-bottom: 0; }
.leads-column .panel-header h2 { display: inline-flex; align-items: center; gap: 8px; }
.list-rows .list-row.lead-row { align-items: flex-start; }
@media (max-width: 1100px) {
  .notification-columns { grid-template-columns: minmax(0, 1fr); }
  .notification-columns > .leads-column { order: -1; }
}
.list-row.setting-row { flex-wrap: wrap; gap: 8px 16px; }
.list-row.setting-row > .setting-main { flex: 1 1 260px; min-width: 0; }
.setting-choice { flex: 0 1 auto; }
.setting-choice .chip-option { min-height: 34px; padding: 0 12px; font-size: 13px; }
.filter-bar > .settings-person { flex: 0 0 auto; align-self: center; font-weight: 600; color: var(--heading); }
/* Позиции и файлы заказа (2026-10-08): «✕» у строки позиции вместо
   незаметной галочки, у файла — «Открыть», «Скачать», «Удалить». */
.line-delete-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-height: 0; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.line-delete-button:hover, .line-delete-button:focus-visible {
  color: var(--danger); border-color: var(--danger); background: var(--danger-soft);
}
.list-row.file-row { flex-wrap: wrap; }
.file-row > a { flex: 1 1 220px; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.file-row > a:hover strong { text-decoration: underline; }
.file-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 6px; }
.file-actions form { margin: 0; }
/* Прокрутка доски мышью, как в Trello (2026-10-08): свободное место доски
   «берётся» рукой. Прилипание к столбцам на время прокрутки выключено —
   иначе оно возвращало бы доску назад (та же причина, что при переносе
   карточки). */
.kanban-board.is-pannable { cursor: grab; }
body.is-kanban-panning, body.is-kanban-panning * { cursor: grabbing !important; }
body.is-kanban-panning { user-select: none; }
body.is-kanban-panning .kanban-board { scroll-snap-type: none; }
/* Прилипание к столбцам — только на сенсорных экранах, где доску листают
   пальцем. С мышью доска остаётся там, где её отпустили, как в Trello: иначе
   после прокрутки она отъезжала к ближайшему столбцу. */
@media (pointer: fine) { .kanban-board { scroll-snap-type: none; } }
/* Главный экран — свой у каждого (2026-10-08): кнопки действий в шапке,
   плитки с короткими суммами, этапы заказов строкой, списки в две колонки. */
.home-heading { align-items: center; }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.home-tiles .stat-card { gap: 6px; padding: 16px 18px; }
.home-tiles .stat-card strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.home-tiles .stat-card small { color: var(--muted); font-size: 13px; }
.home-tiles .stat-card.warning strong { color: var(--warning); }
.home-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 20px; }
.home-stages-label { color: var(--muted); font-size: 13px; margin-right: 2px; }
.home-stage { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 13px; }
.home-stage:hover { text-decoration: none; border-color: var(--line-strong); }
.home-stage b { font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
.home-stage.is-warning { background: var(--surface-warning); border-color: var(--warning-border); }
.home-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; margin-bottom: 20px; align-items: start; }
.home-columns > .panel { margin-bottom: 0; }
.home-row > a { flex: 1 1 auto; min-width: 0; color: inherit; }
.home-row > a strong { overflow-wrap: anywhere; }
.home-row-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.home-late { color: var(--danger); }
@media (max-width: 760px) {
  /* На телефоне кнопки и плитки — по две в ряд: столбцом экран выходил
     длиной в три прокрутки. */
  .home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .home-actions .button { width: 100%; }
  .stats-grid.home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-tiles .stat-card { padding: 12px 14px; }
  .home-tiles .stat-card strong { font-size: 20px; }
  .list-row.home-row { flex-wrap: wrap; }
  .home-row-side { width: 100%; justify-content: space-between; }
}
/* Главная в мини-приложении Telegram (2026-10-08): крупные кнопки главных
   действий и «Нужно сделать» (core.home.build_app, core/home_app.html).
   Кнопки — по две в ряд, нечётная последняя — во всю ширину. Цвет значка
   подсказывает, что за действие: деньги пришли, деньги ушли, заказ, задача. */
.mini-home { display: grid; gap: 22px; max-width: 640px; }
.mini-home-head h1 { margin: 0; color: var(--heading); font-size: 24px; line-height: 1.2; text-wrap: balance; }
.mini-home-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.mini-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini-actions > .mini-action:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mini-action {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px;
  min-height: 112px; padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow-card); color: var(--heading); text-decoration: none;
  -webkit-user-select: none; user-select: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.mini-action:hover { text-decoration: none; border-color: var(--hover-border); box-shadow: var(--shadow-card-hover); }
.mini-action:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.mini-action-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--blue-soft); color: var(--brand-blue); }
.mini-action-label { font-size: 16px; font-weight: 700; line-height: 1.25; }
.mini-action.is-payment .mini-action-icon { background: var(--success-soft); color: var(--success); }
.mini-action.is-expense .mini-action-icon { background: var(--warning-soft); color: var(--warning); }
.mini-action.is-task .mini-action-icon { background: var(--suspended-soft); color: var(--suspended-text); }
.mini-action:active, .mini-task:active { opacity: .7; }
.mini-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mini-section-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--heading); font-size: 18px; }
.mini-section-head > a { font-size: 14px; font-weight: 600; }
.mini-count {
  min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--blue-soft); color: var(--brand-blue);
  font-size: 13px; font-weight: 700; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums;
}
.mini-task-list { display: grid; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.mini-task { display: grid; gap: 4px; min-height: 56px; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.mini-task:first-child { border-top: 0; }
.mini-task:hover { text-decoration: none; background: var(--row-hover); }
/* Просроченная — красная полоса слева и красный срок. */
.mini-task.is-overdue { box-shadow: inset 3px 0 0 var(--danger); }
.mini-task.is-overdue .mini-task-due { color: var(--danger); font-weight: 600; }
.mini-task-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  color: var(--heading); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
}
.mini-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 13px; }
.mini-task-client { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mini-more { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; }
.mini-empty { margin: 0; padding: 20px 16px; border: 1px dashed var(--line-strong); border-radius: 16px; color: var(--muted); text-align: center; }
/* Карточка в архиве доски (2026-10-08): плашка с кнопкой «Вернуть на доску». */
.board-archived { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.board-archived form { margin: 0; }
.kanban-card .badge.archived-badge { margin-left: 6px; }
/* Мини-приложение в Telegram на весь экран (2026-10-08). Страница уходит под
   строку состояния телефона и под кнопки Telegram «Закрыть» и «⋯». Сколько они
   занимают, сообщает сам Telegram, а static/js/telegram-app.js кладёт это в
   --tg-top и --tg-bottom. Вне Telegram класса tg-app нет — ничего не меняется. */
html.tg-app { --tg-top: 0px; --tg-bottom: 0px; }
html.tg-app body { padding-top: var(--tg-top); padding-bottom: var(--tg-bottom); }
html.tg-app body::before { content: ""; position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--tg-top); background: var(--topbar-bg); backdrop-filter: blur(10px); pointer-events: none; }
html.tg-app .app-shell { min-height: calc(100vh - var(--tg-top) - var(--tg-bottom)); }
html.tg-app .topbar, html.tg-app .sidebar, html.tg-app .sidebar-backdrop { top: var(--tg-top); }
html.tg-app .card-modal { padding-top: calc(var(--tg-top) + 10px); padding-bottom: calc(var(--tg-bottom) + 10px); }
html.tg-app .card-modal-window { max-height: max(320px, calc(100vh - 20px - var(--tg-top) - var(--tg-bottom))); }
html.tg-app .kanban-notice { top: calc(var(--tg-top) + var(--notice-top, 82px)); }
html.tg-app .chat-notice { bottom: calc(var(--tg-bottom) + 20px); }
html.tg-app .bulk-bar.floating { bottom: calc(var(--tg-bottom) + 14px); }
html.tg-app .kanban-column { max-height: max(320px, calc(100vh - 190px - var(--tg-top) - var(--tg-bottom))); }
html.tg-app .chat-stream { max-height: max(320px, calc(100vh - 420px - var(--tg-top) - var(--tg-bottom))); }
@media (max-width: 760px) {
  html.tg-app .kanban-column { max-height: max(320px, calc(100vh - 150px - var(--tg-top) - var(--tg-bottom))); }
}
/* Телефон и мини-приложение: как приложение, а не сайт (2026-10-08). Заказчик:
   «работает как сайт, там увеличение, съезжает немного страница». */

/* Без увеличения. iPhone сам увеличивает страницу, если нажать в поле со
   шрифтом мельче 16 px, — и страница остаётся увеличенной и съезжает вбок. На
   сенсорных экранах поля не мельче 16 px. !important — потому что компактные
   формы (фильтры, карточки) задают 14 px своими правилами. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px !important; }
  .quick-money-form input[name="amount"] { font-size: 20px !important; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }

/* Наведение мыши на сенсорном экране «залипает» после касания — кнопки не
   подпрыгивают. */
@media (hover: none) {
  .button.primary:hover, .stat-card:hover, .quick-action:hover { transform: none; }
}

/* Меню «Ещё» на телефоне выезжает снизу во всю ширину, как в приложениях.
   Выпадающим списком оно уходило за правый край, и страница съезжала вбок.
   Касание по затемнению закрывает меню (static/js/menus.js). */
@media (max-width: 760px) {
  .action-menu[open]::before { content: ""; position: fixed; inset: 0; z-index: 79; background: var(--overlay); }
  .action-menu[open] > .action-menu-body {
    position: fixed; z-index: 80; inset: auto 8px calc(8px + var(--tg-bottom, 0px)) 8px; width: auto;
    max-height: calc(100vh - 96px - var(--tg-top, 0px) - var(--tg-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 16px; border-radius: 18px; box-shadow: 0 -16px 48px rgba(5, 0, 31, .3);
  }
  .action-menu-body > a { display: flex; align-items: center; min-height: 44px; }
}

/* Мини-приложение в Telegram: страница не «тянется» за край, касание не даёт
   серой вспышки, надписи на кнопках и в меню не выделяются долгим нажатием,
   нажатая кнопка видна сразу. */
html.tg-app, html.tg-app body { overscroll-behavior: none; }
html.tg-app body { overflow-x: clip; }
html.tg-app :is(a, button, summary, label, .button) { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html.tg-app :is(.sidebar, .topbar, button, .button, summary, .segment-tab, .kanban-column-header, .main-nav a) { -webkit-user-select: none; user-select: none; }
html.tg-app :is(.button, button, .stat-card, .quick-action, .segment-tab, .main-nav a):active { opacity: .7; }

/* Плавность, как в приложениях на телефоне (2026-10-09, заказчик: «резкость
   переключения, затыки… чтобы не было так с глазами»):
   - между экранами новый чуть выезжает справа и проявляется, старый уходит
     влево и гаснет; «Назад» — наоборот (data-nav="back" ставит скрипт в
     head). Нижняя панель разделов стоит на месте. Работает на iPhone с
     iOS 18.2 и на Android с новым Chrome;
   - где браузер так не умеет (no-vt) — новый экран мягко проявляется;
   - окна снизу выезжают, затемнение проявляется; окно карточки поднимается,
     загруженная карточка проявляется вместо резкой подмены;
   - пока грузится следующий экран — тонкая полоса сверху (app-shell.js).
   Коротко, 0,2–0,26 с: анимация не должна задерживать работу. Кто просил у
   телефона меньше движения — без анимаций. */
@keyframes page-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes page-out { to { opacity: 0; transform: translateX(-12px); } }
@keyframes page-in-back { from { opacity: 0; transform: translateX(-24px); } }
@keyframes page-out-back { to { opacity: 0; transform: translateX(12px); } }
@keyframes soft-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes window-up { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes loading-bar { from { transform: scaleX(.04); } to { transform: scaleX(.92); } }
.page-loading {
  position: fixed; z-index: 130; top: var(--tg-top, 0px); left: 0; width: 100%; height: 3px; border-radius: 0 3px 3px 0;
  background: var(--brand-blue); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none;
}
.page-loading.is-running { opacity: 1; animation: loading-bar 2.8s cubic-bezier(.08, .7, .2, 1) forwards; }
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .tabbar { view-transition-name: tabbar; }
  ::view-transition-old(root) { animation: page-out .2s ease-in both; }
  ::view-transition-new(root) { animation: page-in .26s cubic-bezier(.2, .8, .2, 1) both; }
  html[data-nav="back"]::view-transition-old(root) { animation-name: page-out-back; }
  html[data-nav="back"]::view-transition-new(root) { animation-name: page-in-back; }
  html.no-vt .content { animation: soft-in .22s ease-out both; }
  .card-modal:not([hidden]) { animation: soft-in .18s ease-out; }
  .card-modal:not([hidden]) .card-modal-window { animation: window-up .26s cubic-bezier(.2, .8, .2, 1); }
  .card-modal-body.is-fresh { animation: soft-in .2s ease-out; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .action-menu[open] > .action-menu-body, .filter-bar.compact.is-sheet.is-open { animation: sheet-up .26s cubic-bezier(.2, .8, .2, 1); }
  .action-menu[open]::before, .sheet-backdrop, .sidebar-backdrop.open { animation: soft-in .2s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .page-loading.is-running { animation: none; transform: scaleX(.6); }
}
/* Телефон: каркас приложения (заказчик 2026-10-08: «оно должно работать как
   приложение»). Внизу — панель разделов (core/shell.py), «Ещё» — то же
   боковое меню, только листом снизу. Верхней полосы нет: шапка — заголовок
   самой страницы. Фильтры — в окне, над доской — лента этапов, кнопки — под
   палец. Только до 760 px: на компьютере всё как было. Поведение —
   static/js/app-shell.js. */
.tabbar, .sheet-grabber, .sheet-user { display: none; }
@media (max-width: 760px) {
  :root {
    --tabbar-h: 58px;
    --app-bottom: max(var(--tg-bottom, 0px), env(safe-area-inset-bottom, 0px));
    --sidebar-width: 100%;
    --notice-top: 12px;
  }

  /* Нижняя панель разделов. */
  html body:has(> .tabbar) { padding-bottom: calc(var(--tabbar-h) + var(--app-bottom)); }
  .tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    height: calc(var(--tabbar-h) + var(--app-bottom)); padding: 0 4px var(--app-bottom);
    border-top: 1px solid var(--line); background: var(--topbar-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .tabbar-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0;
    padding: 6px 2px 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; font-weight: 600;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  }
  .tabbar-item:hover { text-decoration: none; }
  .tabbar-item.active { color: var(--brand-blue); }
  .tabbar-icon { width: 24px; height: 24px; }
  .tabbar-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar-badge {
    position: absolute; top: 4px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  }
  html.is-typing .tabbar { display: none; }
  html.is-typing body:has(> .tabbar) { padding-bottom: var(--app-bottom); }

  /* Верхней полосы нет — шапка экрана это заголовок самой страницы. Полоса
     под строкой состояния телефона — цвета страницы, а не белая. */
  .topbar { display: none; }
  html.tg-app body::before { background: color-mix(in srgb, var(--background) 92%, transparent); }
  .main-area, :root[data-sidebar] .main-area { margin-left: 0; }
  .content { padding: 12px 14px 20px; }
  .kanban-notice { top: calc(var(--tg-top, 0px) + 12px); }

  /* «Ещё» — боковое меню листом снизу. */
  :root .sidebar, :root.tg-app .sidebar, :root .has-environment-banner .sidebar {
    inset: auto 0 0 0; height: auto; max-height: calc(100vh - var(--tg-top, 0px) - 48px); padding: 8px 12px calc(14px + var(--app-bottom));
    border-radius: 20px 20px 0 0; overflow-y: auto; overscroll-behavior: contain; z-index: 90;
    transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -16px 48px rgba(5, 0, 31, .35);
  }
  :root .sidebar.open, :root.tg-app .sidebar.open { transform: translateY(0); }
  :root .sidebar-backdrop, :root.tg-app .sidebar-backdrop { top: 0; z-index: 89; }
  .sidebar .brand, .sidebar .sidebar-footer { display: none; }
  .sheet-grabber { display: block; width: 40px; height: 5px; margin: 2px auto 10px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
  .sheet-user { display: flex; align-items: center; gap: 12px; margin: 0 4px 6px; padding: 4px 4px 12px; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff; }
  .sheet-user strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sheet-user form { margin: 0; }
  .sheet-user .link-button { min-height: 40px; color: #ffd6d6; font-weight: 600; }
  .sheet-user .theme-toggle { width: 40px; height: 40px; }
  .main-nav a { min-height: 48px; }

  /* Фильтры — в окне снизу; на месте остаются поиск и «Фильтры». */
  .filter-bar.compact.is-sheet:not(.is-open) { flex-direction: row; flex-wrap: nowrap; align-items: center; }
  .filter-bar.compact.is-sheet:not(.is-open) > :not(.filter-search):not(.filters-toggle) { display: none; }
  .filter-bar.compact.is-sheet > .filter-search { flex: 1 1 auto; width: auto; min-width: 0; }
  .filter-bar.compact.is-sheet > .filters-toggle { flex: 0 0 auto; width: auto; white-space: nowrap; }
  .filters-toggle.is-chosen { border-color: var(--brand-blue); color: var(--brand-blue); }
  .filters-sheet-head { display: none; }
  .filter-bar.compact.is-sheet.is-open {
    position: fixed; inset: auto 0 0 0; z-index: 86; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px;
    max-height: calc(100vh - var(--tg-top, 0px) - 48px); margin: 0; padding: 14px 16px calc(16px + var(--app-bottom)); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 20px 20px 0 0; background: var(--surface); box-shadow: 0 -16px 48px rgba(5, 0, 31, .3);
  }
  .filter-bar.compact.is-sheet.is-open > .filters-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px; }
  .filter-bar.compact.is-sheet.is-open > .filters-toggle { display: none; }
  .sheet-backdrop { position: fixed; inset: 0; z-index: 85; background: var(--overlay); }

  /* Лента этапов над доской; доска — во весь остаток экрана. */
  .board-stages { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 -14px 8px; padding: 2px 14px 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .board-stages::-webkit-scrollbar { display: none; }
  .board-stage {
    flex: 0 0 auto; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
    color: var(--heading); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  }
  .board-stage.is-current { border-color: var(--brand-blue); background: var(--blue-soft); color: var(--brand-blue); }
  .kanban-board[style*="--board-room"] .kanban-column { max-height: var(--board-room); }
  [data-kanban-columns-toggle], [data-kanban-collapse-all], .kanban-column-toggle, .tabs-row .list-meta { display: none; }

  /* Кнопки и переключатели — под палец. */
  .button.small { min-height: 40px; }
  .segment-tab { min-height: 40px; }
  .kanban-collapse-toggle { width: 40px; height: 40px; }

  /* Главная кнопка формы — внизу экрана, над панелью разделов. */
  .form-actions {
    position: sticky; bottom: calc(var(--tabbar-h) + var(--app-bottom)); z-index: 5; flex-wrap: wrap;
    margin-top: 16px; padding: 10px 0; background: var(--surface);
  }
  html.is-typing .form-actions { bottom: var(--app-bottom); }
  .card-modal .form-actions { bottom: 0; }
  .form-actions .button.primary { flex: 1 1 100%; justify-content: center; }

  /* Подсказки и панели у нижнего края — над панелью разделов. */
  .chat-notice { bottom: calc(var(--tabbar-h) + var(--app-bottom) + 12px); }
  html.tg-app .chat-notice { bottom: calc(var(--tabbar-h) + var(--app-bottom) + 12px); }
  .bulk-bar.floating, html.tg-app .bulk-bar.floating { bottom: calc(var(--tabbar-h) + var(--app-bottom) + 10px); }
}

/* Мини-приложение в Telegram: меньше кнопок и надписей (2026-10-08, «меню
   слишком загромождено кнопочками… минимизировать телодвижения»). На виду —
   главная кнопка экрана и «⋯», куда static/js/app-shell.js переносит
   остальные; вкладки — одной строкой; на досках — лента этапов вместо
   заголовков столбцов, без пустых этапов и без значков на карточках.
   Карточки задачи, заказа и компании там же короче — без полей правки
   (шаблоны, флаг in_telegram). Только внутри Telegram и на узком экране. */
.mini-contacts { display: grid; gap: 8px; margin: 4px 0 12px; }
.mini-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.mini-contact > span { display: grid; gap: 2px; min-width: 0; }
.mini-contact strong { color: var(--heading); overflow-wrap: anywhere; }
.mini-contact small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.mini-contact .button { flex: 0 0 auto; }
.mini-company-data > summary { font-weight: 600; }
/* Позиции заказа для правки на телефоне — карточками (2026-10-08): сверху
   продукция во всю ширину, ниже количество, единица, цена и «✕», у каждого
   поля подпись. Таблицу в пять столбцов приходилось листать вбок — в том
   числе в «Новом заказе», одной из четырёх кнопок главной мини-приложения. */
@media (max-width: 760px) {
  #order-lines, #order-lines tbody { display: block; min-width: 0; }
  #order-lines thead { display: none; }
  #order-lines tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 34px; gap: 8px;
    align-items: end; padding: 10px 0; border-bottom: 1px solid var(--line);
  }
  #order-lines td { display: block; min-width: 0; padding: 0; border: 0; }
  #order-lines td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 12px; font-weight: 700; }
  #order-lines td:first-child { grid-column: 1 / -1; }
  #order-lines td .form-control, #order-lines td:first-child .form-control { width: 100%; min-width: 0; }
  #order-lines td.line-delete { grid-column: 4; grid-row: 2; align-self: center; width: auto; }
  #order-lines td.num { grid-row: 3; text-align: left; }
}
.mini-row { flex-wrap: nowrap; }
.mini-row > a:first-child { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; color: inherit; }
.mini-row > a:first-child:hover { text-decoration: none; }
.mini-row > a:first-child strong { color: var(--heading); overflow-wrap: anywhere; }
.mini-row > a:first-child small { color: var(--muted); font-size: 13px; }
.mini-row > .button { flex: 0 0 auto; }
@media (max-width: 760px) {
  /* «Ещё» — только разделы: тему ведёт Telegram, а выходить незачем —
     следующее открытие приложения всё равно войдёт заново. */
  html.tg-app .sheet-user { display: none; }

  /* Шапка экрана: название и кнопки одной строкой, если помещаются. */
  html.tg-app :is(.section-toolbar, .page-heading) { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
  html.tg-app .section-toolbar .section-title, html.tg-app .page-heading h1 {
    flex: 1 1 auto; min-width: 0; font-size: 21px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere;
  }
  html.tg-app .page-heading > div:first-child { flex: 1 1 auto; min-width: 0; }
  html.tg-app .page-heading p { margin-top: 2px; font-size: 13px; }
  html.tg-app :is(.section-toolbar, .page-heading) > .heading-actions {
    flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; width: auto; min-width: 0; margin-left: auto;
  }
  /* Кнопки шапки помещаются в ширину телефона: чуть уже, а если и так не
     влезают — надпись обрезается многоточием, страница вбок не уезжает. */
  html.tg-app .heading-actions > :is(a.button, form) { min-width: 0; }
  html.tg-app .heading-actions :is(a.button, form > .button) {
    min-width: 0; max-width: 100%; padding-left: 12px; padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html.tg-app .page-heading .heading-actions .button { width: auto; }
  /* В шапке только «⋯» — он стоит в строке названия, а не отдельной строкой. */
  html.tg-app :is(.section-toolbar, .page-heading):has(> .heading-actions > details.action-menu:only-child) { flex-wrap: nowrap; align-items: flex-start; }
  html.tg-app :is(.section-toolbar, .page-heading) > .heading-actions:has(> details.action-menu:only-child) { flex: 0 0 auto; }
  html.tg-app .heading-actions > form { margin: 0; }
  /* Главная кнопка занимает всё свободное место в строке — в неё проще
     попасть пальцем. */
  html.tg-app .heading-actions > a.button.primary, html.tg-app .heading-actions > form:has(> .button.primary) { flex: 1 1 auto; }
  html.tg-app .heading-actions > a.button.primary, html.tg-app .heading-actions > form > .button.primary { width: 100%; justify-content: center; }
  /* «Ещё» шапки — значок «⋯». */
  html.tg-app .heading-actions > .action-menu > summary.button { width: 40px; min-width: 40px; padding: 0; justify-content: center; font-size: 0; }
  html.tg-app .heading-actions > .action-menu > summary.button::before { content: "⋯"; font-size: 22px; line-height: 1; }
  html.tg-app .heading-actions > .action-menu > summary.button::after { content: none; }
  /* Кнопки-формы, перенесённые в «⋯», выглядят как пункты меню. */
  html.tg-app .action-menu-body > form.menu-item-form { margin: 0; }
  html.tg-app .action-menu-body > form.menu-item-form > button {
    display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none;
    box-shadow: none; color: var(--blue); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  }

  /* Вкладки — одной строкой, листаются вбок. */
  html.tg-app :is(.segment-tabs, .tabs-row) {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-left: -14px; margin-right: -14px; padding: 0 14px 2px;
  }
  html.tg-app :is(.segment-tabs, .tabs-row)::-webkit-scrollbar { display: none; }
  html.tg-app .tabs-row > .segment-tabs { margin: 0; padding: 0; overflow: visible; }
  html.tg-app :is(.segment-tab, .tabs-row > *) { flex: 0 0 auto; white-space: nowrap; }

  /* Доски: этапы — лентой сверху, без заголовков столбцов, пустых этапов и
     значков сворачивания и перетаскивания на карточках. */
  html.tg-app .kanban-column.is-empty-stage, html.tg-app .kanban-column-header, html.tg-app .kanban-card-tools { display: none; }

  /* Звонок: итоги — сеткой два на два, «Сохранить карточку» — ниже и
     неброско. В разметке она по-прежнему первая: её нажимает Enter в любом
     поле, иначе Enter записал бы итог звонка. */
  html.tg-app .call-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.tg-app .call-actions > .call-actions-label { display: none; }
  html.tg-app .call-actions > .button { width: 100%; justify-content: center; white-space: normal; line-height: 1.2; text-align: center; }
  html.tg-app .call-actions > .button.primary {
    order: 10; grid-column: 1 / -1; border-color: var(--line); background: var(--surface); color: var(--heading); box-shadow: none;
  }

  /* Сведения на карточке — в два столбца. */
  html.tg-app :is(.facts-row, .details-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  html.tg-app .details-grid > .wide { grid-column: 1 / -1; }

  /* Карточка заказа: этап и так виден рядом с номером. */
  html.tg-app .stage-strip { display: none; }
  html.tg-app .order-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.tg-app .order-figure { padding: 8px 12px; }
  html.tg-app .order-figure > strong { font-size: 15px; }

  /* Пояснения в шапках блоков и подсказки к полям внутри карточек. */
  html.tg-app .panel-header > small { display: none; }
  html.tg-app .panel small.help-text:not(.stacked-form small) { display: none; }
}