/* ============================================================================
   БитЛогистика — базовые UI-компоненты дизайн-системы.
   Требует design-system/tokens.css (подключать ПЕРЕД этим файлом).
   Только var(--bl-*) — ни одного хардкод-цвета/размера.

   ⚠️ КОЛЛИЗИЯ ИМЁН: классы .bl-card и .bl-badge также определены в старом
   assets/card.css (движок карточек CardRenderer) с ДРУГИМ смыслом.
   До миграции движка (docs/design-migration.md, этап «карточки») этот файл
   и card.css на одной странице не подключать.

   Состав: .bl-card, .bl-table, .bl-badge (+статусные модификаторы),
   .bl-kpi, .bl-report-header, .bl-toolbar, .bl-note.
   ========================================================================== */

/* ---------- Карточка-секция ---------- */
.bl-card {
	background: var(--bl-surface);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-card);
	box-shadow: var(--bl-shadow);
	padding: var(--bl-sp-4);
	color: var(--bl-text);
	font-family: var(--bl-font);
	font-size: var(--bl-fs-body);
	line-height: var(--bl-lh);
}
.bl-card, .bl-card * { box-sizing: border-box; }
.bl-card__head {
	display: flex;
	align-items: center;
	gap: var(--bl-sp-2);
	margin-bottom: var(--bl-sp-3);
}
.bl-card__title {
	font-size: var(--bl-fs-h4);
	font-weight: 700;
	margin: 0;
	flex: 1;
	min-width: 0;
}
.bl-card__icon {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: var(--bl-r-md);
	background: var(--bl-accent-soft);
	color: var(--bl-accent);
	display: grid;
	place-items: center;
}

/* ---------- Таблица ---------- */
/* Обёртка обязательна: широкая таблица скроллится внутри неё, не страницей. */
.bl-table-wrap { overflow-x: auto; }
.bl-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--bl-font);
	font-size: var(--bl-fs-body);
	color: var(--bl-text);
}
.bl-table th {
	text-align: left;
	font-size: var(--bl-fs-caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--bl-muted);
	padding: var(--bl-sp-2) var(--bl-sp-3);
	border-bottom: 1px solid var(--bl-border-strong);
	white-space: nowrap;
}
.bl-table td {
	padding: var(--bl-sp-2) var(--bl-sp-3);
	border-bottom: 1px solid var(--bl-border);
	vertical-align: top;
}
.bl-table tbody tr:hover { background: var(--bl-accent-soft); }
.bl-table tbody tr:last-child td { border-bottom: 0; }
.bl-table .num,
.bl-table td.num, .bl-table th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.bl-table--zebra tbody tr:nth-child(even) { background: var(--bl-surface-2); }

/* ---------- Бейдж статуса ---------- */
/* По умолчанию «мягкий»: цветной текст на мягком фоне (читается и в тёмной теме).
   Заливка целиком — модификатор --solid. */
.bl-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--bl-sp-1);
	padding: 2px 10px;
	border-radius: var(--bl-r-pill);
	font-family: var(--bl-font);
	font-size: var(--bl-fs-caption);
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	color: var(--bl-text-2);
	background: var(--bl-surface-2);
	border: 1px solid transparent;
}
/* Статусы процессов (единая карта, см. скилл bitlogistika-design) */
.bl-badge--progress  { color: var(--bl-st-progress);  background: var(--bl-st-progress-soft); }
.bl-badge--done      { color: var(--bl-st-done);      background: var(--bl-st-done-soft); }
.bl-badge--overdue   { color: var(--bl-st-overdue);   background: var(--bl-st-overdue-soft); }
.bl-badge--payment   { color: var(--bl-st-payment);   background: var(--bl-st-payment-soft); }
.bl-badge--cancelled { color: var(--bl-st-cancelled); background: var(--bl-st-cancelled-soft); }
/* Базовая семантика (для не-процессных состояний) */
.bl-badge--good   { color: var(--bl-good); background: var(--bl-good-soft); }
.bl-badge--bad    { color: var(--bl-bad);  background: var(--bl-bad-soft); }
.bl-badge--warn   { color: var(--bl-warn); background: var(--bl-warn-soft); }
.bl-badge--info   { color: var(--bl-info); background: var(--bl-info-soft); }
.bl-badge--accent { color: var(--bl-accent); background: var(--bl-accent-soft); }
.bl-badge--muted  { color: var(--bl-muted);  background: var(--bl-st-cancelled-soft); }
/* Сплошная заливка (текущий цвет берётся из статусного модификатора) */
.bl-badge--solid { background: currentColor; }
.bl-badge--solid > span { color: var(--bl-accent-contrast); }
/* Контурный (для печати/плотных таблиц) */
.bl-badge--outline { background: transparent; border-color: currentColor; }

