/* Основа: цвета и переменные темы, общие элементы (карточки, кнопки, формы, таблицы, значки, календарь дат, окна), анимации. */

@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}
@keyframes zoom {
  0% {
    opacity: 0.5;
    transform: scale(0.985);
  }
}
@keyframes dashm {
  to {
    stroke-dashoffset: -100;
  }
}
@keyframes halo {
  0% {
    transform: scale(0.7);
    opacity: 0.8;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}
:root {
  --font-h: Manrope, Inter, system-ui, sans-serif;
  --bs-body-font-family:
    Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-primary: #0e7c86;
  --bs-primary-rgb: 14, 124, 134;
  --bs-link-color: #0e7c86;
  --bs-link-hover-color: #0a6169;
  --bs-body-bg: #fff;
  --bs-tertiary-bg: #f2f5f8;
  --bs-body-color: #0f1e2b;
  --bs-secondary-color: #6b7c8c;
  --bs-border-color: #e6ebf0;
  --bs-primary-bg-subtle: #e2f3f4;
  --bs-success-bg-subtle: #e3f5ea;
  --bs-danger-bg-subtle: #fdecec;
  --bs-warning-bg-subtle: #fff4d9;
  --bs-primary-text-emphasis: #0a5a62;
  --bs-success-text-emphasis: #1f6b3d;
  --bs-danger-text-emphasis: #b3261e;
  --bs-warning-text-emphasis: #8a5a00;
  --bs-danger: #d93025;
  --bs-success: #2e9e5b;
  --bs-warning: #f0a30a;
  --side: #0c1e2c;
  --line: var(--bs-border-color);
  --mute: var(--bs-secondary-color);
  --red: var(--bs-danger);
  --acc: var(--bs-primary);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
[data-bs-theme="dark"] {
  --bs-primary: #2fb0bb;
  --bs-primary-rgb: 47, 176, 187;
  --bs-link-color: #5cc8d2;
  --bs-link-hover-color: #8fdce3;
  --bs-body-bg: #121e28;
  --bs-tertiary-bg: #0b141c;
  --bs-body-color: #e6eef5;
  --bs-secondary-color: #8fa2b3;
  --bs-border-color: #1f2e3b;
  --bs-primary-bg-subtle: #123a40;
  --bs-success-bg-subtle: #123524;
  --bs-danger-bg-subtle: #3b1a1a;
  --bs-warning-bg-subtle: #3a2f12;
  --bs-primary-text-emphasis: #7fd3da;
  --bs-success-text-emphasis: #7bd39a;
  --bs-danger-text-emphasis: #ff9a92;
  --bs-warning-text-emphasis: #f3c66a;
  --bs-danger: #ff6b61;
  --bs-success: #4cc27f;
  --bs-warning: #f3b73a;
  --side: #08131c;
}
* {
  box-sizing: border-box;
}
body,
html {
  margin: 0;
}
body {
  background: var(--bs-tertiary-bg);
  font-size:0.9rem;
}
.hide {
  display: none !important;
}
.btn {
  border-radius: 10px;
  font-weight: 500;
}
.btn-primary {
  --bs-btn-bg: #0e7c86;
  --bs-btn-border-color: #0e7c86;
  --bs-btn-hover-bg: #0a6169;
  --bs-btn-hover-border-color: #0a6169;
  --bs-btn-active-bg: #0a6169;
  --bs-btn-active-border-color: #0a6169;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}
.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-border-color: var(--bs-border-color);
}
.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-tertiary-bg);
  --bs-btn-active-color: var(--bs-body-color);
}
.btn-outline-primary {
  --bs-btn-color: var(--mute);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff;
}
.form-control,
.form-select {
  border-radius: 10px;
  background-color: var(--bs-body-bg);
}
h1 {
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  margin: 0;
}
.sub {
  color: var(--mute);
  font-size:0.8125rem;
  margin-top: 2px;
}
.av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size:0.75rem;
  flex-shrink: 0;
}
.av.lg {
  width: 54px;
  height: 54px;
  border-radius: 15px;
}
.card {
  border: 0;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 30, 43, 0.04),
    0 8px 24px rgba(15, 30, 43, 0.05);
  overflow: hidden;
}
.card-header {
  background: 0 0;
  border: 0;
  padding: 18px 20px 10px;
  font-weight: 700;
  font-size:1rem;
}
.alert {
  margin: 0 18px 10px !important;
  border-radius: 12px !important;
  border: 0 !important;
  border-left: 4px solid var(--bs-danger) !important;
  font-size:0.9rem;
}
.card > .alert:last-child {
  margin-bottom: 18px !important;
}
td small {
  display: block;
  color: var(--mute);
  font-size:0.75rem;
}
.more {
  padding: 0.75rem 1.25rem;
  color: var(--mute);
  font-size:0.8125rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}
