/*
 * «Учёт трекеров» (custody.js). Основа — вид «Пользователей» (users.css: шапка, фильтры,
 * таблица, одно окно правки), здесь только своё: вкладки раздела, карточки складов
 * сводки, поле номера с подсказками, накладная на экране, лента истории.
 */
.usr.cst { gap: 16px; }
.usr.cst .cst-mono { font-family: Consolas, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.usr.cst .cst-bad { color: var(--u-bad); font-weight: 600; }
.usr.cst .cst-warn { color: var(--u-wait); font-weight: 600; }
.usr.cst .cst-h { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--u-ink); }
.usr.cst .cst-sub { font-size: 17px; }
.usr.cst .cst-click { cursor: pointer; }
.usr.cst .cst-click:hover td { background: var(--u-soft); }
.usr.cst .cst-table td { vertical-align: top; }
.usr.cst .usr-btn.danger { border-color: var(--u-bad); color: var(--u-bad); }
.usr.cst .usr-btn.danger:hover { background: var(--u-bad-bg); }
.usr.cst .usr-btn:disabled { opacity: .5; cursor: default; }
.usr.cst .cst-small { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.usr.cst .cst-link { padding: 0; border: 0; background: none; color: var(--u-blue); font: inherit; cursor: pointer; text-decoration: underline; }

/* ---- вкладки раздела */
.usr.cst .cst-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--u-line); }
.usr.cst .cst-tabs button {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -1px; border: 0;
    border-bottom: 3px solid transparent; background: none; color: var(--u-muted); font: inherit; font-size: 14.5px;
    font-weight: 600; cursor: pointer;
}
.usr.cst .cst-tabs button.on { border-bottom-color: var(--u-blue); color: var(--u-ink); }
.usr.cst .cst-badge { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--u-bad); color: #fff; font-size: 12px; text-align: center; }

/* ---- состояние трекера и документа */
.usr.cst .cst-st { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.usr.cst .cst-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.usr.cst .cst-st.shelf { background: var(--u-good-bg); color: var(--u-good); }
.usr.cst .cst-st.truck, .usr.cst .cst-st.transit { background: var(--u-blue-soft); color: var(--u-blue-dark); }
.usr.cst .cst-st.arrived { background: var(--u-wait-bg); color: var(--u-wait); }
.usr.cst .cst-st.missing, .usr.cst .cst-st.lost { background: var(--u-bad-bg); color: var(--u-bad); }
.usr.cst .cst-st.repair { background: #eef0f4; color: #5b6b80; }

/* ---- сводка: тревоги и склады */
.usr.cst .cst-alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.usr.cst .cst-alert {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--u-line); border-left-width: 5px;
    border-radius: 12px; background: var(--u-card); color: var(--u-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.usr.cst .cst-alert b { font-size: 24px; line-height: 1; }
.usr.cst .cst-alert.bad { border-left-color: var(--u-bad); }
.usr.cst .cst-alert.bad b { color: var(--u-bad); }
.usr.cst .cst-alert.warn { border-left-color: var(--u-wait); }
.usr.cst .cst-alert.warn b { color: var(--u-wait); }
.usr.cst .cst-alert.info { border-left-color: var(--u-blue); }
.usr.cst .cst-alert.info b { color: var(--u-blue); }
.usr.cst .cst-alert:hover { background: var(--u-soft); }

.usr.cst .cst-whgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.usr.cst .cst-wh {
    position: relative; display: grid; gap: 8px; padding: 16px 16px 14px 22px; border: 1px solid var(--u-line); border-radius: 14px;
    background: var(--u-card); color: var(--u-text); font: inherit; text-align: left; cursor: pointer; overflow: hidden;
}
/* Цветная полоса слева — склад узнаётся издалека (одобренный прототип). */
.usr.cst .cst-wh::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--wh, var(--u-blue)); }
.usr.cst .cst-wh:hover { border-color: var(--wh, var(--u-blue)); }
.usr.cst .cst-whname { font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--wh, var(--u-ink)); overflow-wrap: anywhere; }
.usr.cst .cst-whwho { font-size: 14px; }
.usr.cst .cst-whwho span { color: var(--u-muted); }
.usr.cst .cst-whwho .cst-bad { color: var(--u-bad); }
.usr.cst .cst-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.usr.cst .cst-nums div { display: grid; }
.usr.cst .cst-nums b { font-size: 20px; color: var(--u-ink); }
.usr.cst .cst-nums span { font-size: 12px; color: var(--u-muted); }

/* ---- фильтры состояний */
.usr.cst .cst-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.usr.cst .cst-chips button {
    padding: 6px 12px; border: 1px solid var(--u-line); border-radius: 999px; background: var(--u-card); color: var(--u-text);
    font: inherit; font-size: 13.5px; cursor: pointer;
}
.usr.cst .cst-chips button.on { border-color: var(--u-blue); background: var(--u-blue-soft); color: var(--u-blue-dark); font-weight: 600; }

/* ---- поле номера с подсказками */
.usr.cst .cst-sf { position: relative; }
.usr.cst .cst-sf input { width: 100%; font-size: 16px; }
.usr.cst .cst-sfbox {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 280px; overflow-y: auto;
    border: 1px solid var(--u-line); border-radius: 10px; background: var(--u-card); box-shadow: 0 12px 30px rgba(20, 32, 50, .18);
}
.usr.cst .cst-sfbox[hidden] { display: none; }
.usr.cst .cst-sfitem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; font-size: 13.5px; cursor: pointer; }
.usr.cst .cst-sfitem + .cst-sfitem { border-top: 1px solid var(--u-line); }
.usr.cst .cst-sfitem:hover, .usr.cst .cst-sfitem.cur { background: var(--u-blue-soft); }
.usr.cst .cst-sfitem.no { color: var(--u-muted); cursor: not-allowed; background: none; }
.usr.cst .cst-sfitem.no .cst-st { filter: grayscale(1); opacity: .7; }
.usr.cst .cst-sfwhy { flex-basis: 100%; font-size: 12.5px; color: var(--u-bad); }
.usr.cst .cst-sfnone { padding: 10px 12px; font-size: 13.5px; color: var(--u-muted); }

/* ---- отсканированные номера */
.usr.cst .cst-scanlist { display: flex; flex-wrap: wrap; gap: 6px; }
.usr.cst .cst-scanlist > span {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--u-line); border-radius: 8px;
    background: var(--u-soft); font-size: 13px;
}
.usr.cst .cst-scanlist > span.ok { border-color: transparent; background: var(--u-good-bg); color: var(--u-good); }
.usr.cst .cst-scanlist > span.bad { border-color: transparent; background: var(--u-bad-bg); color: var(--u-bad); }
.usr.cst .cst-scanlist > span.extra { border-color: transparent; background: var(--u-wait-bg); color: var(--u-wait); }
.usr.cst .cst-scanlist > span.hit { outline: 3px solid rgba(0, 122, 255, .35); }
.usr.cst .cst-unpick { padding: 0 2px; border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }

/* ---- карточки и окна */
.usr.cst .cst-card { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--u-line); border-radius: 14px; background: var(--u-card); }
.usr.cst .cst-card-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.usr.cst .cst-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.usr.cst .cst-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.usr.cst .cst-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; }
.usr.cst .cst-ship { font-size: 13.5px; }
.usr.cst .cst-ship > span:first-child { color: var(--u-muted); }
.usr.cst .cst-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.usr.cst .cst-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.usr.cst .cst-track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.usr.cst .cst-track .usr-field[hidden] { display: none; }
.usr.cst .cst-num { width: 140px; min-height: 34px; padding: 5px 9px; border: 1px solid var(--u-line); border-radius: 8px; font: inherit; }
.usr.cst .cst-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; cursor: pointer; }
.usr.cst .cst-check input { width: 18px; height: 18px; margin: 0; }
.usr.cst .cst-sum { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 14px; border-radius: 12px; background: var(--u-soft); font-size: 14px; }
.usr.cst .cst-plain { margin: 0; padding-left: 18px; font-size: 13.5px; }
.usr.cst .cst-dlg.cst-wide { width: min(900px, calc(100vw - 32px)); }
.usr.cst .cst-dlg-in { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.usr.cst .cst-dlg .usr-dlg-err[hidden] { display: none; }
.usr.cst .cst-dlg .usr-dlg-title .cst-st { margin-left: 8px; vertical-align: middle; }

/* ---- лента истории */
.usr.cst .cst-timeline { margin: 0; padding: 0 0 0 16px; list-style: none; border-left: 2px solid var(--u-line); }
.usr.cst .cst-timeline li { position: relative; padding: 0 0 12px 14px; font-size: 13.5px; }
.usr.cst .cst-timeline li::before {
    content: ""; position: absolute; left: -23px; top: 4px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--u-blue); border: 2px solid var(--u-card);
}
.usr.cst .cst-timeline li.bad::before { background: var(--u-bad); }
.usr.cst .cst-timeline .when { font-size: 12px; color: var(--u-muted); }
.usr.cst .cst-timeline span { color: var(--u-muted); }
.usr.cst .cst-timeline li > span:first-of-type { color: var(--u-ink); font-weight: 600; }

/* ---- накладная на экране: та же разметка, что идёт в печать */
.usr.cst .cst-paper { padding: 20px 22px; border: 1px solid var(--u-line); border-radius: 6px; background: #fff; color: #111; font-size: 13.5px; line-height: 1.5; }
.usr.cst .cst-paper h2 { margin: 0; font-size: 17px; letter-spacing: .02em; }
.usr.cst .cst-paper .lang { font-size: 12.5px; color: #555; }
.usr.cst .cst-paper .meta { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.usr.cst .cst-paper .row1 { margin-top: 8px; }
.usr.cst .cst-paper .qr { flex: none; text-align: center; }
.usr.cst .cst-paper .qr svg { width: 96px; height: 96px; }
.usr.cst .cst-paper table { width: 100%; border-collapse: collapse; }
.usr.cst .cst-paper th, .usr.cst .cst-paper td { padding: 4px 8px; border: 1px solid #999; text-align: left; font-size: 13px; }
.usr.cst .cst-paper .mono { font-family: Consolas, "Courier New", monospace; }
.usr.cst .cst-paper .total { margin-top: 8px; }
.usr.cst .cst-paper .signs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.usr.cst .cst-paper .signs div { padding-top: 4px; border-top: 1px solid #333; }
.usr.cst .cst-paper .stamp { margin-top: 12px; font-size: 11.5px; color: #555; }

@media (max-width: 760px) {
    .usr.cst .cst-two, .usr.cst .cst-three, .usr.cst .cst-track { grid-template-columns: minmax(0, 1fr); }
    .usr.cst .cst-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usr.cst .cst-paper .meta { flex-direction: column; }
}