/* ---------- KPI-плитки ---------- */
.bl-kpi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--bl-sp-3);
}
.bl-kpi__item {
	background: var(--bl-surface);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	padding: var(--bl-sp-3) var(--bl-sp-4);
	font-family: var(--bl-font);
	min-width: 0;
}
.bl-kpi__value {
	display: block;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--bl-text);
	font-variant-numeric: tabular-nums;
}
.bl-kpi__label {
	display: block;
	margin-top: 2px;
	color: var(--bl-muted);
	font-size: var(--bl-fs-sm);
}
.bl-kpi__delta { font-size: var(--bl-fs-sm); font-weight: 700; }
.bl-kpi__delta--up   { color: var(--bl-good); }
.bl-kpi__delta--down { color: var(--bl-bad); }
.bl-kpi__item--good    .bl-kpi__value { color: var(--bl-good); }
.bl-kpi__item--bad     .bl-kpi__value { color: var(--bl-bad); }
.bl-kpi__item--warn    .bl-kpi__value { color: var(--bl-warn); }
.bl-kpi__item--accent  .bl-kpi__value { color: var(--bl-accent); }

/* ---------- Шапка отчёта/страницы ---------- */
.bl-report-header {
	display: flex;
	align-items: baseline;
	gap: var(--bl-sp-3);
	flex-wrap: wrap;
	font-family: var(--bl-font);
	margin-bottom: var(--bl-sp-3);
}
.bl-report-header__title {
	font-size: var(--bl-fs-h3);
	font-weight: 800;
	color: var(--bl-text);
	margin: 0;
}
.bl-report-header__sub { color: var(--bl-muted); font-size: var(--bl-fs-body); }
.bl-report-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--bl-sp-2);
}

/* ---------- Тулбар (фильтры, поиск, действия) ---------- */
.bl-toolbar {
	display: flex;
	align-items: center;
	gap: var(--bl-sp-2);
	flex-wrap: wrap;
	font-family: var(--bl-font);
	font-size: var(--bl-fs-body);
}
.bl-toolbar__spacer { margin-left: auto; }
.bl-toolbar select,
.bl-toolbar input[type="text"],
.bl-toolbar input[type="search"],
.bl-toolbar input[type="date"] {
	height: 32px;
	padding: 0 var(--bl-sp-3);
	border: 1px solid var(--bl-border-strong);
	border-radius: var(--bl-r-md);
	background: var(--bl-surface);
	color: var(--bl-text);
	font: inherit;
	font-size: var(--bl-fs-body);
}
.bl-toolbar select:focus,
.bl-toolbar input:focus {
	outline: none;
	border-color: var(--bl-accent-bd);
	box-shadow: var(--bl-focus-ring);
}
/* Чип-фильтр (стадии, быстрые пресеты) */
.bl-toolbar__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--bl-sp-1);
	padding: 4px 12px;
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-pill);
	background: var(--bl-surface);
	color: var(--bl-text-2);
	font-size: var(--bl-fs-sm);
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}
.bl-toolbar__chip:hover { border-color: var(--bl-accent-bd); }
.bl-toolbar__chip--active {
	background: var(--bl-accent);
	border-color: var(--bl-accent);
	color: var(--bl-accent-contrast);
}

/* ---------- Примечание ---------- */
.bl-note {
	color: var(--bl-muted);
	font-size: var(--bl-fs-caption);
	line-height: var(--bl-lh);
}

/* ============================================================================
   ПОЛЕ, КНОПКА, ФОРМА, ПЛАШКА — атомы единой анатомии (docs/card-anatomy.md §6, §11).
   Добавлено 27.08.2026: до этого каждый модуль рисовал их сам (5 систем сеток,
   5 вариантов шапок, кнопки то сверху, то снизу — см. docs/design-audit.md).
   ========================================================================== */

/* ---------- Поле: значение доминирует над подписью (§6.2) ---------- */
.bl-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl-field__label {
	font-size: var(--bl-fs-caption);
	font-weight: 500;
	color: var(--bl-muted);
	line-height: 1.3;
}
.bl-field__value {
	font-size: var(--bl-fs-md);
	font-weight: 600;
	color: var(--bl-text);
	line-height: 1.35;
	word-break: break-word;
}
.bl-field--full { grid-column: 1 / -1; }
.bl-field--warn .bl-field__label { color: var(--bl-bad); font-weight: 700; }
/* поля ввода внутри поля */
.bl-field input[type="text"], .bl-field input[type="number"], .bl-field input[type="date"],
.bl-field input[type="datetime-local"], .bl-field input[type="password"],
.bl-field input[type="search"], .bl-field select, .bl-field textarea {
	width: 100%;
	min-height: 34px;
	padding: 6px var(--bl-sp-3);
	border: 1px solid var(--bl-border-strong);
	border-radius: var(--bl-r-md);
	background: var(--bl-surface);
	color: var(--bl-text);
	font: inherit;
	font-size: var(--bl-fs-body);
}
.bl-field textarea { min-height: 68px; resize: vertical; }
.bl-field input:focus, .bl-field select:focus, .bl-field textarea:focus {
	outline: none;
	border-color: var(--bl-accent-bd);
	box-shadow: var(--bl-focus-ring);
}
.bl-field__hint { font-size: var(--bl-fs-caption); color: var(--bl-muted); }
.bl-req { color: var(--bl-bad); }

