/* Карточка водителя — состав как в taxiCRM, вид как в панели ВНК ПРО.
   Правило простое: ничего своего там, где у системы уже есть рецепт.
   Карточки, кнопки, переключатели и пилюли берём системные, здесь остаётся
   только раскладка карточки и то, чего в системе нет.
   Всё заперто внутри #crmdriver. */

#crmdriver { --cd-gap: 16px; color: var(--ink); font-family: var(--font-ui); }

/* ───────── шапка раздела ───────── */
#crmdriver .online {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--muted); font-size: 12.5px; margin: 0 0 14px;
}
#crmdriver .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: var(--cd-gap); }
/* Кнопки системные (.btn, .btn-primary, .btn-ghost, .btn-sm) — свою форму
   не навязываем. Отмечаем только необратимые действия. */
#crmdriver .btn.danger { color: var(--bad); }
#crmdriver .btn.danger:hover { background: var(--bad-soft); }
#crmdriver .spacer { flex: 1; }

/* ───────── раскладка ───────── */
/* Своё имя вместо .row: в системе .row — строка списка, а не колонки. */
#crmdriver .cd-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--cd-gap); align-items: start; }
#crmdriver .cd-col { display: grid; gap: var(--cd-gap); align-content: start; min-width: 0; }
#crmdriver .cd-col-full { grid-column: 1 / -1; }
@media (max-width: 1280px) { #crmdriver .cd-row { grid-template-columns: 1fr; } }

/* ───────── карточка ───────── */
#crmdriver .box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-2); overflow: hidden;
}
#crmdriver .box-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--line-soft);
}
#crmdriver .box-title { font-size: 15px; font-weight: 700; letter-spacing: -.1px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
#crmdriver .box-body { padding: 20px; }

/* ───────── переключатели ───────── */
/* Рисунок системного .seg, чтобы на экране не было двух разных переключателей. */
#crmdriver .tabs {
  margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap;
  background: var(--surface-sunken); border-radius: var(--r-s); padding: 3px;
}
#crmdriver .tabs button {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  padding: 6px 13px; border-radius: var(--r-s); font-size: 12.5px; font-weight: 600;
  color: var(--muted); white-space: nowrap;
  transition: color var(--t-btn), background var(--t-btn), box-shadow var(--t-btn);
}
#crmdriver .tabs button:hover { color: var(--ink-2); }
#crmdriver .tabs button.on { background: var(--surface); color: var(--accent); box-shadow: var(--sh-1); }

/* Одиннадцать вкладок истории пилюлями ломались в три ряда — здесь подчёркивание
   и горизонтальная прокрутка, как у вкладок выдвижной панели. */
#crmdriver .tabs[data-group="hist"] {
  margin: 0 0 14px; background: none; padding: 0; border-radius: 0; gap: 2px;
  flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--line-soft);
}
#crmdriver .tabs[data-group="hist"] button {
  border-radius: 0; padding: 12px 12px 10px; font-size: 13px;
  border-bottom: 2px solid transparent;
}
#crmdriver .tabs[data-group="hist"] button.on {
  background: none; box-shadow: none; color: var(--accent-ink); border-bottom-color: var(--accent);
}

#crmdriver .tab-pane { display: none; }
#crmdriver .tab-pane.on { display: block; animation: cdIn var(--t-card) both; }
@keyframes cdIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ───────── данные: ключ — значение ───────── */
#crmdriver .subhead {
  font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 10px;
}
#crmdriver .subhead:first-child { margin-top: 0; }
#crmdriver .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }

#crmdriver .field label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
#crmdriver .field input,
#crmdriver .field select,
#crmdriver .field textarea {
  width: 100%; height: 36px; padding: 0 11px; font-size: 13.5px; font-family: inherit;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-s);
  transition: border-color var(--t-btn), box-shadow var(--t-btn);
}
#crmdriver .field textarea { height: auto; min-height: 92px; padding: 10px 11px; line-height: 1.55; resize: vertical; }
#crmdriver .field input:focus,
#crmdriver .field select:focus,
#crmdriver .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Поле только для чтения не должно выглядеть как приглашение набрать текст. */
#crmdriver .field input:disabled,
#crmdriver .field select:disabled,
#crmdriver .field textarea:disabled {
  background: var(--surface-sunken); border-color: transparent;
  color: var(--ink-2); opacity: 1; cursor: default;
}
#crmdriver .field select:disabled { appearance: none; -webkit-appearance: none; }
#crmdriver .field input::placeholder, #crmdriver .field textarea::placeholder { color: var(--faint); }
#crmdriver .box-body .field + .field,
#crmdriver .box-body .grid2 + .field,
#crmdriver .box-body .field + .grid2 { margin-top: 12px; }

#crmdriver .check { display: flex; align-items: flex-start; gap: 9px; margin: 9px 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
#crmdriver .check input { margin-top: 2px; accent-color: var(--accent); }