.lk,
.more a {
  color: var(--bs-primary);
  cursor: pointer;
  font-weight: 600;
}
.progress {
  background: var(--bs-tertiary-bg);
  border-radius: 6px;
}
.wrap {
  overflow-x: auto;
}
.table {
  margin: 0;
  white-space: nowrap;
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--bs-tertiary-bg);
}
.table > :not(caption) > * > * {
  padding: 0.8rem 1rem;
  border-bottom-color: var(--line);
}
.table th {
  font-weight: 600;
  color: var(--mute);
  font-size:0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.num,
.red {
  color: var(--bs-primary);
  font-weight: 700;
}
.red {
  color: var(--red);
}
td:first-child,
th:first-child {
  position: sticky;
  left: 0;
  background: var(--bs-body-bg);
  z-index: 1;
}
.badge {
  font-weight: 600;
  padding: 0.4em 0.7em;
}
.badge.rounded-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: 1px;
}
.card.full {
  position: fixed;
  inset: 0;
  z-index: 50;
  margin: 0 !important;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.card.full .wrap {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.card.full tr:first-child th {
  position: sticky;
  top: 0;
  height: 36px;
  z-index: 2;
}
.card.full tr:nth-child(2) th {
  position: sticky;
  top: 36px;
  z-index: 2;
  background: var(--bs-body-bg);
}
.card.full th:first-child {
  z-index: 4;
}
.pad {
  padding: 14px 20px;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.err {
  color: var(--red);
  font-size:0.8125rem;
  margin-top: 8px;
  min-height: 18px;
}
.nt {
  margin-top: 14px;
}
.mute,
.nt,
.sec span {
  color: var(--mute);
  font-size:0.8125rem;
}
.sec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.sec b {
  font-family: var(--font-h);
  font-size:1rem;
}
.sec span {
  display: block;
}
.sd span {
  color: var(--mute);
}
.sd {
  padding: 0 20px 12px;
}
.sd div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  font-size:0.8125rem;
}
.sd div:last-child {
  border: 0;
}
.sd b {
  font-weight: 500;
  text-align: right;
}
.ph small {
  display: block;
  margin-top: 6px;
  color: var(--mute);
  font-size:0.75rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}
.lg {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  vertical-align: -1px;
}
.form-check-input:checked {
  background-color: var(--pri-fill);
  border-color: var(--bs-primary);
}
:root {
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card {
  transition:
    box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.btn {
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.15s var(--ease),
    box-shadow 0.2s;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary:hover {
  box-shadow: 0 6px 16px rgba(14, 124, 134, 0.3);
}
.form-control,
.form-select {
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.badge {
  transition: background-color 0.2s;
}
.alert {
  animation: pop 0.35s var(--ease);
}
.card.full {
  animation: zoom 0.3s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
*,
  ::after,
  ::before {
    animation: none !important;
    transition: none !important;
  }
}
.cn{display:inline-block;min-width:24px;text-align:center;padding:.12rem .55rem;border-radius:20px;background:var(--bs-primary-bg-subtle);color:var(--bs-primary-text-emphasis);font-size:0.75rem;font-weight:600;margin-left:8px}
@keyframes rpulse{0%{box-shadow:0 0 0 0 rgba(217,48,37,.4)}100%{box-shadow:0 0 0 9px rgba(217,48,37,0)}}
.av.lg{display:grid;vertical-align:baseline}
/* Штрихи: табличные цифры, единицы, иконки, успех, пустые состояния, подсветка, тема */
body{font-variant-numeric:tabular-nums}
/* ===== Оформление v3: фон, многослойные карточки, шапки, фокус, загрузка, акценты ===== */
:root{--glow:radial-gradient(80% 90% at 12% -10%,rgba(14,124,134,.17),transparent 60%),radial-gradient(60% 80% at 100% 0%,rgba(224,161,0,.11),transparent 55%)}
[data-bs-theme=dark]{--glow:radial-gradient(80% 90% at 12% -10%,rgba(47,176,187,.13),transparent 60%),radial-gradient(60% 80% at 100% 0%,rgba(243,198,106,.06),transparent 55%)}
body{background-image:var(--glow);background-attachment:fixed}
.card{background:linear-gradient(180deg,var(--bs-body-bg),color-mix(in srgb,var(--bs-body-bg) 95%,#0e7c86));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,30,43,.08),0 12px 24px -8px rgba(15,30,43,.16)}
[data-bs-theme=dark] .card{background:linear-gradient(180deg,#14212d,#101b25);border-color:#1f2e3b;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.4),0 14px 28px -10px rgba(0,0,0,.55)}
.btn:focus-visible,button:focus-visible,a:focus-visible,.nav-link:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(14,124,134,.38)}
.form-control:focus,.form-select:focus{border-color:var(--bs-primary);box-shadow:0 0 0 3px rgba(14,124,134,.18)}
/* Узкая панель меню по умолчанию: значки, точки у разделов с делами, подсказки */
.nav-link{position:relative}
.card{scroll-margin-top:70px}
/* ===== Единообразие: шрифты, отступы, зазоры, высоты ===== */
:root{--gap:20px;--fb:Inter,system-ui,sans-serif}
button,input,select,textarea{font-family:inherit}
.card-header .mute{font-weight:500}
.btn{font-size:.9rem}
.btn-sm{font-size:.8125rem}
.form-control:not(.form-control-sm):not(textarea),.form-select:not(.form-select-sm){height:38px;padding-top:.375rem;padding-bottom:.375rem}
.form-control-sm,.form-select-sm{height:31px}
.card.mb-3{margin-bottom:var(--gap)!important}
.card>.wrap th:first-child,.card>.wrap td:first-child{padding-left:20px}
.card>.wrap th:last-child,.card>.wrap td:last-child{padding-right:20px}
.card>.wrap th,.card>.wrap td{padding-left:.75rem;padding-right:.75rem}
.card>.wrap th:first-child,.card>.wrap td:first-child{padding-left:20px}
.card>.wrap th:last-child,.card>.wrap td:last-child{padding-right:20px}
.card-header .nav{margin:0}
/* карточка перевозки: таблица документов без переносов в служебных колонках */
.card-header.fw-semibold{font-weight:800!important}
h1{font-size:1.5rem}
.badge{font-size:.75rem!important;font-weight:700}
small,.small{font-size:.75rem}
/* ===== Тёмная тема: исправления цветов и контраста ===== */
[data-bs-theme=dark]{--pri-solid:#14808a;--bs-primary-text-emphasis:#8fe3ea}
[data-bs-theme=dark] .btn-primary,[data-bs-theme=dark] .btn-primary:hover,[data-bs-theme=dark] .btn-primary:focus{background:var(--pri-solid);border-color:var(--pri-solid);color:#fff}
[data-bs-theme=dark] .btn-outline-primary.active,[data-bs-theme=dark] .btn-group .btn.active{background:var(--pri-solid);border-color:var(--pri-solid);color:#fff}
[data-bs-theme=dark] .nav-tabs .nav-link.active{color:#8fe3ea;border-color:#2fb0bb}
[data-bs-theme=dark] .badge.bg-secondary-subtle,[data-bs-theme=dark] .bg-secondary-subtle{color:#aeb8c2!important}
[data-bs-theme=dark] .lk{color:#6fd9e2}
:root{--pri-fill:var(--bs-primary);--pri-solid:var(--bs-primary)}
[data-bs-theme=dark]{--pri-fill:#14808a}
/* Первая колонка: липкая только в таблице слежки, фон совпадает с карточкой */
table:not(#tbl) td:first-child,table:not(#tbl) th:first-child{position:static;background:transparent}
/* Таблица слежки: закреплённая первая колонка всегда непрозрачная */
:root{--pin-bg:var(--bs-body-bg);--pin-bad:var(--bs-danger-bg-subtle);--pin-hdr:var(--bs-body-bg);--pin-grp:var(--bs-tertiary-bg)}
[data-bs-theme=dark]{--pin-bg:#121e28;--pin-hdr:#121e28;--pin-grp:#0f1a24;--pin-bad:linear-gradient(rgba(255,107,97,.10),rgba(255,107,97,.10)),#121e28}
/* backwards, а не both: после показа анимация не остаётся «включённой», иначе блок страницы считается преобразованным
   и «фиксированные» элементы внутри него (панель справа) привязываются к нему, а не к окну. */
.appear { animation: appear 0.28s var(--ease) backwards; }
@keyframes appear { from { opacity: 0; transform: translateY(8px); } }
/* Задержка мигает, как на табло. */
.blink { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
/* ----- Списки внутри карточек ----- */
.di { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); }
.di:first-child { border-top: 0; }
[data-href] { cursor: pointer; }
.di[data-href] { transition: background-color 0.2s; }
.di[data-href]:hover { background: var(--bs-tertiary-bg); }
.di .grow { flex: 1; min-width: 0; }
.di small { display: block; color: var(--mute); }
.di-empty { padding: 18px 16px; color: var(--mute); }
.t-plan { color: var(--mute); font-style: italic; white-space: nowrap; }
tr[data-href] { transition: background-color 0.2s; }
tr[data-href]:hover > td { background: var(--bs-tertiary-bg); }
#c-rows tr, #c-users tr, #u-rows tr { cursor: pointer; }
.row-edit { display: inline-flex; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--mute); opacity: 0; transition: opacity 0.15s; }
tr:hover .row-edit { opacity: 1; }
/* Окно удаления в корзину и отправки рейса в архив. */
.dl-body { margin-bottom: 8px; font-size: 0.875rem; line-height: 1.5; }
.dl-warn { margin: 2px 0 8px 0; padding: 6px 10px; border-radius: 8px; background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); font-size: 0.8125rem; }
.dl-note { margin-top: 10px; font-size: 0.8125rem; }
/* Окно «Перегрузить» в списке слежки. */
.rl { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(15, 30, 44, 0.45); animation: appear 0.15s var(--ease) both; }
/* Порядковый номер строки в списке и в карточке. */
.row-no { display: inline-block; min-width: 26px; padding: 2px 6px; border-radius: 8px; background: var(--bs-tertiary-bg); color: var(--mute); font-size: 0.75rem; font-weight: 600; text-align: center; }
/* ----- Страницы рейса, груза, поставщика ----- */
.page-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; color: var(--mute); font-weight: 500; text-decoration: none; }
.page-back:hover { color: var(--bs-primary); }
.page-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.page-h h2 { margin: 0 0 4px; font-family: Manrope, Inter, sans-serif; font-size: 1.5rem; font-weight: 800; }
.page-steps { margin-bottom: 16px; padding: 18px 22px 10px; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.page-side { display: grid; gap: 16px; }
@media (max-width: 1100px) {
.page-grid { grid-template-columns: 1fr; }
}
.pad .form-select { min-width: 0; }
/* ----- Календарь дат (flatpickr) в стиле CRM ----- */
.flatpickr-calendar { width: 300px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--bs-body-bg); box-shadow: 0 18px 40px -16px rgba(15, 30, 44, 0.45); font-family: Inter, sans-serif; }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-months { align-items: center; padding-bottom: 6px; }
.flatpickr-months .flatpickr-month { height: 38px; color: var(--bs-body-color); fill: var(--bs-body-color); }
.flatpickr-current-month { padding-top: 8px; font-size: 1rem; font-weight: 700; }
.flatpickr-current-month .cur-month { font-weight: 700; }
.flatpickr-current-month input.cur-year { font-weight: 600; color: var(--mute); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { top: 12px; padding: 6px; border-radius: 8px; color: var(--mute); fill: var(--mute); }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--bs-tertiary-bg); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--bs-primary); }
.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer { width: 282px; min-width: 282px; max-width: 282px; }
span.flatpickr-weekday { color: var(--mute); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; }
.flatpickr-day { max-width: 38px; height: 38px; line-height: 36px; margin: 1px; border-radius: 10px; color: var(--bs-body-color); font-weight: 500; }
.flatpickr-day:hover, .flatpickr-day:focus { border-color: transparent; background: var(--bs-tertiary-bg); }
.flatpickr-day.today { border-color: var(--bs-primary); }
.flatpickr-day.today:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-body-color); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { border-color: transparent; background: var(--pri-fill); color: #fff; box-shadow: 0 4px 12px rgba(14, 124, 134, 0.35); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--mute); opacity: 0.45; }
.flatpickr-input[readonly] { background: var(--bs-body-bg); cursor: pointer; }
/* ----- Дашборд ----- */
.dash-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-primary); flex-shrink: 0; }
@keyframes cdpulse2 { 50% { background: rgba(255, 255, 255, 0.32); } }
@keyframes cdpulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* Вид перевозки: значок «Авто / ЖД / Море» (слежка, страницы груза и рейса). */
.mode { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: 1px; }
.mode svg { width: 12px; height: 12px; flex: none; }
.mode-auto { background: #e0f2f3; color: #0e7c86; }
.mode-rail { background: #ece6fb; color: #6a3fc8; }
.mode-sea { background: #e3edfc; color: #2a6fdb; }
.mode-air { background: #fdf0d9; color: #a35f00; }
[data-bs-theme=dark] .mode-auto { background: #123a3e; color: #5fd0d8; }
[data-bs-theme=dark] .mode-rail { background: #2a2140; color: #b49cf0; }
[data-bs-theme=dark] .mode-sea { background: #16304d; color: #7fb0f5; }
[data-bs-theme=dark] .mode-air { background: #3a2a10; color: #f3c46a; }
.mode-to { margin: 0 3px; color: var(--mute); font-size: 0.75rem; }
.mode-route { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }