/*
 * Админ-панель: элементы рабочих страниц (реквизиты, путь заказа,
 * проверки, отправки, переписка, склад) — в общей дизайн-системе
 * (rk-ui.css подключается раньше этого файла).
 */

/* Кнопки внутри страниц исторически стоят с отступом сверху — формы
   панели на это рассчитаны. */
.rk-admin main button, .rk-admin main .btn { margin-top: 14px; }
.rk-admin main .rk-btn, .rk-admin main .rk-chip, .rk-admin main .rk-table button,
.rk-admin main .rk-table .btn, .rk-admin main .rk-actions button, .rk-admin main .rk-actions .btn,
.rk-admin main .rk-toolbar button, .rk-admin main .rk-toolbar .btn,
.rk-admin main .rk-page-actions button, .rk-admin main .rk-page-actions .btn { margin-top: 0; }
.rk-admin main button.small, .rk-admin main .btn.small { margin: 0; }
.rk-admin label { color: var(--rk-muted); font-weight: 600; }
.rk-admin form { margin: 0; }
@media (min-width: 768px) { .rk-admin form.rk-toolbar { margin: 0 0 14px; } }

h2 .muted-inline { font-weight: 400; color: var(--rk-muted); font-size: 13px; }
a.row-link { color: var(--rk-text); text-decoration: none; display: block; font-weight: 500; }
a.row-link:hover { color: var(--rk-red); }