/* ───────── левая колонка ───────── */
#crmdriver .cardsplit { display: grid; grid-template-columns: 160px 1fr; gap: 20px; }
@media (max-width: 760px) { #crmdriver .cardsplit { grid-template-columns: 1fr; } }
#crmdriver .photo {
  width: 120px; height: 120px; border-radius: var(--r-m);
  background: linear-gradient(145deg, var(--accent-soft), var(--surface-sunken));
  display: grid; place-items: center; color: var(--accent-lift); font-size: 40px; margin-bottom: 16px;
}
#crmdriver .linkrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ───────── баланс ───────── */
/* Собран по рецепту KPI панели: подпись, крупное число, пояснение. */
#crmdriver .balance-split { display: grid; grid-template-columns: 1fr; gap: 20px; }
#crmdriver .bal-title { font-size: 12px; font-weight: 500; color: var(--muted); }
#crmdriver .bal-sum {
  font-size: 25px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px;
}
#crmdriver .bal-sum.bad { color: var(--bad); }
#crmdriver .bal-act { font-size: 12px; color: var(--muted); margin: 7px 0 16px; }
#crmdriver .bal-list { font-size: 13.5px; }
#crmdriver .bal-list .r {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line-soft); color: var(--muted);
}
#crmdriver .bal-list .r:last-child { border-bottom: 0; }
#crmdriver .bal-list .r span:last-child {
  font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
#crmdriver .bal-free { margin-top: 18px; font-size: 12px; font-weight: 500; color: var(--muted); }
#crmdriver .bal-free .v {
  font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ok);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
#crmdriver .choose { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 14px; }
#crmdriver .center { text-align: left; }

/* ───────── таблицы ───────── */
#crmdriver table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#crmdriver table.t th {
  text-align: left; padding: 12px 16px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2);
  position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--line);
}
#crmdriver table.t td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-2); }
#crmdriver table.t tbody tr { transition: background var(--t-btn); }
#crmdriver table.t tbody tr:hover { background: var(--surface-sunken); }
#crmdriver table.t tbody tr:last-child td { border-bottom: 0; }

/* Деньги: тот же шрифт, что у всей панели, но с ровной разрядной сеткой.
   Моноширинный оставлен идентификаторам — УИН, счёт, ИНН, номер прав. */
#crmdriver .money, #crmdriver th.money {
  font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap; color: var(--ink);
}
#crmdriver th.money { font-weight: 600; color: var(--muted); }
#crmdriver .ident { font-family: var(--font-num); font-size: 12.5px; letter-spacing: 0; }

#crmdriver .t-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted);
}
#crmdriver .t-tools .left, #crmdriver .t-tools .right { display: flex; align-items: center; gap: 8px; }
#crmdriver .t-tools select, #crmdriver .t-tools input {
  height: 34px; padding: 0 11px; font-size: 13px; font-family: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-s);
}
#crmdriver .t-tools input:focus, #crmdriver .t-tools select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

#crmdriver .empty { padding: 28px; text-align: center; color: var(--faint); font-size: 13.5px; }
#crmdriver .muted { color: var(--muted); }
#crmdriver .ok { color: var(--ok); }
#crmdriver .bad { color: var(--bad); }

#crmdriver .note {
  background: var(--warn-soft); border: 1px solid var(--line); color: var(--warn);
  border-radius: var(--r-m); padding: 11px 15px; font-size: 13px; margin-bottom: 14px;
}

/* Топливные карты: семь пустых полей сворачиваются в одну строку. */
#crmdriver .fuel { margin-top: 14px; }
#crmdriver .fuel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--muted);
}
#crmdriver .fuel-list { display: grid; gap: 10px; margin-top: 10px; }
/* display:grid сильнее атрибута hidden — возвращаем ему силу. */
#crmdriver .fuel-list[hidden] { display: none; }

/* Левая колонка узкая — поля в ней не должны обрезать подписи. */
#crmdriver .cardsplit > div:first-child { min-width: 0; }
#crmdriver .cardsplit .field input { text-overflow: ellipsis; }

/* ───────── данные строками «ключ — значение» ───────── */
/* Системный .kv попадает под общее правило для чисел (вес 800, минусовый
   трекинг) — для ФИО и адресов это слишком; здесь возвращаем обычный текст
   и разрешаем перенос длинных значений. */
#crmdriver .kv { align-items: baseline; }
#crmdriver .kv-v {
  font-weight: 600; letter-spacing: 0; white-space: normal;
  overflow-wrap: anywhere; color: var(--ink); max-width: 62%;
}
#crmdriver .kv-v.muted { font-weight: 400; color: var(--faint); }
#crmdriver .kv-v:empty::after { content: '—'; color: var(--faint); }
/* Две колонки данных там, где значения короткие. */
#crmdriver .grid2 > .kv { padding: 10px 0; }

/* В узкой левой колонке строки данных идут одна под другой: при двух
   колонках значение «Водитель» ломалось по буквам в вертикальную лесенку. */
#crmdriver .cardsplit { grid-template-columns: 210px 1fr; }
#crmdriver .cardsplit > div:first-child .grid2 { grid-template-columns: 1fr; gap: 0; }
#crmdriver .cardsplit > div:first-child .kv-v { max-width: 60%; text-align: right; }