/* ---------- Кнопка ---------- */
.bl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	padding: 0 var(--bl-sp-4);
	border: 1px solid var(--bl-border-strong);
	border-radius: var(--bl-r-md);
	background: var(--bl-surface);
	color: var(--bl-text);
	font: 600 var(--bl-fs-body)/1 var(--bl-font);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}
.bl-btn:hover { border-color: var(--bl-accent-bd); color: var(--bl-accent); }
.bl-btn:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
.bl-btn[disabled] { opacity: .55; cursor: default; }
.bl-btn--primary {
	background: var(--bl-accent); border-color: var(--bl-accent); color: var(--bl-accent-contrast);
}
.bl-btn--primary:hover { color: var(--bl-accent-contrast); filter: brightness(1.08); }
.bl-btn--danger { color: var(--bl-bad); }
.bl-btn--danger:hover { border-color: var(--bl-bad); color: var(--bl-bad); }
.bl-btn--muted { color: var(--bl-muted); }
.bl-btn--icon { width: 32px; padding: 0; font-size: 14px; }
.bl-btn--sm { height: 28px; padding: 0 var(--bl-sp-3); font-size: var(--bl-fs-sm); }

/* ---------- Форма: F1 шапка · F2 секции · F3 футер ---------- */
.bl-form {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--bl-sp-3);
	font-family: var(--bl-font);
	color: var(--bl-text);
}
.bl-form__head { display: flex; flex-direction: column; gap: 4px; }
.bl-form__title { margin: 0; font-size: var(--bl-fs-h3); font-weight: 700; }
.bl-form__sub { color: var(--bl-muted); font-size: var(--bl-fs-body); }
.bl-form__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
/* секция формы = контейнер карточки */
.bl-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bl-sp-3) var(--bl-sp-4); }
.bl-form__grid--single { grid-template-columns: 1fr; }
/* повторяемая запись (места, ТС, водители) */
.bl-form__item {
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-r-lg);
	padding: var(--bl-sp-3);
	background: var(--bl-surface-2);
}
.bl-form__item + .bl-form__item { margin-top: var(--bl-sp-2); }
.bl-form__item-head {
	display: flex; align-items: center; gap: var(--bl-sp-2);
	font-size: var(--bl-fs-sm); font-weight: 700; color: var(--bl-muted);
	margin-bottom: var(--bl-sp-2);
}
/* футер — ЕДИНСТВЕННОЕ место кнопок формы */
.bl-form__foot {
	display: flex; align-items: center; gap: var(--bl-sp-2); flex-wrap: wrap;
	padding-top: var(--bl-sp-3);
	border-top: 1px solid var(--bl-border);
}
.bl-form__foot .bl-btn--primary { order: 10; }
.bl-form__foot-sp { margin-left: auto; }
.bl-form__msg { font-size: var(--bl-fs-body); }
.bl-form__msg--ok { color: var(--bl-good); }
.bl-form__msg--err { color: var(--bl-bad); }

/* ---------- Плашка (сообщение/предупреждение) ---------- */
.bl-alert {
	border: 1px solid var(--bl-border);
	border-left: 3px solid var(--bl-accent);
	border-radius: 0 var(--bl-r-md) var(--bl-r-md) 0;
	background: var(--bl-accent-soft);
	color: var(--bl-text-2);
	padding: var(--bl-sp-3) var(--bl-sp-4);
	font-size: var(--bl-fs-body);
}
.bl-alert--good { border-left-color: var(--bl-good); background: var(--bl-good-soft); }
.bl-alert--warn { border-left-color: var(--bl-warn); background: var(--bl-warn-soft); }
.bl-alert--bad  { border-left-color: var(--bl-bad);  background: var(--bl-bad-soft); }
.bl-alert--muted { border-left-color: var(--bl-muted-2); background: var(--bl-surface-2); }

@media (max-width: 520px) {
	.bl-form__grid { grid-template-columns: 1fr; }
}