.rk-admin .badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; line-height: 1.3;
    background: var(--rk-red-soft); color: #c4182e; white-space: nowrap;
}
.rk-admin .badge.final { background: var(--rk-gray-soft); color: var(--rk-gray-text); }
.rk-admin .badge.success { background: var(--rk-green-soft); color: var(--rk-green-text); }
.rk-admin .badge.warning { background: var(--rk-orange-soft); color: var(--rk-orange-text); }
.rk-admin .badge.danger { background: var(--rk-danger-soft); color: #b42318; }
.rk-admin .badge.info { background: var(--rk-blue-soft); color: var(--rk-blue-text); }

.req-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--rk-surface-2); border: 1px solid var(--rk-border); border-radius: var(--rk-r); margin-bottom: 6px; }
.req-row .req-text { flex: 1; min-width: 0; }
.req-row .req-label { font-size: 12px; color: var(--rk-muted); }
.req-row .req-value { font-weight: 600; word-break: break-all; }
.rk-admin .copy-btn { flex: none; margin: 0; padding: 5px 10px; font-size: 12px; background: #fff; color: var(--rk-text); border: 1px solid var(--rk-border-strong); border-radius: 8px; box-shadow: none; }
.rk-admin .copy-btn:hover { background: var(--rk-surface-2); color: var(--rk-text); }
.rk-admin .copy-btn.copied { background: var(--rk-green-soft); color: var(--rk-green-text); }

.flow-steps { list-style: none; margin: 0; padding: 0; }
.flow-steps li { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; color: var(--rk-muted); }
.flow-steps li .dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--rk-surface-3); flex: none; }
.flow-steps li.done { color: var(--rk-text); }
.flow-steps li.done .dot { background: var(--rk-green); color: #fff; }
.flow-steps li.current { color: var(--rk-text); font-weight: 700; }
.flow-steps li.current .dot { background: var(--rk-red); color: #fff; box-shadow: 0 0 0 4px var(--rk-red-soft); }
.reason { font-size: 12.5px; color: var(--rk-orange-text); margin-top: 4px; }

.pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 3px 9px; border-radius: 7px; background: var(--rk-gray-soft); color: var(--rk-gray-text); }
.pill.ok { background: var(--rk-green-soft); color: var(--rk-green-text); }
.pill.warn { background: var(--rk-orange-soft); color: var(--rk-orange-text); }
.pill.accent { background: var(--rk-red-soft); color: #c4182e; }

.inline-form { display: inline-block; margin: 0; }
.rk-admin main .inline-form button { margin: 0; }
.fl-summary { background: var(--rk-surface-2); border: 1px solid var(--rk-border); border-radius: var(--rk-r); padding: 10px 12px; margin-bottom: 10px; }
.fl-headline { font-weight: 700; font-size: 15px; }
.fl-breakdown { margin: 4px 0; padding-left: 18px; font-size: 13px; color: var(--rk-muted); }
.rk-admin .fl-item { border: 1px solid var(--rk-border); border-radius: var(--rk-r); padding: 12px; margin-bottom: 10px; scroll-margin-top: 90px; background: #fff; }
.rk-admin .fl-item:target { border-color: var(--rk-red); box-shadow: 0 0 0 3px var(--rk-red-soft); }
.fl-head { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.fl-check input { width: 18px; height: 18px; margin: 2px 0 0; }
.fl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rk-admin main .fl-actions button, .rk-admin main .fl-actions .btn { font-size: 13px; padding: 7px 12px; margin-top: 0; }
.fl-inspection { background: var(--rk-surface-2); border-radius: var(--rk-r); padding: 10px 12px; margin-top: 10px; }
.fl-inspection summary, .fl-edit summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.fl-edit { margin-top: 8px; }
.fl-bulk { border-top: 1px solid var(--rk-border); padding-top: 10px; margin-top: 6px; }
.rk-admin .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 8px 0; }
.media-cell img, .media-cell video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; background: #000; }
.media-cell form { margin-top: 4px; }
.ship-group { border: 1px solid var(--rk-border); border-radius: var(--rk-r); padding: 8px 10px; margin-bottom: 8px; }
.balance-box { border-radius: var(--rk-r); padding: 10px 12px; font-size: 13.5px; margin: 8px 0; }
.balance-box.ok { background: var(--rk-green-soft); }
.balance-box.warn { background: var(--rk-orange-soft); }
.rk-admin .check-line { display: flex; gap: 8px; align-items: center; font-weight: 600; margin: 4px 0; cursor: pointer; color: var(--rk-text); }
.rk-admin .check-line input { width: 18px; height: 18px; flex: none; margin: 0; }
.pickup-line { padding: 6px 0; border-bottom: 1px solid var(--rk-border); }
.pickup-line:last-of-type { border-bottom: none; }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 160px; }
.totals { font-size: 14px; }
.totals .grand { font-size: 19px; font-weight: 800; margin-top: 6px; }
.search-bar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.search-bar input, .search-bar select { width: auto; flex: 1; min-width: 140px; }
.rk-admin main .search-bar button, .rk-admin main .search-bar .btn { margin-top: 0; }
.comment { padding: 10px 0; border-bottom: 1px solid var(--rk-border); font-size: 14px; }
.comment:last-child { border-bottom: none; }
.comment .meta { color: var(--rk-muted); font-size: 12px; margin-bottom: 3px; }

.chat-thread { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding: 4px 2px; }
.chat-message { display: flex; flex-direction: column; max-width: 78%; }
.chat-message.chat-in { align-self: flex-start; align-items: flex-start; }
.chat-message.chat-out { align-self: flex-end; align-items: flex-end; }
.chat-bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; word-break: break-word; }
.chat-in .chat-bubble { background: var(--rk-surface-2); border: 1px solid var(--rk-border); border-bottom-left-radius: 4px; }
.chat-out .chat-bubble { background: var(--rk-nav-bg); color: #fff; border-bottom-right-radius: 4px; }
.rk-admin .chat-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 6px; }
.rk-admin .chat-files img, .rk-admin .chat-files video { width: 100%; height: 96px; object-fit: cover; border-radius: 8px; display: block; background: #000; }
.chat-out .chat-files a { color: #fff; }
.chat-bubble img { max-width: 200px; border-radius: 8px; display: block; margin-bottom: 4px; }
.chat-out .chat-bubble a { color: #fff; }
.chat-meta { font-size: 11px; color: var(--rk-muted); margin-top: 3px; padding: 0 4px; }

.item-row { border: 1px solid var(--rk-border); border-radius: var(--rk-r); padding: 14px; margin-bottom: 12px; background: var(--rk-surface-2); }
.item-row .row-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.item-row .row-header .idx { font-weight: 600; font-size: 13px; color: var(--rk-muted); }
.rk-admin .remove-row, .rk-admin .remove-row:hover { background: none; border: none; color: var(--rk-danger); font-size: 13px; cursor: pointer; margin: 0; padding: 4px 8px; box-shadow: none; }
.thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rk-border); background: var(--rk-surface-3); }
.stat-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-box { flex: 1; min-width: 140px; background: var(--rk-surface-2); border: 1px solid var(--rk-border); border-radius: var(--rk-r); padding: 14px 16px; }
.stat-box .value { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-box .label { font-size: 12px; color: var(--rk-muted); margin-top: 2px; }
.timeline-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rk-border); font-size: 13px; }
.timeline-item:last-child { border-bottom: none; }
.timeline-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rk-red); margin-top: 5px; flex-shrink: 0; }

