/* Слежка: вкладки, список и карточки перевозок, панель справа, окна «Перегрузить» и документов, правки на месте, «Отменить», архив, корзина, импорт. */

/* Таблица слежки: карточки маршрутов */
.tkh{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 6px}
.tkh b{font-family:var(--font-h);font-size:1rem;font-weight:800}
.rsp{display:flex}
.rs{flex:1;min-width:0;text-align:center;position:relative;font-size:0.75rem;color:var(--mute)}
.rs::before{content:"";position:absolute;top:8px;left:-50%;right:50%;height:3px;background:var(--line)}
.rs:first-child::before{display:none}
.rs i{display:block;width:18px;height:18px;border-radius:50%;background:var(--bs-body-bg);border:3px solid var(--line);margin:0 auto 6px;position:relative;z-index:1}
.rs.d i{background:var(--pri-fill);border-color:var(--bs-primary)}
.rs.d::before,.rs.c::before,.rs.l::before{background:var(--pri-fill)}
.rs.c i{border-color:var(--bs-primary);box-shadow:0 0 0 4px rgba(var(--bs-primary-rgb),.18)}
.rs.l i{border-color:var(--bs-danger);background:var(--bs-danger-bg-subtle);animation:rpulse 2s ease-out infinite}
.rs.l{color:var(--bs-danger-text-emphasis);font-weight:600}
.rs b{display:block;color:var(--bs-body-color);font-weight:600}
.rs.l b{color:var(--bs-danger-text-emphasis)}
@media(max-width:760px) {
.rs{font-size:0.6875rem}
}
h1,h2,.card-header,.tkh>div>b{font-family:var(--font-h)}
.card-header,.tkh>div>b{font-size:1rem;font-weight:800;letter-spacing:0}
.card-header .badge,.card-header .mute,.card-header .cn,.card-header .btn,.tkh .cn,.tkh .mute{font-family:var(--fb);letter-spacing:0}
/* ----- Таблица слежки ----- */
.trk-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
/* Вкладки в одну строку; на узком окне прокручиваются вбок, а не переносятся на вторую строку. */
.trk-tabs { display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; padding: 4px 4px 6px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 14px; background: var(--bs-body-bg); box-shadow: 0 1px 2px rgba(15, 30, 44, 0.04); }
.trk-tabs::-webkit-scrollbar { display: none; }
.trk-tabs button { flex: none; }
.trk-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 0; border-radius: 10px; background: none; color: var(--mute); font-weight: 500; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.trk-tabs button b { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: 0.75rem; }
.trk-tabs button:hover { color: var(--bs-body-color); }
.trk-tabs button.on { background: var(--pri-fill); color: #fff; box-shadow: 0 4px 12px rgba(14, 124, 134, 0.3); }
.trk-tabs button.on b { background: rgba(255, 255, 255, 0.22); color: #fff; }
.trk-tabs button.is-alert b { background: var(--bs-danger); color: #fff; }
.trk-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Узкое окно: поиск и клиент — первой строкой на всю ширину, ниже кнопки действий слева. */
@media (max-width: 1100px) {
.trk-tools { width: 100%; }
.trk-tools .form-control { flex: 1 1 200px; width: auto; }
.trk-actions { flex: 1 1 100%; }
}
.trk-tools .form-control { width: 230px; }
.trk-tools .form-select { width: auto; }
/* Панель перегрузки отмеченных грузов — снизу экрана, пока есть отметки. */
.trk-bulk { position: sticky; bottom: 16px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: #0e1e2b; color: #fff; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.5); animation: appear 0.2s var(--ease) both; }
.trk-bulk b { margin-right: auto; }
/* Раздел вкладки «Все». */
.shp-sec { display: flex; align-items: center; gap: 10px; margin: 22px 2px 12px; }
.shp-sec:first-child { margin-top: 4px; }
.shp-sec i { width: 10px; height: 10px; border-radius: 50%; background: var(--shp-edge); box-shadow: 0 0 0 4px color-mix(in srgb, var(--shp-edge) 18%, transparent); }
.shp-sec b { font-family: Manrope, Inter, sans-serif; font-size: 1rem; }
.shp-sec .ln { flex: 1; height: 1px; background: var(--line); }
.shp-more { display: block; margin: -2px auto 6px; font-weight: 600; text-decoration: none; }
/* Цвет этапа: кромка карточки, точка раздела, полоса группы в таблице. */
.shp-china { --shp-edge: #d08a1e; }
.shp-border { --shp-edge: #e07a1f; }
.shp-transit { --shp-edge: var(--bs-primary); }
.shp-planned { --shp-edge: #8a96a3; }
.shp-done { --shp-edge: var(--bs-success); }
.shp-late { --shp-edge: var(--bs-danger); }
.shp-sec-china { --shp-edge: #d08a1e; }
.shp-sec-border { --shp-edge: var(--bs-danger); }
.shp-sec-transit { --shp-edge: var(--bs-primary); }
.shp-sec-planned { --shp-edge: #8a96a3; }
/* Карточка перевозки: отдельный блок с цветной кромкой и промежутком до соседней. */
.shp { position: relative; margin-bottom: 12px; padding: 14px 18px 10px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bs-body-bg); box-shadow: 0 1px 2px rgba(15, 30, 44, 0.05); transition: transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s; }
.shp::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--shp-edge); }
.shp:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--shp-edge) 45%, var(--line)); box-shadow: 0 12px 28px -18px rgba(15, 30, 44, 0.45); }
.shp-late { background: linear-gradient(90deg, color-mix(in srgb, var(--bs-danger) 6%, var(--bs-body-bg)), var(--bs-body-bg) 45%); }
.shp-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.shp-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.shp-id svg { align-self: center; color: var(--shp-edge); }
.shp-id b { font-weight: 600; }
.shp-s { display: flex; align-items: center; gap: 10px; }
.shp .rsp { margin: 12px 0 6px; }
.shp-cargos { border-top: 1px dashed var(--line); padding-top: 6px; }
.shp-line { display: flex; align-items: center; gap: 10px; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; transition: background-color 0.2s; }
.shp-line:hover { background: var(--bs-tertiary-bg); }
.shp-line .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; font-size: 0.75rem; }
.shp-pick { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); cursor: pointer; }
/* Список: каждая перевозка — отдельный блок с цветной кромкой; колонки общие у шапки и строк. */
.ls-wrap { overflow-x: auto; padding-bottom: 4px; }
.ls { min-width: 980px; }
.ls-row { display: grid; grid-template-columns: 34px 46px minmax(160px, 1.4fr) minmax(110px, 0.8fr) minmax(150px, 1.1fr) minmax(170px, 1.2fr) minmax(130px, 1fr); gap: 0 12px; align-items: center; }
.ls-hd { padding: 0 16px 6px 22px; color: var(--mute); font-size: 0.75rem; }
.ls-blk { position: relative; margin-bottom: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--bs-body-bg); box-shadow: 0 1px 2px rgba(15, 30, 44, 0.05); transition: box-shadow 0.2s, border-color 0.2s; cursor: pointer; }
.ls-blk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--shp-edge); }
.ls-blk:hover { border-color: color-mix(in srgb, var(--shp-edge) 45%, var(--line)); box-shadow: 0 10px 24px -18px rgba(15, 30, 44, 0.45); }
.ls-blk.shp-late { background: linear-gradient(90deg, color-mix(in srgb, var(--bs-danger) 6%, var(--bs-body-bg)), var(--bs-body-bg) 45%); }
.ls-blk .ls-row:not(.ls-hd) { padding: 13px 16px 13px 22px; min-height: 64px; }
.ls-blk b { font-weight: 600; }
.ls-blk small { display: block; margin-top: 2px; color: var(--mute); font-size: 0.75rem; }
.ls-main, .ls-next, .ls-truck { min-width: 0; }
.ls-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-truck small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-chip { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: 0.6875rem; }
.ls-where { display: flex; align-items: flex-start; gap: 8px; }
.ls-where i { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--shp-edge); }
.ls-late { color: var(--bs-danger-text-emphasis); }
.ls-next > span { display: block; }
.ls-next .btn { margin-top: 6px; }
.ls-ctl { display: flex; align-items: center; gap: 6px; }
.ls-ctl .form-check-input { margin: 0; }
.ls-docs { min-width: 0; }
/* В списке «Ожидается» — серый значок без перечёркивания; «Не требуется» остаётся пунктирным. */
.ls .text-decoration-line-through, .tp .text-decoration-line-through { text-decoration: none !important; }
.ls-docs .docs { flex-wrap: wrap; row-gap: 4px; }
.ls-ex { width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--mute); font-size: 1.25rem; line-height: 1; transition: transform 0.15s; }
.ls-ex.open { transform: rotate(90deg); }
.ls-in { padding: 8px 16px 10px 102px; border-top: 1px solid var(--line); background: var(--bs-tertiary-bg); cursor: default; }
.ls-in-h { margin-bottom: 2px; color: var(--mute); font-size: 0.75rem; }
.ls-ln { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(100px, 0.7fr) minmax(180px, 1.3fr) minmax(110px, 1fr) 70px; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px dashed var(--line); cursor: pointer; }
.ls-ln:first-of-type { border-top: 0; }
.ls-ln small { margin: 0; }
.ls-ln .btn-link { padding: 0; color: var(--mute); text-align: right; text-decoration: none; }
.ls-ln .btn-link:hover { color: var(--bs-danger); }
/* Быстрые фильтры над списком, «Выбрать все» и выбор документа в окне «Документы». */
.trk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.trk-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bs-body-bg); color: var(--mute); font-size: 0.8125rem; font-weight: 500; }
.trk-chip b { padding: 0 7px; border-radius: 999px; background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: 0.6875rem; }
.trk-chip:hover { color: var(--bs-body-color); }
.trk-chip.on { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.trk-chip.on b { background: var(--pri-fill); color: #fff; }
.trk-chip-reset { padding: 4px 6px; border: 0; background: none; color: var(--mute); font-size: 0.8125rem; text-decoration: underline; }
.ls-all { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 6px; color: var(--mute); font-size: 0.875rem; }
.ls-all .form-check-input { margin: 0; }
.il-seg { display: flex; gap: 4px; padding: 3px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; }
.il-seg button { flex: 1; padding: 7px; border: 0; border-radius: 9px; background: none; color: var(--mute); font-weight: 600; }
.il-seg button.on { background: var(--pri-fill); color: #fff; }
/* Панель выбранной перевозки справа: от 1200 пикселей список сдвигается влево (внутри он прокручивается), на узком экране панель поверх него.
   Это div, а не aside: на тег aside оформлено левое меню (в том числе свёрнутое, `.app.min aside`), и оно сжимало бы и эту панель. */
.ls-blk.sel { outline: 2px solid var(--bs-primary); outline-offset: -1px; }
.tp { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1040; width: min(460px, 100vw); padding: 18px 20px 24px; overflow-y: auto; border-left: 1px solid var(--line); background: var(--bs-body-bg); box-shadow: -18px 0 40px -24px rgba(15, 30, 44, 0.45); animation: appear 0.2s var(--ease) both; }
.tp-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.tp-h h3 { margin: 0; font: 800 1.125rem Manrope, Inter, sans-serif; }
.tp-h small, .tp-ln small { display: block; margin-top: 2px; color: var(--mute); font-size: 0.75rem; }
.tp-x { margin-left: auto; padding: 0 2px; border: 0; background: none; color: var(--mute); font-size: 1.125rem; line-height: 1; }
.tp-sub { display: block; margin-bottom: 12px; color: var(--mute); }
.tp .rsp { margin: 14px 0 16px; }
.tp-kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; margin-bottom: 16px; font-size: 0.875rem; }
.tp-kv > span { color: var(--mute); }
.tp-sec { margin-bottom: 4px; color: var(--mute); font-size: 0.75rem; }
.tp-ln { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.tp-ln .btn-link { padding: 0; color: var(--mute); text-decoration: none; }
.tp-ln .btn-link:hover { color: var(--bs-danger); }
.tp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
@media (min-width: 1200px) {
#v-tracking.tp-open { margin-right: 468px; }
}
/* Кнопки-значки в панели: изменить, в архив, удалить — справа, одной группой. */
.tp-ico-group { display: flex; gap: 6px; margin-left: auto; }
.tp-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; padding: 0; }
/* На узком окне панель занимает весь экран: полоска списка рядом с ней всё равно не нужна. */
@media (max-width: 767px) {
.tp { width: 100vw; }
}
.rl-dlg { width: 100%; max-width: 480px; padding: 18px 20px; border-radius: 16px; background: var(--bs-body-bg); box-shadow: 0 24px 60px -20px rgba(15, 30, 44, 0.6); }
.rl-dlg h3 { margin: 0 0 6px; font: 800 1.125rem Manrope, Inter, sans-serif; }
.rl-cargos { margin-bottom: 12px; color: var(--mute); font-size: 0.8125rem; line-height: 1.5; }
.rl-tabs { display: flex; gap: 4px; padding: 3px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; }
.rl-tabs button { flex: 1; padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: var(--mute); font-weight: 500; }
.rl-tabs button.on { background: var(--pri-fill); color: #fff; }
.rl-dlg label { display: block; margin: 8px 0 4px; color: var(--mute); font-size: 0.8125rem; }
.rl-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ls-date { padding: 0; border: 0; border-bottom: 1px dashed currentColor; background: none; color: var(--bs-primary-text-emphasis); font: inherit; }
.il-dlg { max-width: 360px; }
.il-st { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.il-s { padding: 10px 8px; border: 0; border-radius: 10px; font-weight: 600; }
.il-s.on { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.il-accepted { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.il-review { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.il-waiting, .il-none { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.undo { position: fixed; left: 50%; bottom: 24px; z-index: 1060; display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-radius: 12px; background: #0e1e2b; color: #fff; transform: translateX(-50%); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.5); animation: appear 0.2s var(--ease) both; }
.undo button { padding: 0; border: 0; background: none; color: #9fe1cb; font-weight: 600; }
.shp-id .row-no { align-self: center; }
.page-steps .rsp { margin: 0; }
/* ----- Импорт ----- */
.imp-notes { padding: 0 16px 10px; }
.imp-notes summary { cursor: pointer; color: var(--bs-warning-text-emphasis); font-weight: 600; }
.imp-notes ul { margin: 8px 0 0; padding-left: 18px; color: var(--mute); font-size: 0.8125rem; }
.rec-cargos .shp-line { padding-left: 20px; padding-right: 20px; }
.rs.l i { border-color: var(--bs-danger) !important; background: var(--bs-danger-bg-subtle); }
/* ===== DESCO CRM 2.7.1: архив ===== */
.ar-month { max-width: 190px; }
main .wrap#imp-table td, main .wrap#imp-table th { white-space: nowrap; }
/* Окно «Перегрузить»: выбор вида нового транспорта. */
.rl-mode { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-mode button { border: 1px solid var(--line); background: var(--bs-body-bg); border-radius: 10px; padding: 5px 8px; line-height: 1; transition: border-color .15s, box-shadow .15s; }
.rl-mode button.on { border-color: var(--bs-primary); box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .18); }
.rl-mode .mode { font-size: 0.8125rem; padding: 3px 9px; }
/* Вид перевозки в списке: значки в колонке «Транспорт» переносятся, а не обрезаются; фильтр по виду — группой. */
.ls-truck small.ls-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; white-space: normal; overflow: visible; }
.ls-mode .mode-to { margin: 0; }
.trk-modes { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-right: 6px; padding-right: 12px; border-right: 1px solid var(--line); }
.trk-chip .mode { margin-right: 2px; }