.file-upload-label {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border: 1px dashed var(--rk-border-strong); border-radius: var(--rk-r);
    background: #fff; font-size: 14px; color: var(--rk-text); cursor: pointer; max-width: 100%;
    margin: 0;
}
.file-upload-label:hover { border-color: var(--rk-red); }
.file-upload-label:active { background: var(--rk-surface-2); }
.file-upload-label .file-upload-icon { flex: none; font-size: 16px; }
.file-upload-label .file-upload-name { color: var(--rk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-upload-label input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.modal-box .row { gap: 10px; }
.modal-box .row > * { flex: 1; margin: 0 !important; min-width: 0; }

@media (max-width: 640px) {
    .card { padding: 15px; }
    .row { gap: 8px; }
    .row > * { min-width: 0; flex: 1 1 100%; }
    .rk-admin main button, .rk-admin main .btn { width: 100%; }
    .rk-admin main .row .btn, .rk-admin main .row button,
    .rk-admin main .rk-table button, .rk-admin main .rk-table .btn,
    .rk-admin main button.small, .rk-admin main .btn.small,
    .rk-admin main .copy-btn, .rk-admin main .remove-row,
    .rk-admin main .rk-chip { width: auto; }
    .search-bar { flex-direction: column; align-items: stretch; }
    .search-bar input, .search-bar select, .search-bar .btn, .search-bar button { width: 100%; }
    .stat-grid { gap: 8px; }
    .stat-box { min-width: 45%; padding: 12px; }
    .stat-box .value { font-size: 18px; }
    .item-row .row { flex-wrap: wrap; }
}

/* Сведения в боковом меню и шапке: курс юаня и склад */
.rk-rate { display: flex; flex-direction: column; justify-content: center; line-height: 1.25; color: var(--rk-nav-text); font-size: 12px; font-weight: 600; white-space: nowrap; padding: 0 6px; }
.rk-rate b { color: #fff; font-size: 13px; }
.rk-rate .rk-rate-num { color: #ff6b7d; }
.rk-rate span { color: var(--rk-nav-muted); font-weight: 500; }
@media (max-width: 1199px) { .rk-rate { display: none; } }

.modal-box h3 { color: var(--rk-danger); }
.rk-guest-shell main.rk-main { max-width: 520px; padding-top: 32px; }
.rk-guest .rk-topbar .rk-brand { width: auto; }

/* Таблица заказов: заголовок закреплён при прокрутке страницы */
.rk-admin .rk-orders-table th { top: var(--rk-topbar-h); }
.rk-admin .rk-table-wrap.is-sticky { overflow: visible; }
@media (max-width: 1199px) {
    .rk-admin .rk-table-wrap.is-sticky { overflow-x: auto; }
    .rk-admin .rk-orders-table th { top: 0; }
}
.rk-attn-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #b8172b; white-space: normal; line-height: 1.3; }
.rk-attn-chip svg { width: 14px; height: 14px; }
.rk-attn-chip.is-warn { color: var(--rk-orange-text); }
.rk-attn-chip.is-ok { color: var(--rk-green-text); }

/* Карточка заказа: разделы под рукой при прокрутке */
.rk-section-nav { position: sticky; top: var(--rk-topbar-h); z-index: 30; background: var(--rk-bg); padding: 8px 2px 10px; margin: 0 -2px 8px; }
.rk-section-nav .rk-chip { height: 32px; font-size: 13px; }
/* Карточка заказа на ПК: правая колонка стоит под закреплённой строкой разделов, а не под шапкой */
@media (min-width: 1100px) {
    .rk-section-nav ~ .rk-layout > aside {
        top: calc(var(--rk-topbar-h) + 66px);
        max-height: calc(100vh - var(--rk-topbar-h) - 114px);
    }
}
.rk-admin .card[id] { scroll-margin-top: 58px; } /* плюс отступ прокрутки страницы (шапка) — карточка встаёт под строкой разделов */
.rk-action-row:hover { background: var(--rk-surface-2); }

/* Кнопки управления клиентом в карточке заказа — ровная сетка 2×2 на ПК */
@media (min-width: 768px) {
    .rk-admin .rk-btn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .rk-admin .rk-btn-grid > form { margin: 0; min-width: 0; }
    .rk-admin .rk-btn-grid > form > button { width: 100%; height: 100%; margin: 0; padding-left: 8px; padding-right: 8px; line-height: 1.25; }
}

/* Склад: кнопки действий под заголовком — по ширине текста на ПК (на телефоне — во всю ширину, как раньше) */
@media (min-width: 768px) {
    .rk-admin main .rk-head-actions { gap: 10px; align-items: center; }
    .rk-admin main .rk-head-actions > * { flex: 0 0 auto; min-width: 0; margin: 0; }
}

/* Страница «Безопасность» (21.10.2026) */
.rk-admin .rk-sec-events { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; }
.rk-admin .rk-sec-events li { font-size: 13px; line-height: 1.45; padding: 8px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.rk-admin .rk-sec-events li:last-child { border-bottom: 0; }
.rk-admin .rk-sec-staff { list-style: none; margin: 0; padding: 0; }
.rk-admin .rk-sec-staff li { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rk-admin .rk-sec-staff li:last-child { border-bottom: 0; padding-bottom: 0; }
.rk-admin .rk-sec-staff-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rk-admin .rk-sec-staff-main b { font-size: 14px; }
.rk-admin .rk-sec-staff form { margin: 0; }
.rk-admin .rk-sec-staff .rk-btn { align-self: flex-start; }
.rk-admin .rk-sec-state { list-style: none; margin: 0; padding: 0; }
.rk-admin .rk-sec-state li { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.rk-admin .rk-sec-state li:first-child { padding-top: 2px; }
.rk-admin .rk-sec-state li:last-child { border-bottom: 0; padding-bottom: 0; }
.rk-admin .rk-sec-what { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rk-admin .rk-sec-what b { font-size: 14px; }
.rk-admin .rk-sec-what span, .rk-admin .rk-sec-how span:not(.badge) { font-size: 12.5px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.rk-admin .rk-sec-how { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.rk-admin .rk-sec-how span.rk-sec-num { font-size: 15px; font-weight: 700; color: var(--text); }
.rk-admin .rk-sec-who { font-weight: 600; white-space: normal; overflow-wrap: anywhere; word-break: break-word; max-width: 340px; }
.rk-admin .rk-sec-how code { font-size: 11.5px; background: var(--rk-gray-soft); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }