* { box-sizing: border-box; }
/* =========================================================================
ДИЗАЙН-ТОКЕНЫ — единая система (как Material/Tailwind/Radix под капотом).
Иерархия задаётся ТОЛЬКО размером и весом одного семейства шрифта;
моноширинный не используем (он визуально «спорит» с sans в одной строке).
Радиусы: кнопки и чипы 8, карточки/модалки 12, инпуты 8 — без пилюль.
========================================================================= */
:root {
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--num: tabular-nums; /* моноширинные цифры без моноширинного шрифта */
--t-2xs: 11px; --t-xs: 12px; --t-sm: 13px; --t-base: 14px;
--t-md: 16px; --t-lg: 20px; --t-xl: 24px; --t-2xl: 28px;
--w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 800;
--r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
--c-ink: #1e1f22; --c-muted: #6b6f78; --c-border: #d6d9de; --c-border-soft: #e3e5e8;
--c-primary: #2d7ef7; --c-primary-strong: #1e6cdb; --c-primary-ink: #1e4a8a;
--c-surface: #fff;
}
html { background: #e9ebef; }
html, body {
margin: 0;
padding: 0;
font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
color: #1e1f22;
}
body {
background: #f5f6f8;
max-width: calc(100vh * 4 / 3);
margin: 0 auto;
min-height: 100vh;
box-shadow: 0 0 0 1px #dcdfe3;
}
.hidden { display: none !important; }
.topbar {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: 20px;
padding: 10px 16px;
background: #fff;
border-bottom: 1px solid #e3e5e8;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.topbar-spacer { flex: 1; }
.topbar-link {
color: #1976d2;
font-size: 13px;
text-decoration: none;
padding: 6px 12px;
border-radius: 4px;
margin-right: 12px;
white-space: nowrap;
}
.topbar-link:hover { background: rgba(25,118,210,0.08); text-decoration: underline; }
.back-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
margin-right: 6px;
border: 1px solid #d0d3d8;
border-radius: 6px;
background: #fff;
font-size: 18px;
cursor: pointer;
vertical-align: middle;
}
.back-btn:hover { background: #f0f3f7; }
/* Topbar CTA «Начать/Продолжить» — рядом с user-chip, чтобы было всегда
на виду и не занимало строку в zayavka-bar (при tablet portrait кнопка
там переносилась). При workStarted=true автоматически скрывается. */
.topbar-start-btn {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 14px;
margin: 0 8px 0 4px;
border-radius: 8px;
border: 1px solid #1e4a8a;
background: #2d7ef7;
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.topbar-start-btn:hover { background: #1e6cd6; }
.topbar-start-btn:active { background: #155ab8; }
.topbar-start-btn.hidden { display: none; }
.topbar-start-btn.tsb-resume { background: #fb923c; border-color: #c2410c; }
.topbar-start-btn.tsb-resume:hover { background: #ea580c; }
/* Разделитель внутри boxes-table между ship-rows (сверху) и source-rows. */
.ship-source-divider td {
background: #f0f4f8;
padding: 4px 8px;
font-size: 11px;
color: #4b5060;
font-weight: 600;
text-align: center;
border-top: 1px solid #c0d4e8;
border-bottom: 1px solid #c0d4e8;
}
.ship-source-divider td span { letter-spacing: 0.4px; text-transform: uppercase; }
.ship-row { background: #f6fbf7; }
.ship-row:hover { background: #ecf7ef; }
.user-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
border-radius: 18px;
background: #f0f1f3;
font-size: 13px;
color: #333;
cursor: default;
}
.user-avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: #2d7ef7;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 13px;
}
.user-name { font-weight: 500; }
.home-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
margin-right: 4px;
text-decoration: none;
font-size: 16px;
color: #555;
border: 1px solid #d0d3d8;
border-radius: 6px;
background: #fff;
vertical-align: middle;
}
.home-link:hover { background: #f0f3f7; }
.logout-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
margin-left: 6px;
border: 1px solid #d0d3d8;
border-radius: 6px;
background: #fff;
font-size: 16px;
cursor: pointer;
color: #666;
}
.logout-btn:hover { background: #ffe8e8; color: #c32d2d; border-color: #f0c8c8; }
body.auth-hidden { visibility: hidden; }
.title {
font-size: 18px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* В заявке заголовок = её номер (главный рабочий параметр) — крупно, моноширинно,
акцентным цветом. В списке — статичное «ПОДБОРЫ» (наследует .title). */
.topbar-title { display: inline-flex; align-items: center; }
.topbar-title.is-zayavka {
font-size: var(--t-lg);
font-weight: var(--w-bold);
letter-spacing: 0;
color: var(--c-primary-ink);
font-variant-numeric: var(--num);
}
.muted { color: #888; font-weight: 400; font-size: 13px; }
.controls {
display: flex;
gap: 12px;
align-items: flex-end;
flex: 1;
justify-content: flex-end;
}
.controls label {
display: flex;
flex-direction: column;
font-size: 11px;
color: #666;
gap: 2px;
}
.controls select {
padding: 6px 8px;
font-size: 14px;
min-width: 200px;
max-width: 280px;
border: 1px solid #d0d3d8;
border-radius: 6px;
background: #fff;
}
.controls select:disabled { background: #f0f1f3; color: #999; }
.toggle-wrap {
flex-direction: row !important;
align-items: center;
gap: 6px !important;
font-size: 13px !important;
color: #333 !important;
padding-bottom: 6px;
cursor: pointer;
user-select: none;
}
.toggle-wrap input { width: 16px; height: 16px; cursor: pointer; }
.meta {
display: flex;
flex-wrap: nowrap; /* НИКОГДА не переносим — сжимаем по ширине (см. CONTEXT §5.x) */
gap: 4px;
padding: 10px 16px;
background: #fff;
border-bottom: 1px solid #e3e5e8;
overflow: hidden;
}
.meta-item {
display: flex;
flex-direction: column;
padding: 4px 10px;
border-right: 1px solid #eaecef;
min-width: 0; /* позволяем ужиматься без переноса */
flex: 1 1 0; /* числовые поля равной доли */
}
.meta-item:first-child { flex: 2 1 0; } /* клиент шире, забирает остаток и обрезается эллипсисом */
.meta-item:last-child { border-right: none; }
.meta-label { font-size: 10px; text-transform: uppercase; color: #8a92a0; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-value { font-size: clamp(13px, 1.6vw, 15px); font-weight: 600; color: #1e1f22; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canvas { padding: 12px 16px 40px; }
/* ----- pager ----- */
.pager {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 10px 16px;
background: #fff;
border-bottom: 1px solid #e3e5e8;
position: sticky;
top: 53px;
z-index: 9;
}
.pager-tiles {
display: flex;
gap: 8px;
flex-wrap: wrap;
flex: 1;
align-items: center;
}
.pager-tile {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
/* ОДИНАКОВАЯ фиксированная ширина у ВСЕХ плиток (масштабируется с экраном
через clamp, но равны между собой). Контент НЕ расширяет плитку: верх — 5
цифр (стабильно), низ — scale-to-fit (fitPagerProgress в app.js). box-sizing
+ overflow:hidden гарантируют постоянную ширину. */
width: clamp(70px, 7vw, 92px);
box-sizing: border-box;
padding: 8px 6px;
overflow: hidden;
border: 1.5px solid #d0d3d8;
background: #fff;
color: #333;
border-radius: 8px;
cursor: pointer;
font-family: "SF Mono", "Consolas", monospace;
transition: background 0.1s, border-color 0.1s;
line-height: 1.1;
}
.pager-tile:hover { background: #f0f3f7; border-color: #b0b8c5; }
.pt-bar5 {
font-size: 18px;
font-weight: 700;
color: #1e1f22;
letter-spacing: 0.5px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pt-progress {
display: block;
width: 100%;
text-align: center;
white-space: nowrap;
transform-origin: center center; /* fitPagerProgress сжимает scale(), не расширяя плитку */
font-size: 11px;
font-weight: 500;
color: #6b7180;
font-variant-numeric: tabular-nums;
}
.pt-sep { color: #b0b8c5; margin: 0 1px; }
.pager-tile.is-active {
background: #2d7ef7;
border-color: #2d7ef7;
}
.pager-tile.is-active .pt-bar5,
.pager-tile.is-active .pt-progress,
.pager-tile.is-active .pt-sep { color: #fff; }
.pager-tile.is-done {
background: #d4edda;
border-color: #1a6b1a;
}
.pager-tile.is-done .pt-bar5 { color: #155724; }
.pager-tile.is-done .pt-progress { color: #1a6b1a; font-weight: 700; }
.pager-tile.is-done.is-active {
background: #1a6b1a;
}
.pager-tile.is-done.is-active .pt-bar5,
.pager-tile.is-done.is-active .pt-progress,
.pager-tile.is-done.is-active .pt-sep { color: #fff; }
.pager-tile.is-progress { border-color: #f0c040; background: #fff8e0; }
.pager-tile.is-progress .pt-progress { color: #856404; font-weight: 600; }
.pager-tile.is-progress.is-active {
background: #f0c040;
border-color: #c89400;
}
.pager-tile.is-progress.is-active .pt-bar5 { color: #1e1f22; }
/* Синхронизация — есть непроведённые изменения (ФАКТ→ПРОЕКЦИЯ). Жёлтая рамка
+ точка-индикатор. Перебивается is-overpick (красный приоритетнее). */
.pager-tile.is-syncing { border-color: #e0a800; background: #fffbe6; }
.pager-tile.is-syncing .pt-progress { color: #8a6d00; font-weight: 600; }
.pager-tile.is-syncing .pt-bar5::after {
content: '●';
color: #e0a800;
font-size: 7px;
vertical-align: super;
margin-left: 3px;
}
.pt-arrow { color: #e0a800; margin: 0 2px; font-weight: 700; }
.pager-tile.is-syncing.is-active { background: #e0a800; border-color: #b08600; }
.pager-tile.is-syncing.is-active .pt-bar5,
.pager-tile.is-syncing.is-active .pt-progress,
.pager-tile.is-syncing.is-active .pt-arrow,
.pager-tile.is-syncing.is-active .pt-sep { color: #fff; }
/* Переподбор — собрано больше плана. Красная плитка-ошибка, перебивает is-done. */
.pager-tile.is-overpick {
background: #ffd6d6;
border-color: #dc2626;
}
.pager-tile.is-overpick .pt-bar5 { color: #b91c1c; }
.pager-tile.is-overpick .pt-progress { color: #dc2626; font-weight: 700; }
.pager-tile.is-overpick.is-active {
background: #dc2626;
border-color: #b91c1c;
}
.pager-tile.is-overpick.is-active .pt-bar5,
.pager-tile.is-overpick.is-active .pt-progress,
.pager-tile.is-overpick.is-active .pt-sep { color: #fff; }
.pager-nav {
padding: 8px 12px;
font-size: 18px;
font-weight: 600;
border: 1px solid #d0d3d8;
background: #fff;
color: #333;
border-radius: 6px;
cursor: pointer;
min-width: 40px;
}
.pager-nav:hover:not(:disabled) { background: #f0f3f7; }
.pager-nav:disabled { color: #ccc; cursor: not-allowed; }
.placeholder {
padding: 60px 20px;
text-align: center;
color: #9aa0a8;
font-size: 15px;
background: #fff;
border: 1px dashed #d0d3d8;
border-radius: 8px;
}
/* ===== Single shared table for ALL groups ===== */
.boxes-table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
font-size: 16px;
background: #fff;
border: 1px solid #d6d9de;
border-radius: 6px;
overflow: hidden;
}
.boxes-table th {
background: #f6f7f9;
text-align: center;
padding: 9px 8px;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.3px;
color: #555;
border-bottom: 1px solid #d6d9de;
white-space: nowrap;
}
.boxes-table td {
padding: 10px 8px;
border-bottom: 1px solid #f0f1f3;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.boxes-table tr.row:last-child td { border-bottom: none; }
/* ----- column widths (table-layout: fixed) ----- */
/* Ширины — в ПРОЦЕНТАХ (sum≈100): таблица заполняет всю ширину без пустых зон,
а при скрытии Тип/МП оставшиеся колонки пропорционально расширяются (а не
оставляют дыру). Раскладка НЕ забирает весь остаток (был col-layout:auto →
данные сжимались влево, раскладка пустовала). */
col.col-sync { width: 3%; }
col.col-addr { width: 6%; } /* адрес 2-3 цифры — узко */
col.col-cells { width: 110px; }
col.col-box { width: 15%; }
col.col-tara { width: 9%; }
col.col-status { width: 13%; }
col.col-sku { width: auto; }
col.col-tip { width: 9%; }
col.col-mp { width: 8%; }
col.col-qty { width: 7%; } /* КОЛ — число */
col.col-inbox { width: 11%; } /* «SKU/Всего» — всегда видим */
col.col-barcode { width: 110px; }
col.col-layout { width: 19%; } /* раскладка — по содержимому, без пустот */
col.col-check { width: 44px; }
/* ----- group summary block (shows above table — one per BAR5 group) ----- */
.group-summary {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 14px 18px;
margin-top: 12px;
margin-bottom: 0;
border-radius: 8px 8px 0 0;
border: 1px solid #d6d9de;
border-bottom: none;
font-weight: 600;
color: #2a2a2a;
}
.group-summary + .boxes-table { border-radius: 0 0 6px 6px; margin-top: 0; }
.group-summary:first-child { margin-top: 0; }
.grp-summary-left {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
/* row-count badge */
.group-summary .grp-rowcount {
display: inline-block;
padding: 5px 12px;
background: rgba(255,255,255,0.7);
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: #444;
}
.grp-rowcount-hidden {
font-size: 12px;
color: #888;
font-weight: 500;
margin-left: 4px;
}
/* full barcode — prefix small/grey, last 5 digits BIG bold */
.group-summary .grp-barcode {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-variant-numeric: var(--num);
}
.group-summary .bc-prefix {
font-size: 14px;
color: #6b6f78;
font-weight: 500;
}
.group-summary .bc-tail {
font-size: 28px;
font-weight: 800;
color: #1e1f22;
letter-spacing: 0.5px;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* ----- cell content styles ----- */
.cell-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cell-center { text-align: center; }
.cell-right { text-align: right; }
.cell-code { font-family: "SF Mono", "Consolas", monospace; font-size: 12px; }
.cell-cells { font-size: 11px; color: #666; white-space: pre-line; line-height: 1.25; }
.cell-cells span.k { display: inline-block; }
.barcode-prefix { font-size: 10px; color: #888; letter-spacing: -0.3px; }
.barcode-tail { font-size: 13px; font-weight: 700; color: #1e1f22; }
.checkbox {
width: 22px; height: 22px;
accent-color: #2d7ef7;
cursor: pointer;
margin: 0;
}
/* ----- sync indicators ----- */
.sync-dot {
display: inline-block;
width: 9px; height: 9px;
border-radius: 50%;
vertical-align: middle;
}
.sync-idle { background: #c9ccd1; }
.sync-connected { background: #f0c040; }
.sync-syncing { background: #999; animation: pulse 0.8s ease-in-out infinite; }
.sync-synced { background: #4caf50; }
.sync-changed {
display: inline-block;
color: #4caf50;
font-size: 14px; font-weight: 700; line-height: 1;
}
.sync-changed::after { content: "✓"; }
.sync-error { background: #e06666; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ----- status badges ----- */
.badge {
display: inline-block;
padding: 2px 6px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.badge-gotovo, .badge-hranenie { background: #d1f0d1; color: #1a6b1a; }
.badge-sobrano, .badge-rezerve { background: #d1e5f5; color: #1e4a7a; }
.badge-priemke, .badge-upakovke { background: #ffe5cc; color: #8a4600; }
.badge-brak { background: #ffd6d6; color: #8a0000; }
.badge-otgr { background: #e5e5e5; color: #555; }
.badge-spis, .badge-izyato, .badge-obez { background: #f0d6ff; color: #6a1e8a; }
.badge-other { background: #eef0f3; color: #555; }
/* ----- МП column hidden by default ----- */
body:not(.show-mp) .col-mp,
body:not(.show-mp) th.col-mp-th,
body:not(.show-mp) td.col-mp-td { display: none; }
/* ----- tablet: hide Type column, compress barcode (столбец «В коробе» —
col-inbox — НЕ скрываем никогда: моно/микс важен подборщику) ----- */
@media (max-width: 1100px) {
col.col-tip, th.col-tip-th, td.col-tip-td { display: none; }
.barcode-prefix { display: none; }
}
/* ----- toast ----- */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 16px;
background: #333;
color: #fff;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s, transform 0.2s;
pointer-events: none;
max-width: 420px;
font-size: 13px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #c32d2d; }
/* =================== START SCREEN =================== */
.screen-start {
padding: 16px;
}
.start-controls {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
padding: 12px 14px;
background: #fff;
border-radius: 8px;
border: 1px solid #e3e5e8;
}
.filter-label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-label select {
padding: 8px 10px;
font-size: 14px;
min-width: 220px;
max-width: 320px;
border: 1px solid #d0d3d8;
border-radius: 6px;
background: #fff;
}
.filter-label select:disabled { background: #f0f1f3; color: #999; }
.filter-label input[type="search"] {
padding: 8px 10px;
font-size: 14px;
min-width: 240px;
max-width: 340px;
border: 1px solid #d0d3d8;
border-radius: 6px;
background: #fff;
}
.filter-label input[type="search"]:focus { outline: 2px solid #1e4a8a; outline-offset: -1px; }
/* На узких экранах (планшет портрет) — поиск на всю ширину, контролы переносятся. */
@media (max-width: 820px) {
.start-controls { flex-wrap: wrap; }
.filter-search { flex: 1 1 100%; }
.filter-label input[type="search"] { max-width: none; width: 100%; box-sizing: border-box; }
}
.start-stats {
margin-left: auto;
font-size: 13px;
color: #555;
font-weight: 500;
}
/* Chip-фильтры рядом с dropdown «Клиент». Одна группа кнопок, активная — заливкой. */
.chip-filters {
display: flex;
gap: 8px;
align-items: flex-end;
/* Опускаем чипы на высоту лейбла + select, чтобы базовая линия совпала с select. */
padding-bottom: 0;
}
.chip-filter {
appearance: none;
border: 1px solid #d0d3d8;
background: #fff;
border-radius: var(--r-md);
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
color: #444;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
min-height: 36px;
white-space: nowrap;
}
.chip-filter:hover { background: #f5f6f8; }
.chip-filter.is-active {
background: #1e1f22;
color: #fff;
border-color: #1e1f22;
}
.chip-filter.chip-urgent.is-active {
background: #c0392b;
border-color: #8a1a10;
box-shadow: 0 0 0 2px #fbd7d2;
}
.chip-filter.chip-urgent:not(.is-active) { color: #8a1a10; border-color: #e8a097; }
/* Группы карточек: в работе → срочно сегодня/завтра → позже. */
.zayavki-groups { display: flex; flex-direction: column; gap: 8px; }
.zg-header {
margin: 12px 0 4px 0;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 8px;
}
.zg-header:first-child { margin-top: 0; }
.zg-progress { color: #15508a; }
.zg-urgent { color: #8a1a10; }
.zg-later { color: #555; }
.zg-count {
display: inline-block;
padding: 1px 8px;
border-radius: 10px;
background: #eef0f3;
color: #555;
font-size: 12px;
font-weight: 600;
}
.zg-progress .zg-count { background: #d8eaff; color: #15508a; }
.zg-urgent .zg-count { background: #fbd7d2; color: #8a1a10; }
/* Cards grid: 2 cols on desktop/planshet, 1 on phone */
.zayavki-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (max-width: 720px) {
.zayavki-grid { grid-template-columns: 1fr; }
}
.zayavki-grid .placeholder {
grid-column: 1 / -1;
}
.zayavka-card {
background: #fff;
border: 1px solid #e3e5e8;
border-left: 4px solid #2d7ef7;
border-radius: 8px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
transition: box-shadow 0.15s;
}
.zayavka-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.zayavka-card.is-locked { opacity: 0.65; border-left-color: #888; }
/* ===== Заливка карточки по статусу заявки =====
* Серый = СОЗДАНО (новая, ожидает старта).
* Жёлтый = В РАБОТЕ / ЧАСТ.СОБР — кто-то уже подбирает, бросается в глаза.
* Зелёный = СОБРАНО / ОТГРУЖЕНО (карточка disabled).
* Левая цветная полоса (pickMode: СВОБ/КОР/КОР+) остаётся независимой. */
.zayavka-card.zc-status-new { background: #f5f6f8; }
.zayavka-card.zc-status-progress { background: #fff7d6; border-color: #e8c84a; }
.zayavka-card.zc-status-progress:hover { box-shadow: 0 2px 8px rgba(232,200,74,0.25); }
.zayavka-card.zc-status-done { background: #eef7ee; opacity: 0.7; }
.zc-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.zc-num {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #1e1f22;
font-family: "SF Mono", "Consolas", monospace;
}
/* Дата отгрузки — крупно в шапке карточки, наравне с номером (главный критерий). */
.zc-date {
font-size: 18px;
font-weight: 800;
color: #1e1f22;
letter-spacing: 0.5px;
font-variant-numeric: tabular-nums;
}
/* Urgency-маркер: сегодня — красный, завтра — жёлтый. Только в шапке карточки. */
.zc-urgent-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
white-space: nowrap;
border: 1.5px solid transparent;
}
.zc-urgent-badge.zc-urgent-today {
background: #c0392b;
color: #fff;
border-color: #8a1a10;
animation: zc-pulse-today 1.6s ease-in-out infinite;
}
.zc-urgent-badge.zc-urgent-tomorrow {
background: #fff3bd;
color: #8a4600;
border-color: #e8c84a;
}
/* Плашка «завершается» — заявка в процессе финиша (заблокирована на всех планшетах). */
.zc-finishing {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
white-space: nowrap;
background: #1e4a8a;
color: #fff;
border: 1.5px solid #14315c;
animation: zc-pulse-today 1.6s ease-in-out infinite;
}
.zc-finishing-card {
opacity: 0.75;
pointer-events: none; /* карточка полностью заблокирована, даже просмотр */
filter: grayscale(0.2);
}
@keyframes zc-pulse-today {
0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.35); }
50% { box-shadow: 0 0 0 6px rgba(192,57,43,0); }
}
/* Доп. подсветка карточки фоном для today/tomorrow. Перебиваем только zc-status-new
* (серый фон новых заявок). Для «В РАБОТЕ»/«ЧАСТ.СОБР»/«СОБРАНО» фон-цвет статуса
* приоритетнее (срочность видна по badge'у). Левую полоску НЕ трогаем — там pickMode. */
.zayavka-card.zc-urgency-today.zc-status-new { background: #fff1ef; }
.zayavka-card.zc-urgency-tomorrow.zc-status-new { background: #fffaee; }
.zc-status {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.zc-status.zb-created { background: #eef0f3; color: #555; }
.zc-status.zb-progress { background: #d1e5f5; color: #1e4a7a; }
.zc-status.zb-partial { background: #ffe5cc; color: #8a4600; }
.zc-status.zb-other { background: #eee; color: #333; }
/* ===== Тип и режим сборки заявки ===== */
/* Бейджи в карточке заявки на стартовом экране (компактные). */
.zc-tags {
display: flex;
gap: 6px;
margin: 4px 0 2px 0;
flex-wrap: wrap;
}
.zc-type, .zc-mode {
display: inline-block;
padding: 3px 9px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
white-space: nowrap;
border: 1px solid transparent;
}
/* Левая цветная полоса карточки = режим сборки (главный визуальный признак). */
.zayavka-card.zm-svob-edge { border-left-color: #1a8a4a; }
.zayavka-card.zm-kor-edge { border-left-color: #c0392b; }
.zayavka-card.zm-kor-plus-edge { border-left-color: #d97a00; }
/* Тип заявки — синий (ОТГ) / фиолетовый (ПЕР). Spaaadium-style. */
.zt-otg { background: #d6e7ff; color: #1d3f7a; border-color: #a8c4ee; }
.zt-per { background: #ece0ff; color: #4a2680; border-color: #c9b3ee; }
/* Режим сборки — зелёный/красный/оранжевый, цветом подчёркиваем уровень ограничений. */
.zm-svob { background: #d4edd4; color: #1a5a2a; border-color: #95cca0; }
.zm-kor { background: #fbd7d2; color: #8a1a10; border-color: #e8a097; }
.zm-kor-plus { background: #ffe2bd; color: #8a4400; border-color: #e8b86a; }
/* В шапке активной заявки бейджи крупнее — это режим работы прямо сейчас. */
.zb-type, .zb-mode {
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
white-space: nowrap;
border: 1.5px solid transparent;
}
.zb-type.zt-otg, .zb-type.zt-per { /* без изменений: цветовые правила выше */ }
/* КОР в шапке делаем максимально заметным — это самый строгий режим. */
.zb-mode.zm-kor { background: #c0392b; color: #fff; border-color: #8a1a10; box-shadow: 0 0 0 2px #fbd7d2; }
.zb-mode.zm-kor-plus { background: #d97a00; color: #fff; border-color: #8a4400; }
.zb-mode.zm-svob { background: #1a8a4a; color: #fff; border-color: #0d5a2c; }
/* Replacement-индикатор «+ Коробы» в КОР: ничего не создаём вручную. */
.zb-auto {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border-radius: 6px;
background: #f0eef7;
color: #4a2680;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
/* Сообщение «Короб не подходит для КОР». */
.kor-blocked {
padding: 24px;
text-align: center;
background: #fff5f4;
border: 2px dashed #c0392b;
border-radius: 12px;
margin: 16px 0;
}
.kor-blocked-title {
font-size: 18px;
font-weight: 700;
color: #8a1a10;
margin-bottom: 8px;
}
.kor-blocked-reason {
font-size: 14px;
color: #8a1a10;
margin-bottom: 12px;
font-family: "SF Mono", Consolas, monospace;
}
.kor-blocked-hint {
font-size: 13px;
color: #555;
line-height: 1.5;
}
/* Авто-таргет в ПОЛН КОРОБ для КОР: tile-выбор скрыт, только текст. */
.full-box-auto {
margin-top: 12px;
padding: 10px 14px;
background: #fbd7d2;
border-left: 4px solid #c0392b;
border-radius: 6px;
display: flex;
align-items: center;
gap: 10px;
}
.kor-auto-icon { font-size: 18px; }
.kor-auto-text { font-size: 13px; color: #8a1a10; font-weight: 500; }
/* СВОБ ПОЛН КОРОБ: короб уходит «как есть», номер сохраняется. Нейтральный синий. */
.full-box-keep {
margin-top: 12px;
padding: 10px 14px;
background: #e7f0ff;
border-left: 4px solid #1e4a8a;
border-radius: 6px;
display: flex;
align-items: center;
gap: 10px;
}
.full-box-keep .kor-auto-text { color: #1e4a8a; }
.full-box-keep b { font-weight: 700; }
/* В КОР кнопка ПОЛН КОРОБ — фиксированная (не toggle), стилизована как лейбл. */
.bm-fullbox-btn.is-fixed {
background: #1a8a4a !important;
color: #fff !important;
border-color: #0d5a2c !important;
cursor: default;
}
.zc-client {
font-size: 14px;
color: #1e1f22;
font-weight: 500;
}
.ks-label {
display: inline-block;
padding: 1px 6px;
margin-left: 6px;
background: #fff5d4;
color: #8a4600;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.zc-direction {
font-size: 12px;
color: #666;
}
.zc-stats {
display: flex;
gap: 18px;
font-size: 13px;
color: #444;
margin-top: 4px;
}
.zc-stats b { color: #1e1f22; font-weight: 700; }
.zc-actions {
margin-top: 6px;
display: flex;
justify-content: flex-end;
}
.zayavka-btn {
padding: 8px 16px;
font-size: var(--t-base);
font-weight: var(--w-semibold);
border: none;
border-radius: var(--r-md);
cursor: pointer;
transition: background 0.15s;
}
.zayavka-btn.primary {
background: #2d7ef7;
color: #fff;
}
.zayavka-btn.primary:hover { background: #1e6cdb; }
.zayavka-btn.disabled {
background: #b8c2d0;
color: #fff;
cursor: not-allowed;
}
/* Кнопка «👁» — открыть заявку в режиме просмотра (без захвата). Стоит слева
от основной «Начать/Продолжить», компактная, нейтрального цвета — чтобы
акцент оставался на основной CTA, но «👁» была всегда доступна. */
.zayavka-btn.zb-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: #475569;
border: 1px solid #cbd5e1;
padding: 8px 12px;
margin-right: 6px;
}
.zayavka-btn.zb-view-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #1e293b; }
.zayavka-btn.zb-view-btn svg { display: block; }
.zc-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* =================== ZAYAVKA BAR (на полотне) =================== */
.zayavka-bar {
position: sticky;
top: 53px;
z-index: 9;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
padding: 8px 16px;
background: #fff;
border-bottom: 1px solid #e3e5e8;
font-size: 13px;
}
.zb-main {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.zb-ks {
display: inline-block;
padding: 1px 6px;
background: #fff5d4;
color: #8a4600;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
.zb-client { color: #1e1f22; font-weight: 500; }
.zb-dir { color: #666; font-size: 12px; }
.zb-stats {
font-size: 12px;
color: #555;
white-space: nowrap;
}
.zb-stats b { color: #1e1f22; font-weight: 700; }
/* =================== GROUP-LEVEL COUNTERS =================== */
.grp-counters {
display: inline-flex;
gap: 8px;
font-weight: 500;
font-size: 15px;
vertical-align: middle;
}
.grp-cnt {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 5px 12px;
border-radius: 14px;
background: rgba(255,255,255,0.7);
color: #333;
font-variant-numeric: tabular-nums;
}
.grp-cnt-lbl {
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.4px;
color: #555;
}
.grp-cnt b { font-weight: 800; font-size: 22px; color: #1e1f22; line-height: 1; }
.grp-cnt.zayav { background: rgba(255,255,255,0.7); }
.grp-cnt.avail.warn { background: #ffe5cc; color: #8a4600; }
.grp-cnt.avail.bad { background: #ffd6d6; color: #8a0000; }
.grp-cnt.picked { background: #d1e5f5; color: #1e4a7a; }
.grp-cnt.picked.over { background: #dc2626; color: #fff; }
.grp-cnt.still.done { background: #d1f0d1; color: #1a6b1a; }
/* Переподбор: собрано больше плана — карточка баркода горит красным как ошибка. */
.group-summary.is-overpick {
background: #ffe2e2 !important; /* перебивает pastel g.color — ошибка важнее группировки */
border: 2px solid #dc2626;
box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.22);
}
.group-summary.is-overpick .bc-tail,
.group-summary.is-overpick .grp-barcode { color: #b91c1c; }
.grp-overpick-badge {
display: inline-flex;
align-items: center;
background: #dc2626;
color: #fff;
font-weight: 700;
font-size: 12px;
line-height: 1;
padding: 4px 10px;
border-radius: 6px;
white-space: nowrap;
}
/* sticky pager offset under zayavka-bar */
body.view-polotno .pager { top: calc(53px + 40px); }
/* =================== SYNC INDICATOR =================== */
.sync-status {
font-size: 12px;
color: #6b7180;
font-variant-numeric: tabular-nums;
padding: 2px 8px;
border-radius: 10px;
margin-right: 12px;
white-space: nowrap;
min-width: 0;
}
.sync-status[data-status="syncing"] { background: #fff3cd; color: #856404; }
.sync-status[data-status="synced"] { background: #d4edda; color: #155724; }
.sync-status[data-status="error"] { background: #f8d7da; color: #721c24; }
.sync-status[data-status="idle"] { display: none; }
/* =================== ZAYAVKA BAR — pct =================== */
.zb-pct { color: #6b7180; }
.zb-pct.zb-pct-done { color: #1a6b1a; font-weight: 700; }
/* =================== POLOTNO ROWS — clickable =================== */
.boxes-table tr.row { cursor: pointer; transition: background 0.1s; }
.boxes-table tr.row:hover { background: #f0f7ff !important; }
.cell-korob { font-weight: 700; }
/* Колонка "Раскладка" — растяжимая, бейдж жмётся к правому краю */
.col-layout { min-width: 96px; }
.layout-badge {
display: inline-block;
padding: 2px 7px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.layout-empty { background: #eef0f3; color: #9aa0a8; }
.layout-podb { background: #d4edda; color: #155724; }
.layout-perem { background: #d6e4ff; color: #1e4a8a; }
.layout-mixed { background: #ffe5cc; color: #8a4600; }
.layout-full { background: #28a745; color: #fff; }
/* =================== BOX MODAL =================== */
body.modal-open { overflow: hidden; }
.box-modal-overlay {
position: fixed; inset: 0;
background: rgba(15, 18, 22, 0.55);
z-index: 100;
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.box-modal-overlay.hidden { display: none; }
.box-modal {
background: #fff;
border-radius: 14px;
width: 100%;
max-width: 920px;
max-height: 92vh;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
/* === modal header === */
.box-modal-header {
display: flex; align-items: center;
gap: 16px; padding: 14px 18px;
border-bottom: 1px solid #e3e5e8;
background: #fafbfc;
}
.bm-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; }
.bm-korob { font-size: 18px; font-weight: 700; }
.bm-meta { font-size: 13px; color: #4b5060; }
.bm-meta b { color: #1e1f22; }
.bm-tariff-wrap { display: flex; align-items: center; }
.bm-tariff {
padding: 4px 12px;
border-radius: 14px;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.bm-free { background: #d4edda; color: #155724; }
.bm-paid { background: #ffe5cc; color: #8a4600; }
.bm-idle { background: #eef0f3; color: #6b7180; }
.bm-close {
width: 32px; height: 32px;
border: none; border-radius: 6px;
background: transparent; color: #4b5060;
font-size: 16px; cursor: pointer;
}
.bm-close:hover { background: #e3e5e8; }
/* === modal body === */
.box-modal-body {
flex: 1;
overflow-y: auto;
padding: 16px 18px;
display: flex; flex-direction: column; gap: 14px;
}
/* === barcode card === */
.barcode-card {
position: relative;
border: 1px solid #e3e5e8;
border-radius: 10px;
background: #fff;
padding: 12px 14px;
}
.barcode-card.is-requested { border-color: #b9d4ff; background: #f6faff; }
/* Карточки, по которым собирать нельзя (уже собрано / не в заявке) — приглушены,
чтобы взгляд сразу падал на те, что нужно добрать (они сверху). */
.barcode-card.bc-dim { opacity: 0.6; background: #fbfbfc; border-color: #e8eaed; }
.barcode-card.bc-dim:hover { opacity: 1; }
/* Разделитель между «нужно собрать» и остальным (собранное / не в заявке). */
.bc-divider {
display: flex; align-items: center; gap: 10px;
margin: 4px 2px; color: #9aa0ad;
font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.bc-divider::before, .bc-divider::after { content: ""; flex: 1; height: 1px; background: #e3e5e8; }
.bc-reset {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
padding: 0;
border: 1px solid #d0d3d8;
border-radius: 6px;
background: #fff;
color: #6b7180;
cursor: pointer;
font-size: 13px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bc-reset:hover { background: #f8d7da; color: #721c24; border-color: #f1aeb5; }
.bc-head {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 12px 18px;
align-items: center;
margin-bottom: 10px;
}
.bc-bar { display: flex; flex-direction: column; gap: 1px; }
.bc-bar5 { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bc-bar-full { font-size: 11px; color: #6b7180; font-variant-numeric: tabular-nums; }
.bc-sku { font-size: 13px; color: #1e1f22; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-qty { font-size: 13px; color: #4b5060; }
.bc-qty b { font-size: 16px; }
.bc-req { font-size: 12px; color: #1e4a7a; background: #d6e4ff; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.bc-req b { font-weight: 700; }
.bc-no-req { background: #eef0f3; color: #6b7180; }
/* === slots: 3 columns === */
.bc-slots {
display: grid;
grid-template-columns: 1fr 1fr 0.6fr;
gap: 10px;
}
.bc-slot {
border: 1px solid #e3e5e8;
border-radius: 8px;
padding: 8px 10px;
background: #fafbfc;
min-width: 0; /* grid-item не должен расширяться под контент (кнопка/инпут) и выталкивать Остаток за форму */
}
.bc-slot label {
display: block;
font-size: 12px;
font-weight: 600;
color: #4b5060;
margin-bottom: 6px;
}
.bc-slot-podb { border-color: #b9d4ff; background: #f6faff; }
/* Баркод не в заявке: слот «На отгрузку» заблокирован (только перекладка). */
.bc-slot-podb.bc-slot-disabled { border-color: #e3e5e8; background: #f5f6f8; }
.podb-blocked { font-size: 13px; color: #8a93a6; line-height: 1.45; padding: 6px 2px; }
.bc-slot-perem { border-color: #ffd49a; background: #fff8ef; }
.bc-slot-rest { background: #eef0f3; }
.slot-body { display: flex; flex-direction: column; gap: 6px; }
.num-row { display: flex; gap: 6px; align-items: stretch; }
.num-btn {
min-width: 44px; height: 44px;
border: 1px solid #d0d3d8; border-radius: 6px;
background: #fff; cursor: pointer;
font-size: 18px; font-weight: 700;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0,123,255,0.15);
}
.num-btn:hover { background: #f0f3f7; }
.num-btn:active { background: #e3eaf3; }
/* Поле количества (type=text inputmode=numeric — см. фикс каретки). Селектор
без [type] — иначе при смене типа поле теряет центрирование и размер. */
.num-row input {
flex: 1; min-width: 0;
height: 44px;
padding: 0 8px;
text-align: center;
font-size: 24px; font-weight: 700;
border: 1px solid #d0d3d8; border-radius: 6px;
font-variant-numeric: tabular-nums;
touch-action: manipulation;
}
.num-row input[type="number"]::-webkit-outer-spin-button,
.num-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.suggest {
height: 36px;
padding: 0 10px;
border: 1px dashed #1e4a8a; border-radius: 6px;
background: #fff; color: #1e4a8a;
cursor: pointer; font-size: 13px; font-weight: 600;
font-variant-numeric: tabular-nums;
}
.suggest:hover { background: #1e4a8a; color: #fff; }
.slot-target {
height: 32px;
padding: 0 8px;
border: 1px solid #d0d3d8; border-radius: 6px;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.bc-slot-rest .rest-value {
font-size: 22px; font-weight: 700;
text-align: center; padding: 8px 0;
font-variant-numeric: tabular-nums;
}
/* === modal footer === */
.box-modal-footer {
border-top: 1px solid #e3e5e8;
background: #fafbfc;
padding: 12px 18px;
}
.bm-totals {
display: flex; gap: 16px;
font-size: 13px; color: #4b5060;
margin-bottom: 8px;
flex-wrap: wrap;
}
.bm-tot b { color: #1e1f22; font-weight: 700; }
.bm-tot-ship b { color: #155724; }
.bm-tot-cell b { color: #1e4a8a; }
.bm-violations {
background: #f8d7da; color: #721c24;
padding: 8px 10px; border-radius: 6px;
font-size: 12px;
margin-bottom: 8px;
}
.bm-violations div { padding: 2px 0; }
.bm-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.bm-actions-right { display: flex; gap: 10px; flex: 0 0 auto; }
.btn-ghost {
background: transparent;
border-color: #d0d3d8;
color: #6b7180;
padding: 8px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid #d0d3d8;
}
.btn-ghost:hover:not(:disabled) { background: #f0f3f7; color: #1e1f22; }
.btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
.btn {
padding: 8px 16px;
border-radius: 8px;
font-size: 14px; font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
}
.btn-secondary { background: #fff; border-color: #d0d3d8; color: #4b5060; }
.btn-secondary:hover { background: #f0f3f7; }
.btn-primary { background: #1e4a8a; color: #fff; }
.btn-primary:hover { background: #163a6f; }
.btn-primary:disabled { background: #b0b8c5; cursor: not-allowed; }
/* === phone responsive (≤ 600 px): bottom-sheet, single-column slots === */
@media (max-width: 600px) {
.box-modal-overlay { padding: 0; align-items: flex-end; }
.box-modal {
max-height: 100vh; max-width: 100%;
border-radius: 14px 14px 0 0;
}
.bc-head { grid-template-columns: auto 1fr; }
.bc-sku { grid-column: 1 / -1; }
.bc-qty { grid-column: 1; }
.bc-req { grid-column: 2; }
.bc-slots { grid-template-columns: 1fr; }
}
/* =================== ZAYAVKA-BAR action button =================== */
.zb-stats {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: nowrap; /* НИКОГДА не переносим — кнопка «Завершить» не уезжает вниз */
min-width: 0;
}
.zb-progress-text { white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zb-btn {
border: 1px solid #1e4a8a;
background: #fff; color: #1e4a8a;
padding: 5px 12px;
border-radius: 8px;
font-size: clamp(11px, 1.4vw, 13px); /* сжимаем шрифт, чтобы влезть в ширину */
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex: 0 1 auto; /* можно ужиматься */
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.zb-btn:hover { background: #1e4a8a; color: #fff; }
/* =================== SHIP TILES (выбор короба отгрузки) =================== */
.ship-tiles {
/* Wrapping-сетка с ограниченной высотой: при 15+ коробах плитки переносятся
по строкам и скроллятся вертикально, а не распирают модалку по ширине.
min-width:0 — критично: не даёт контенту растягивать flex/grid-родителя. */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
gap: 6px;
max-height: 30vh;
overflow-y: auto;
min-width: 0;
padding: 6px 2px 4px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.ship-tiles::-webkit-scrollbar { width: 6px; height: 6px; }
.ship-tiles::-webkit-scrollbar-thumb { background: #c0c5cd; border-radius: 3px; }
.ship-tile {
width: 100%;
min-width: 38px; height: 38px;
padding: 0 5px;
border: 2px dashed #b9d4ff;
border-radius: 8px;
background: #fff;
cursor: pointer;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #1e4a8a;
transition: all 0.1s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ship-tile:hover { background: #e9f2ff; }
.ship-tile.selected {
background: #1e4a8a;
color: #fff;
border-style: solid;
border-color: #1e4a8a;
box-shadow: 0 2px 6px rgba(30,74,138,0.3);
}
.st-num { display: block; line-height: 1; }
.ship-selected-name {
font-size: 12px;
color: #1e4a8a;
margin-top: 4px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.ship-selected-name b { font-weight: 700; }
.ship-empty {
font-size: 12px; color: #6b7180;
padding: 10px 8px;
text-align: center;
background: #f5f6f8;
border-radius: 6px;
border: 1px dashed #d0d3d8;
}
/* Плитка «…» — открыть матрицу всех коробов (при >3 коробах). Стоит СПЕРЕДИ. */
.ship-tile-more {
border-style: solid;
border-color: #1e4a8a;
background: #eef4ff;
flex-direction: column;
line-height: 1;
gap: 1px;
}
.ship-tile-more .st-num { font-size: 18px; }
.ship-tile-more .st-more-cnt { font-size: 9px; font-weight: 600; color: #4a6da8; }
/* Индикация наполнения: пустой короб — контурная (dashed) плитка по умолчанию;
наполненный — сплошная жирная обводка + цвет (есть товар). */
.ship-tile.filled {
border-style: solid;
border-color: #2f9e57;
background: #e7f7ed;
color: #1a7a44;
}
.ship-tile.filled .st-num { color: #1a7a44; }
/* Выбранный приоритетнее наполнения по фону (тёмно-синий), обводку оставляем. */
.ship-tile.selected.filled { background: #1e4a8a; color: #fff; border-color: #1e4a8a; }
.ship-tile.selected.filled .st-num { color: #fff; }
/* Матрица коробов — попап поверх модалки (масштаб до 999). */
.ship-matrix-overlay {
position: fixed; inset: 0; z-index: 60;
background: rgba(20, 30, 50, 0.45);
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.ship-matrix-box {
background: #fff; border-radius: 12px;
width: min(560px, 96vw); max-height: 80vh;
display: flex; flex-direction: column;
box-shadow: 0 10px 40px rgba(0,0,0,0.25);
padding: 12px;
}
.ship-matrix-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.ship-matrix-title { font-size: 14px; font-weight: 700; color: #1e1f22; }
.ship-matrix-close {
width: 32px; height: 32px; border: none; border-radius: 8px;
background: #f0f3f7; color: #555; font-size: 16px; cursor: pointer;
}
.ship-matrix-close:hover { background: #e3e8ef; }
/* Сетка матрицы: РОВНО 10 коробов в строку; до 10 строк видно, дальше скролл
(до 999 = 10×100). Высота сжимается под контент (max-height на .ship-matrix-box). */
.ship-matrix-grid {
grid-template-columns: repeat(10, 1fr);
/* ~10 строк видно (10×49px), дальше вертикальный скролл (до 999 = 100 строк).
Меньше строк → сетка короче, попап сжимается по высоте. */
max-height: min(490px, 68vh); overflow-y: auto; min-width: 0;
flex: 0 1 auto;
gap: 5px;
/* Всегда видимая полоса прокрутки справа — подсказка, что можно листать.
scrollbar-gutter: stable резервирует место, чтобы сетку не дёргало. */
scrollbar-width: auto;
scrollbar-color: #8a93a6 #e7eaf0;
scrollbar-gutter: stable;
}
.ship-matrix-grid::-webkit-scrollbar { width: 12px; height: 12px; }
.ship-matrix-grid::-webkit-scrollbar-track { background: #e7eaf0; border-radius: 6px; }
.ship-matrix-grid::-webkit-scrollbar-thumb {
background: #8a93a6; border-radius: 6px; border: 2px solid #e7eaf0;
}
.ship-matrix-grid::-webkit-scrollbar-thumb:hover { background: #6f7a90; }
.ship-matrix-grid .ship-tile { min-width: 0; font-size: 14px; padding: 0 2px; }
.ship-matrix-grid .ship-tile .st-num { font-size: 14px; }
.ship-matrix-legend {
display: flex; align-items: center; gap: 6px;
margin-top: 8px; font-size: 11px; color: #6b7180;
}
.smk { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; }
.smk-empty { border: 2px dashed #b9d4ff; background: #fff; }
.smk-filled { border: 2px solid #2f9e57; background: #e7f7ed; margin-left: 6px; }
.create-ship-link {
margin-left: 8px;
border: none; background: none;
color: #1e4a8a;
font-weight: 600; cursor: pointer;
font-size: 12px;
text-decoration: underline;
}
/* ===== Визард получателя перекладки (ячейка / короб хранения) ===== */
.pw { margin-top: 6px; }
.pw-hint { font-size: 12px; color: #8a93a6; padding: 4px 2px; }
.pw-q { font-size: 12px; color: #555; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.pw-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pw-btn { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; border: 1.5px solid #b9d4ff; border-radius: 8px; background: #fff; color: #1e4a8a; font-weight: 600; font-size: 14px; cursor: pointer; }
.pw-btn:hover { background: #eef4ff; }
.pw-back, .pw-change { border: none; background: none; color: #1e4a8a; font-size: 12px; cursor: pointer; text-decoration: underline; padding: 2px 4px; }
.pw-chosen { font-size: 14px; color: #1a7a44; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pw-chosen b { font-variant-numeric: tabular-nums; }
.pw-search { width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px; margin-bottom: 6px; border: 1px solid #c8cfda; border-radius: 8px; font-size: 14px; }
.pw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 5px; max-height: 200px; overflow-y: auto; scrollbar-gutter: stable; }
.pw-pick { min-height: 40px; padding: 0 4px; border: 1.5px dashed #b9d4ff; border-radius: 8px; background: #fff; color: #1e4a8a; font-weight: 600; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.pw-pick:hover { background: #eef4ff; }
.pw-empty { font-size: 12px; color: #8a93a6; padding: 8px; }
.pw-newbox { display: flex; flex-direction: column; gap: 8px; }
.pw-newnum { font-size: 14px; } .pw-auto { color: #8a93a6; font-size: 11px; }
.pw-dims { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pw-dims label { font-size: 12px; color: #555; display: inline-flex; align-items: center; gap: 3px; }
.pw-dims input { width: 52px; height: 36px; text-align: center; border: 1px solid #c8cfda; border-radius: 6px; font-size: 14px; }
.pw-tara { font-weight: 700; color: #1a7a44; font-size: 14px; }
.pw-confirm { width: 100%; min-width: 0; white-space: normal; min-height: 44px; border: none; border-radius: 8px; background: #1e4a8a; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.pw-confirm:hover { background: #163a6e; }
/* Заголовок группы в попапе выбора короба-получателя («Уже содержат баркод» /
«Остальные короба»). */
.pw-group-title { font-size: 12px; font-weight: 600; color: #6b6f78; text-transform: uppercase; letter-spacing: 0.4px; margin: 10px 2px 6px; }
.pw-group-title:first-child { margin-top: 2px; }
/* Кнопка открытия попапа выбора получателя (списки — не инлайн). */
.pw-openlist { width: 100%; min-height: 44px; border: 1.5px solid #1e4a8a; border-radius: 8px; background: #eef4ff; color: #1e4a8a; font-weight: 600; font-size: 14px; cursor: pointer; }
.pw-openlist:hover { background: #e0ebff; }
/* Сетка в попапе: ячейки — 5 в строку (фикс под NN_NN), короба — авто. Скролл. */
.pw-pop-grid { display: grid; gap: 5px; max-height: min(420px, 58vh); overflow-y: auto; min-width: 0; scrollbar-gutter: stable; margin-top: 4px; }
.pw-pop-grid::-webkit-scrollbar { width: 12px; }
.pw-pop-grid::-webkit-scrollbar-track { background: #e7eaf0; border-radius: 6px; }
.pw-pop-grid::-webkit-scrollbar-thumb { background: #8a93a6; border-radius: 6px; border: 2px solid #e7eaf0; }
.pw-cell-grid { grid-template-columns: repeat(5, 1fr); }
.pw-box-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.pw-pop-grid .pw-pick { min-height: 44px; }
/* =================== CREATE BOXES MODAL =================== */
.cbm-overlay {
position: fixed; inset: 0;
background: rgba(15, 18, 22, 0.55);
z-index: 110;
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.cbm-overlay.hidden { display: none; }
.cbm-dialog {
background: #fff;
border-radius: 14px;
width: 100%;
max-width: 480px;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
.cbm-header {
display: flex; align-items: center;
gap: 10px; padding: 14px 18px;
border-bottom: 1px solid #e3e5e8;
background: #fafbfc;
}
.cbm-header h3 { margin: 0; font-size: 16px; flex: 1; }
.cbm-zay { font-size: 12px; color: #6b7180; }
.cbm-body {
padding: 16px 18px;
display: flex; flex-direction: column; gap: 14px;
}
.cbm-field label {
display: block;
font-size: 12px;
font-weight: 600;
color: #4b5060;
margin-bottom: 8px;
}
.cbm-quick-row, .cbm-tara-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.cbm-quick, .cbm-tara {
min-width: 48px; height: 36px;
border: 1px solid #d0d3d8; border-radius: 6px;
background: #fff;
cursor: pointer;
font-size: 14px; font-weight: 600;
font-variant-numeric: tabular-nums;
padding: 0 12px;
}
.cbm-quick:hover, .cbm-tara:hover { background: #f0f3f7; }
.cbm-quick.active, .cbm-tara.active {
background: #1e4a8a; color: #fff;
border-color: #1e4a8a;
}
.cbm-num-row { margin-top: 8px; }
.cbm-preview {
background: #eef0f3;
padding: 10px 12px;
border-radius: 6px;
font-size: 13px;
color: #1e1f22;
font-variant-numeric: tabular-nums;
}
.cbm-existing { color: #6b7180; font-size: 12px; margin-left: 6px; }
.cbm-print-note {
font-size: 12px;
color: #856404;
background: #fff3cd;
padding: 8px 10px;
border-radius: 6px;
}
.cbm-footer {
border-top: 1px solid #e3e5e8;
background: #fafbfc;
padding: 12px 18px;
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* === phone responsive === */
@media (max-width: 600px) {
.cbm-overlay { align-items: flex-end; padding: 0; }
.cbm-dialog { max-width: 100%; max-height: 100vh; border-radius: 14px 14px 0 0; }
}
/* =================== RESPONSIVE TABLE COLUMNS ===================
* Стратегия progressive disclosure (best practice WMS):
* Чем уже viewport — тем меньше колонок видно, при этом ширина не «уезжает»
* за границу экрана. Ключевые колонки (Короб, Баркод, Кол) видны всегда.
*
* ≥ 1280px (desktop 4:3): все 12 колонок
* 1024–1279 (планшет landscape): скрыты SKU, Тип, Sku-в-коробе
* 768–1023 (планшет portrait): ↑ + скрыты МП, Все
* 480–767 (телефон landscape): ↑ + скрыты Тара, Статус
* ≤ 479 (телефон portrait/ТСД): ↑ + скрыт Адрес. Остаются: Короб, Кол, Баркод, Раскладка.
*
* `boxes-table { table-layout: fixed; width: 100% }` — в существующих стилях.
* Это удерживает таблицу в пределах контейнера, не давая ей уезжать.
*/
.boxes-table { width: 100%; max-width: 100%; }
/* ≥ 1280: всё видно (no-op) */
/* ВАЖНО: скрывать колонку нужно СИНХРОННО — + | + | , иначе тело
съезжает под чужие заголовки (баг на планшете). SKU-колонка имеет класс
col-kolsku (не col-sku!). Тара/Статус НЕ скрываем — они влезают и нужны. */
@media (max-width: 1279px) {
.col-tip { display: none; }
.col-tip-th, .col-tip-td { display: none; }
}
@media (max-width: 1023px) {
.col-mp { display: none; }
.col-mp-th, .col-mp-td { display: none; }
}
@media (max-width: 767px) {
/* Тара/Статус оставляем видимыми. Только ужимаем шрифт заголовков. */
.boxes-table th { font-size: 11px; }
}
@media (max-width: 479px) {
.col-addr, .col-addr-th, .col-addr-td { display: none; }
/* На ТСД делаем компактнее */
.boxes-table { font-size: 13px; }
.cell-korob { font-size: 14px; }
}
/* Также скроем заголовки соответствующих колонок (по индексу через :nth-child).
* Использую классы выше. Здесь добавляем минимум — gracefully fallback.
*/
/* =================== CELL SUGGEST PILLS (in BoxModal perem slot) =================== */
.cell-suggest {
margin-top: 6px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.cs-label {
font-size: 11px;
color: #6b7180;
margin-right: 4px;
}
.cs-pill {
border: 1px dashed #ffd49a;
background: #fff8ef;
color: #8a4600;
padding: 3px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
cursor: pointer;
white-space: nowrap;
}
.cs-pill:hover { background: #ffe5cc; }
.cs-pill.selected {
background: #ff8a00;
color: #fff;
border-color: #ff8a00;
}
/* =================== CREATE BOXES MODAL — list + manage =================== */
.cbm-section { display: flex; flex-direction: column; gap: 8px; }
.cbm-section-label {
font-size: 12px;
font-weight: 600;
color: #4b5060;
}
.cbm-empty {
font-size: 13px;
color: #6b7180;
padding: 12px;
text-align: center;
background: #f5f6f8;
border-radius: 6px;
}
.cbm-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 240px;
overflow-y: auto;
}
.cbm-row {
display: grid;
grid-template-columns: 32px 1fr auto auto auto;
align-items: center;
gap: 8px;
padding: 6px 8px;
border: 1px solid #e3e5e8;
border-radius: 6px;
background: #fff;
font-size: 13px;
}
.cbm-row.is-used { background: #fafbfc; }
.cbm-row-short {
background: #1e4a8a;
color: #fff;
border-radius: 4px;
text-align: center;
font-weight: 700;
font-size: 13px;
padding: 2px 0;
font-variant-numeric: tabular-nums;
}
.cbm-row-number { font-variant-numeric: tabular-nums; }
.cbm-row-tara { font-size: 11px; color: #6b7180; }
.cbm-row-used { font-size: 11px; color: #856404; background: #fff3cd; padding: 1px 6px; border-radius: 8px; }
.cbm-row-spacer { display: inline-block; width: 1px; }
.cbm-del {
width: 28px; height: 28px;
border: 1px solid #d0d3d8; border-radius: 4px;
background: #fff; color: #c52727;
cursor: pointer;
font-size: 14px;
}
.cbm-del:hover:not([disabled]) { background: #fff0f0; border-color: #c52727; }
.cbm-del[disabled] { opacity: 0.3; cursor: not-allowed; }
.cbm-create {
border-top: 1px solid #e3e5e8;
padding-top: 12px;
margin-top: 4px;
}
/* =================== SETTINGS BUTTON & MENU =================== */
.settings-btn {
width: 36px; height: 36px;
border: 1px solid #d0d3d8; border-radius: 6px;
background: #fff; cursor: pointer;
font-size: 18px; line-height: 1;
}
.settings-btn:hover { background: #f0f3f7; }
.settings-menu {
position: fixed;
z-index: 90;
background: #fff;
border: 1px solid #d0d3d8;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
min-width: 220px;
padding: 6px 0;
}
.settings-menu.hidden { display: none; }
.sm-section { padding: 4px 0; }
.sm-section + .sm-section { border-top: 1px solid #e3e5e8; margin-top: 4px; padding-top: 8px; }
.sm-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6b7180;
padding: 4px 14px;
font-weight: 600;
}
.sm-item {
width: 100%;
display: flex; align-items: center; gap: 10px;
border: none; background: none;
padding: 8px 14px;
font-size: 14px; text-align: left;
cursor: pointer;
color: #1e1f22;
}
.sm-item:hover:not(:disabled) { background: #f0f3f7; }
.sm-item:disabled { color: #b0b8c5; cursor: not-allowed; }
.sm-icon { width: 24px; text-align: center; font-size: 16px; }
.sm-label { flex: 1; }
.sm-hint {
font-size: 12px; color: #6b7180;
background: #eef0f3; padding: 2px 8px; border-radius: 10px;
font-variant-numeric: tabular-nums;
}
.sm-hint-row {
font-size: 11px;
color: #6b7180;
padding: 0 14px 6px;
}
.sm-statuses {
display: flex;
flex-direction: column;
padding: 0 8px 4px;
max-height: 360px;
overflow-y: auto;
}
.sm-checkbox {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
user-select: none;
}
.sm-checkbox:hover { background: #f0f3f7; }
.sm-checkbox input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: #2d7ef7;
margin: 0;
cursor: pointer;
flex-shrink: 0;
}
.sm-checkbox .badge { font-size: 11px; }
/* =================== REST BUTTON (clickable Остаток for micro-invent) =================== */
.bc-slot.bc-slot-rest {
cursor: pointer;
border: 1px solid #d0d3d8;
background: #eef0f3;
text-align: left;
padding: 8px 10px;
display: flex; flex-direction: column; gap: 2px;
transition: all 0.1s;
}
.bc-slot.bc-slot-rest:hover {
background: #e3e5e8;
border-color: #6b7180;
}
.bc-slot.bc-slot-rest .rest-value {
font-size: 22px; font-weight: 700;
text-align: center; padding: 4px 0 2px;
}
.bc-slot.bc-slot-rest .rest-hint {
font-size: 10px; color: #6b7180;
text-align: center;
}
/* =================== MICRO-INVENT MODAL =================== */
.mim-overlay {
position: fixed; inset: 0;
background: rgba(15, 18, 22, 0.55);
z-index: 120;
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.mim-overlay.hidden { display: none; }
.mim-dialog {
background: #fff;
border-radius: 14px;
width: 100%;
max-width: 460px;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.mim-header {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid #e3e5e8;
background: #fafbfc;
}
.mim-header h3 { margin: 0; font-size: 16px; flex: 0 0 auto; }
.mim-sub { font-size: 12px; color: #6b7180; flex: 1; }
.mim-body {
padding: 16px 18px;
display: flex; flex-direction: column; gap: 14px;
}
.mim-old {
background: #eef0f3; padding: 8px 12px; border-radius: 6px;
font-size: 13px; display: flex; gap: 8px; align-items: center;
}
.mim-old b { font-size: 18px; }
.mim-section { display: flex; flex-direction: column; gap: 8px; }
.mim-section label {
font-size: 12px; font-weight: 600; color: #4b5060;
}
.mim-num-row { gap: 4px; }
.mim-num-row input[type="number"] {
flex: 1; min-width: 60px; height: 44px;
font-size: 22px; font-weight: 700;
text-align: center;
border: 1px solid #d0d3d8; border-radius: 6px;
font-variant-numeric: tabular-nums;
}
.mim-num-row .num-btn { height: 44px; min-width: 42px; font-size: 14px; }
.mim-quick-row { display: flex; gap: 4px; }
.mim-quick {
flex: 1; height: 32px;
border: 1px solid #d0d3d8; border-radius: 4px;
background: #fff; cursor: pointer;
font-size: 13px; font-variant-numeric: tabular-nums;
}
.mim-quick:hover { background: #f0f3f7; }
.mim-delta {
font-size: 13px; padding: 4px 10px;
border-radius: 6px; align-self: flex-start;
font-variant-numeric: tabular-nums;
}
.mim-delta-zero { background: #eef0f3; color: #6b7180; }
.mim-delta-up { background: #d4edda; color: #155724; }
.mim-delta-down { background: #ffe5cc; color: #8a4600; }
.mim-section textarea {
border: 1px solid #d0d3d8; border-radius: 6px;
padding: 8px 10px;
font-family: inherit; font-size: 13px;
resize: vertical; min-height: 56px;
}
.mim-warning {
font-size: 11px; color: #856404;
background: #fff3cd; padding: 8px 10px; border-radius: 6px;
}
.mim-footer {
border-top: 1px solid #e3e5e8;
background: #fafbfc;
padding: 12px 18px;
display: flex; justify-content: flex-end; gap: 10px;
}
@media (max-width: 600px) {
.mim-overlay { align-items: flex-end; padding: 0; }
.mim-dialog { max-width: 100%; border-radius: 14px 14px 0 0; }
}
/* =================== ПОЛН КОРОБ button + body =================== */
.bm-fullbox-btn {
margin-left: 10px;
padding: 5px 12px;
border: 1px solid #1e4a8a;
background: #fff; color: #1e4a8a;
border-radius: 6px;
font-size: 12px; font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.bm-fullbox-btn:hover:not(.disabled):not([disabled]) { background: #1e4a8a; color: #fff; }
.bm-fullbox-btn.active {
background: #1e4a8a; color: #fff;
}
.bm-fullbox-btn.disabled, .bm-fullbox-btn[disabled] {
border-color: #d0d3d8; color: #b0b8c5; cursor: not-allowed;
background: #fafbfc;
}
/* Зелёная кнопка «↺ Вернуть на хранение» — обратная операция к «Изъять». */
.bm-fullbox-btn.bm-return-btn {
background: #16a34a; color: #fff; border-color: #16a34a;
}
.bm-fullbox-btn.bm-return-btn:hover:not(.disabled):not([disabled]) {
background: #15803d; border-color: #15803d;
}
.full-box-info {
display: flex; flex-direction: column; gap: 14px;
}
.full-box-explain {
font-size: 13px; color: #4b5060;
background: #d4edda; padding: 10px 14px; border-radius: 8px;
}
.full-box-summary {
width: 100%; border-collapse: collapse;
font-size: 13px;
}
.full-box-summary th, .full-box-summary td {
padding: 6px 8px; border-bottom: 1px solid #e3e5e8; text-align: left;
}
.full-box-summary th {
background: #fafbfc; font-size: 11px; text-transform: uppercase; color: #6b7180;
}
.full-box-summary td.num, .full-box-summary th.num {
text-align: right; font-variant-numeric: tabular-nums;
}
.full-box-target {
border-top: 1px solid #e3e5e8;
padding-top: 12px;
}
.full-box-target label {
display: block; font-size: 13px; font-weight: 600; color: #4b5060;
margin-bottom: 8px;
}
.full-box-target b { color: #1e4a8a; font-variant-numeric: tabular-nums; }
.ship-tile.full-tile { min-width: 56px; height: 56px; font-size: 22px; }
/* === Sync-точки в полотне (статус синхронизации per row) === */
.col-sync { width: 22px; }
.col-sync-th { padding: 4px 0; color: #888; font-size: 11px; }
.col-sync-td { padding: 4px 0; }
.sync-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.sync-dot.sd-green { background: #2ec27e; box-shadow: 0 0 0 1px rgba(46,194,126,0.3); }
.sync-dot.sd-yellow { background: #f5b400; box-shadow: 0 0 0 1px rgba(245,180,0,0.3); animation: sd-pulse 1.5s infinite ease-in-out; }
.sync-dot.sd-red { background: #d83b3b; box-shadow: 0 0 0 1px rgba(216,59,59,0.3); }
@keyframes sd-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
/* === Индикатор X→Y «было → станет» в ячейке «Кол» (§5.5.3) === */
.qty-xy { display: inline-flex; align-items: baseline; gap: 1px; justify-content: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qty-was { color: #9aa0a6; font-weight: 600; text-decoration: line-through; text-decoration-color: rgba(154,160,166,0.55); }
.qty-arrow { color: #e0a800; font-weight: 700; margin: 0 1px; }
.qty-now { color: #8a6d00; font-weight: 800; }
/* «?» — фронт не знает результат (своя op в полёте, ждём ответ бэка). */
.qty-unknown { display: inline-block; min-width: 16px; text-align: center; color: #b8860b; font-weight: 800; font-variant-numeric: tabular-nums; }
/* «В коробе» = SKU·всего товара. Число SKU: моно (1) зелёный — брать удобнее,
микс (>1) янтарный. Сам total — приглушён, вторичен. */
.inbox-cell { font-variant-numeric: tabular-nums; font-size: 12px; color: #6b7180; white-space: nowrap; }
.inbox-cell b { font-weight: 700; }
.inbox-cell .inbox-mono { color: #16a34a; } /* 1 SKU — моно-короб */
.inbox-cell .inbox-mix { color: #b8860b; } /* >1 SKU — микс */
/* Мягкий лок (§5.5.4): строка-фигурант с неподтверждённой операцией. */
.boxes-table tr.row.row-inflight { background: #fffbeb; box-shadow: inset 3px 0 0 #f5b400; cursor: progress; }
.boxes-table tr.row.row-inflight:hover { background: #fff6d6 !important; }
/* Полная история наполнения короба отгрузки — все источники, многострочно. */
.layout-badge.layout-multi { display: inline-block; text-align: left; line-height: 1.3; white-space: normal; font-variant-numeric: tabular-nums; }
/* Пер-ключ лок карточки баркода в модалке (§5.5.4): ключ синхронизируется. */
.barcode-card.bc-key-locked { background: #fffbeb; border-color: #f5d97e; opacity: 0.95; }
.barcode-card.bc-key-locked .bc-qty b { color: #8a6d00; }
.bc-locked-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; color: #856404; background: #fff7e0; border-radius: 8px; margin-top: 6px; line-height: 1.35; }
/* === Кнопка "Завершить" в zayavkaBar === */
.zb-btn.zb-btn-finish { background: #2e7d32; color: #fff; border-color: #2e7d32; font-weight: 600; }
.zb-btn.zb-btn-finish:hover { background: #1b5e20; }
/* === Режим просмотра заявки (viewOnly) === */
/* Бейдж в шапке полотна — синий, спокойный, не мешает. Сразу даёт понять,
что заявка открыта без захвата (изменения не сохранятся). */
.zb-view-badge {
display: inline-flex; align-items: center;
padding: 6px 12px;
background: #e0f2fe;
color: #075985;
border: 1px solid #bae6fd;
border-radius: 16px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Кнопка «🔓 Начать работу» — переход из просмотра в редактирование.
Зелёная как «положительное действие», заметная. */
.zb-btn.zb-btn-switch-work {
background: #16a34a; color: #fff; border-color: #16a34a; font-weight: 600;
}
.zb-btn.zb-btn-switch-work:hover { background: #15803d; border-color: #15803d; }
/* Глобальные правила для body.podbor-view-only — input'ы и слайдеры визуально
readonly, чтобы юзер видел что менять нельзя ДО попытки клика по «Сохранить».
Сами кнопки save/submit заблокированы программно через ensureWorkStarted(). */
body.podbor-view-only input[type="number"],
body.podbor-view-only input[type="text"]:not(.am-input):not(.evt-filters input),
body.podbor-view-only textarea {
background: #f8fafc !important;
color: #475569 !important;
cursor: not-allowed;
}
body.podbor-view-only .zb-btn-finish,
body.podbor-view-only .zb-btn-close,
body.podbor-view-only #btnCreateBoxes {
display: none !important;
}
/* === Модалка финиша full/partial === */
.finish-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.finish-modal-overlay.hidden { display: none; }
.finish-modal { background: #fff; border-radius: 8px; width: 100%; max-width: 720px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.fm-head { padding: 16px 20px; border-bottom: 1px solid #e0e0e0; }
.fm-head h3 { margin: 0 0 6px; font-size: 18px; color: #d32f2f; }
.fm-head p { margin: 0; color: #555; font-size: 14px; }
.fm-body { flex: 1; overflow: auto; padding: 16px 20px; }
.fm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fm-table th { text-align: left; padding: 6px 10px; background: #f5f5f5; border-bottom: 2px solid #ddd; }
.fm-table td { padding: 6px 10px; border-bottom: 1px solid #eee; }
.fm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fm-bar { font-weight: 700; }
.fm-bar-full { color: #888; font-size: 11px; margin-left: 6px; font-family: monospace; }
.fm-over { color: #2e7d32; font-weight: 600; }
.fm-under { color: #d32f2f; font-weight: 600; }
.fm-footer { padding: 12px 20px; border-top: 1px solid #e0e0e0; display: flex; gap: 10px; justify-content: flex-end; }
.btn-warning { background: #f57c00; color: #fff; border: 1px solid #f57c00; }
.btn-warning:hover { background: #ef6c00; }
/* === Баннер блокировки заявки === */
.locked-banner { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.locked-banner.hidden { display: none; }
.lb-content { background: #fff; border-radius: 8px; padding: 24px; max-width: 480px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.lb-icon { font-size: 48px; margin-bottom: 12px; }
.lb-text { margin-bottom: 16px; line-height: 1.6; color: #333; }
.lb-text b { color: #d32f2f; }
/* === In-progress баннер для roll-forward маркера finish_in_progress ===
Не блокирует UI (z-index ниже toast/modal), показывается сверху-узкой
полосой. Жёлтый = «работа идёт, не паникуй». Когда показано >90с —
меняется на оранжевый с кнопкой «Повторить финиш». */
.in-progress-banner {
position: fixed; top: 0; left: 0; right: 0;
z-index: 8500;
background: #fff3cd;
border-bottom: 2px solid #ffd54f;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
padding: 10px 18px;
}
.in-progress-banner.hidden { display: none; }
.ip-content {
display: flex; align-items: center; gap: 14px;
max-width: 1200px; margin: 0 auto;
}
.ip-icon { font-size: 22px; line-height: 1; }
.ip-text { flex: 1; font-size: 13px; color: #5d4e00; line-height: 1.45; }
.ip-text b { color: #856404; font-size: 14px; }
.ip-sub { color: #6c757d; font-size: 12px; }
.ip-warn { color: #c62828; font-weight: 600; }
.in-progress-banner .btn-warning {
background: #f57c00; color: #fff; border-color: #f57c00; font-weight: 600;
}
/* === Карточка завершённой заявки === */
.zayavka-btn.disabled { background: #9e9e9e !important; cursor: not-allowed; opacity: 0.7; }
/* Кнопка «Закрыть без сборки» (zayavka.close) */
.zb-btn.zb-btn-close { background: #d32f2f; color: #fff; border-color: #d32f2f; font-weight: 600; }
.zb-btn.zb-btn-close:hover { background: #b71c1c; }
/* Модалка create-boxes — секция размеров и owner */
.cbm-size-mode { display: flex; gap: 8px; margin-bottom: 8px; }
.cbm-size-btn { flex: 1; padding: 10px 12px; border: 1px solid #ccc; background: #fafafa; border-radius: 6px; cursor: pointer; font-size: 13px; }
.cbm-size-btn:hover { background: #f0f0f0; }
.cbm-size-btn.active { background: #1e4a8a; color: #fff; border-color: #1e4a8a; font-weight: 600; }
.cbm-dim-row { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.cbm-dim-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #666; }
.cbm-dim-row input { width: 60px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; text-align: center; font-size: 14px; }
.cbm-coef { margin-left: 8px; font-size: 14px; color: #333; }
.cbm-coef b { color: #1e4a8a; }
.cbm-owner-row { display: flex; align-items: center; gap: 8px; }
.cbm-owner-btn { padding: 8px 16px; border: 1px solid #ccc; background: #fafafa; border-radius: 6px; cursor: pointer; font-weight: 600; }
.cbm-owner-btn.active { background: #1e4a8a; color: #fff; border-color: #1e4a8a; }
/* === App-modal: универсальная стилизованная модалка (picker, owner) === */
.app-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.app-modal-overlay.hidden { display: none; }
.app-modal { background: #fff; border-radius: 10px; max-width: 460px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,0.3); overflow: hidden; display: flex; flex-direction: column; }
.am-head { padding: 18px 22px 8px; border-bottom: 1px solid #eee; }
.am-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: #1a1a1a; }
.am-head .am-sub { margin: 6px 0 0; color: #666; font-size: 13px; line-height: 1.45; }
.am-body { padding: 18px 22px; }
.am-input { width: 100%; padding: 12px 14px; border: 1.5px solid #ccc; border-radius: 6px; font-size: 16px; font-family: inherit; outline: none; transition: border-color 0.15s; }
.am-input:focus { border-color: #1e4a8a; }
.am-footer { padding: 12px 22px 18px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid #eee; background: #fafafa; }
.am-owner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.am-owner-choice { padding: 22px 16px; border: 2px solid #ccc; border-radius: 10px; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all 0.15s; font-family: inherit; }
.am-owner-choice:hover { border-color: #1e4a8a; background: #f0f6ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30,74,138,0.15); }
.am-owner-choice .am-owner-code { font-size: 32px; font-weight: 800; color: #1e4a8a; letter-spacing: 1px; }
.am-owner-choice .am-owner-label { font-size: 13px; color: #666; }
/* Кнопка «▶ Начать/Продолжить» в полотне (запуск редактирования) */
.zb-btn.zb-btn-start { background: #1976d2; color: #fff; border-color: #1976d2; font-weight: 700; padding: 8px 18px; }
.zb-btn.zb-btn-start:hover { background: #115293; }
.zb-readonly-hint { color: #888; font-size: 12px; font-style: italic; margin-right: 12px; }
/* Скроллящийся список коробов отгрузки (создания/удаления) */
.cbm-list { max-height: 320px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 6px; padding: 4px; }
.cbm-list-empty { max-height: none; }
.cbm-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }
.cbm-row:last-child { border-bottom: none; }
.cbm-row-plus { background: #f9fafb; border: 1.5px dashed #1976d2; cursor: pointer; transition: background 0.15s; width: 100%; text-align: left; font-family: inherit; padding: 8px; border-radius: 6px; margin-top: 4px; }
.cbm-row-plus:hover { background: #e3f2fd; border-color: #115293; }
.cbm-row-plus .cbm-plus { color: #1976d2; font-weight: 800; font-size: 22px; line-height: 1; }
.cbm-row-quickadd { color: #115293; font-weight: 600; }
.cbm-row-tara-default { color: #888; font-size: 11px; }
/* Кликабельная row короба отгрузки + наполнение */
.cbm-row[data-cbm-open] { cursor: pointer; transition: background 0.12s; }
.cbm-row[data-cbm-open]:hover { background: #e8f5e9; }
.cbm-row-fill { font-size: 11px; color: #2e7d32; font-weight: 600; padding: 2px 6px; background: #e8f5e9; border-radius: 4px; }
.cbm-row-fill.empty { color: #999; background: #f5f5f5; font-weight: 400; }
/* Тайл «+» в ряду коробов отгрузки в box modal */
.ship-tile.ship-tile-plus { border: 1.5px dashed #1976d2; background: #f0f6ff; }
.ship-tile.ship-tile-plus .st-num { color: #1976d2; font-weight: 800; font-size: 22px; }
.ship-tile.ship-tile-plus:hover { background: #e3f2fd; border-color: #115293; transform: translateY(-1px); }
.ship-hint { color: #888; font-size: 11px; margin-top: 4px; font-style: italic; }
/* Кнопки НАЧ / ЛОГ в баре заявки */
.zb-btn.zb-btn-nach { background: #f57c00; color: #fff; border-color: #f57c00; font-weight: 700; }
.zb-btn.zb-btn-nach:hover { background: #ef6c00; }
.zb-btn.zb-btn-log { background: #5c6bc0; color: #fff; border-color: #5c6bc0; font-weight: 600; }
.zb-btn.zb-btn-log:hover { background: #3949ab; }
/* Модалка НАЧ */
.nach-modal { max-width: 880px; }
.nm-body { padding: 18px 22px; max-height: 70vh; overflow-y: auto; }
.nm-section { margin: 16px 0 8px; font-size: 14px; color: #1a1a1a; }
.nm-section-free { color: #2e7d32; }
.nm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nm-table th { text-align: left; padding: 6px 10px; background: #f5f5f5; border-bottom: 2px solid #ddd; font-weight: 600; }
.nm-table td { padding: 6px 10px; border-bottom: 1px solid #eee; }
.nm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.nm-table .nm-full { color: #888; font-size: 11px; margin-left: 6px; font-family: monospace; }
.nm-table .nm-free td { color: #2e7d32; }
.nm-empty { color: #888; font-style: italic; padding: 12px; }
/* Модалка ЛОГ
table-layout: fixed — обязательно, иначе длинный email в .plm-by раздувает
колонку и текст наплывает на соседний столбец (жалоба склада 2026-05-21:
«Соня Романова закрывает другие данные»).
Колонки фиксированы через в JS-рендере (см. renderPicklogModal). */
.picklog-modal { max-width: 920px; }
.plm-body { padding: 14px 22px; max-height: 72vh; overflow-y: auto; }
.plm-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.plm-table th { text-align: left; padding: 6px 10px; background: #f5f5f5; border-bottom: 2px solid #ddd; position: sticky; top: 0; font-weight: 600; }
.plm-table td { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
/* Колонка «Время» — фиксированная ширина, не переносится. */
.plm-time {
white-space: nowrap;
color: #666;
font-family: monospace;
font-size: 11px;
}
/* Колонка «Кто» — фиксированная ширина с ellipsis. Полный email во tooltip
(title-атрибут проставляет JS). Жирность сохранена для читаемости actor'а. */
.plm-by {
color: #1a1a1a;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Колонка «Действие» — переносится по словам, но длинные коды (баркоды)
разбиваются по символу, иначе ломают layout. */
.plm-summary {
color: #333;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: anywhere;
}
/* SKU в шапке группы баркода — крупное, читаемое, с переносами и адаптацией.
Заменяет столбец col-sku в полотне, нужно для планшета (узкий portrait). */
.grp-sku {
display: inline-block;
margin-left: 10px;
padding: 2px 8px;
background: rgba(255, 255, 255, 0.7);
border-radius: 6px;
color: #1a1a1a;
font-size: clamp(11px, 1.6vw, 15px);
font-weight: 500;
line-height: 1.3;
max-width: clamp(260px, 50vw, 600px);
word-break: break-word;
white-space: normal;
vertical-align: middle;
}
/* На очень узких экранах (планшет portrait < 720px) SKU переносится на новую
строку, чтобы не сжимать barcode и счётчики. */
@media (max-width: 720px) {
.grp-summary-left { flex-wrap: wrap; align-items: flex-start; }
.grp-sku { display: block; margin-left: 0; margin-top: 4px; width: 100%; max-width: 100%; font-size: 13px; }
}
/* ===========================================================================
TABLET PORTRAIT (целевое устройство Подбора) — ≤ 900px
Принципы (CONST/05 § 2a):
- Touch-target ≥ 44px, отступ между ≥ 8px
- Никаких горизонтальных overflow, всё в flex-wrap
- Шапка заявки переходит в вертикальный stack: info → actions
- Барkод-кнопки и pager-nav компактнее (но всё ещё touch-friendly)
- Текст не разрывается слогами (word-break: normal)
=========================================================================== */
@media (max-width: 900px) {
/* === Шапка заявки: вертикальный stack, info над action-кнопками === */
.zayavka-bar {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px 12px;
}
.zb-main {
flex: none;
width: 100%;
align-items: center;
gap: 6px 8px;
flex-wrap: wrap;
}
.zb-main > * { flex: 0 0 auto; }
.zb-client { font-size: 13px; font-weight: 600; }
.zb-dir { font-size: 11px; color: #6b7180; word-break: normal; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; }
.zc-status { font-size: 11px; padding: 2px 8px; }
.zb-type, .zb-mode { font-size: 11px; padding: 2px 7px; }
/* === Action-кнопки (Коробы / НАЧ / ЛОГ / Закрыть / Завершить) ===
НИКОГДА не переносим — сжимаем (flex-shrink + clamp шрифта). Одна кнопка
вниз = недопустимо (CONTEXT §5.x). При крайней нехватке — гориз. скролл
группы, но не перенос. */
.zb-stats {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
white-space: nowrap;
width: 100%;
min-width: 0;
overflow-x: auto;
}
.zb-progress-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.zb-btn {
min-height: 44px;
padding: 8px 10px;
font-size: clamp(11px, 2.3vw, 13px);
border-radius: 8px;
flex: 0 1 auto;
min-width: 0;
}
.zb-readonly-hint { font-size: 11px; width: 100%; }
/* === Pager баркодов: компактнее, но touch-friendly. Ширину задаёт clamp в
базовом .pager-tile (все плитки равны) — min-width здесь НЕ ставим, иначе
контент снова растянул бы плитку. === */
.pager-bar { gap: 6px; padding: 6px 12px; }
.pager-tile { padding: 6px 5px; border-radius: 8px; }
.pt-bar5 { font-size: 15px; letter-spacing: 0; }
.pt-progress { font-size: 10px; }
.pager-nav {
min-width: 44px; min-height: 44px;
padding: 8px 10px;
font-size: 16px;
}
/* === Карточки заявок на стартовом экране === */
.zayavka-card { padding: 10px 12px; }
.zayavka-btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
/* === Полотно коробов: компактнее, видимы все главные данные === */
.boxes-table { font-size: 12px; }
.boxes-table th, .boxes-table td { padding: 5px 6px; }
.group-summary { padding: 8px 10px; gap: 8px; }
.grp-counters { gap: 5px; flex-wrap: wrap; }
.grp-cnt { font-size: 11px; padding: 1px 5px; }
.grp-barcode { font-size: 17px; }
.grp-rowcount { font-size: 11px; }
.grp-sku { font-size: 12px; margin-left: 6px; padding: 2px 6px; }
/* === Скрытые на планшете служебные колонки (tip/mp). Столбец «В коробе»
(col-inbox = SKU·всего) ОСТАВЛЯЕМ видимым — моно/микс важен подборщику. */
.col-tip-th, .col-tip-td,
.col-mp-th, .col-mp-td { display: none; }
}
/* === Очень узкие экраны (ТСД-future, узкий телефон) === */
@media (max-width: 600px) {
.pager-tile { padding: 5px 4px; }
.pt-bar5 { font-size: 14px; }
.pt-progress { font-size: 9px; }
.zb-btn { font-size: 12px; padding: 7px 12px; min-height: 42px; }
.zb-progress-text { font-size: 12px; min-width: 110px; }
.pager-nav { min-width: 40px; min-height: 40px; padding: 6px 8px; font-size: 15px; }
.grp-barcode { font-size: 16px; }
.grp-sku { display: block; margin-left: 0; margin-top: 4px; width: 100%; box-sizing: border-box; }
.boxes-table { font-size: 11px; }
.boxes-table th, .boxes-table td { padding: 4px 5px; }
}
/* === Цвета статусов коробов (унифицированная палитра) ===
Применяется к колонке «СТАТУС» в полотне коробов (`.badge.badge-*`).
Семантика — мягкие пастельные фоны с тёмным текстом для контраста.
Источник правды: 1_CONST/03_CURRENT_GAS_SYSTEM.md § 3 (статусы коробов).
Эта секция в КОНЦЕ файла, чтобы override-ить ранние декларации (cascade).
В СБОРКЕ — жёлтый (идёт работа)
СОБРАНО — зелёный (завершено успешно)
ХРАНЕНИЕ — серый (спокойный default)
ИЗЪЯТО — line-through, тёмно-серый
ГОТОВО — голубой (подготовлено к работе)
Не вошедшие в палитру статусы (БРАК / СПИСАНО / В РЕЗЕРВЕ / В ПРИЕМКЕ /
В УПАКОВКЕ / ОТГРУЖЕНО / ОБЕЗЛИЧКА) рендерятся через старые badge-классы
без override — оставлены ниже как TODO если потребуется доработать. */
.badge.badge-progress { background: #fff3cd; color: #856404; } /* В СБОРКЕ */
.badge.badge-sobrano { background: #d4edda; color: #155724; } /* СОБРАНО */
.badge.badge-hranenie { background: #e2e3e5; color: #383d41; } /* ХРАНЕНИЕ */
.badge.badge-izyato { background: #d6d8db; color: #6c757d; text-decoration: line-through; } /* ИЗЪЯТО */
.badge.badge-gotovo { background: #cce5ff; color: #004085; } /* ГОТОВО */
/* TODO: остальные статусы (БРАК, СПИСАНО, В РЕЗЕРВЕ, В ПРИЕМКЕ, В УПАКОВКЕ,
ОТГРУЖЕНО, ОБЕЗЛИЧКА) — переcмотреть палитру при необходимости. */
/* Layout-badge: метка «полное изъятие короба → S...» — отдельный сине-стальной
стиль, чтобы отличать от частичной раскладки (layout-podb / layout-perem). */
.layout-badge.layout-fulltake {
background: #cce5ff;
color: #004085;
font-weight: 600;
}
/* === Progress / result modal (используется при finish, close и др. долгих операциях) ===
Переиспользует finish-modal-overlay для overlay-positioning, но содержимое
меняется в зависимости от состояния (processing / success / error). */
.pm-state-processing, .pm-state-result {
background: #fff;
border-radius: 10px;
width: 100%;
max-width: 520px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Заголовок ошибки и многострочное сообщение для showCriticalErrorModal.
Используются вместе с pm-state-result.pm-error в blocking error modal. */
.pm-error-title {
font-size: 17px;
font-weight: 700;
color: #721c24;
margin-top: -6px;
}
.pm-message-multiline {
white-space: pre-line;
text-align: left;
width: 100%;
font-size: 14px;
line-height: 1.55;
}
.pm-details {
width: 100%;
margin-top: 4px;
font-size: 12px;
color: #666;
}
.pm-details summary {
cursor: pointer;
user-select: none;
padding: 4px 0;
}
.pm-details pre {
background: #f5f5f5;
padding: 8px 10px;
border-radius: 6px;
overflow-x: auto;
max-height: 140px;
font-size: 11px;
color: #333;
}
.pm-body {
padding: 32px 24px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
text-align: center;
}
.pm-message {
font-size: 15px;
line-height: 1.5;
color: #1a1a1a;
}
.pm-state-result.pm-success .pm-message { color: #155724; }
.pm-state-result.pm-error .pm-message { color: #721c24; }
.pm-spinner {
width: 52px;
height: 52px;
border: 4px solid #e0e0e0;
border-top-color: #1976d2;
border-radius: 50%;
animation: pm-spin 0.9s linear infinite;
}
@keyframes pm-spin {
to { transform: rotate(360deg); }
}
.pm-icon {
width: 64px;
height: 64px;
display: block;
}
.pm-footer {
padding: 12px 22px 18px;
display: flex;
justify-content: center;
gap: 10px;
border-top: 1px solid #eee;
background: #fafafa;
}
.pm-close-btn, .pm-retry-btn, .pm-dismiss-btn {
min-width: 140px;
padding: 10px 22px;
}
/* Чек-лист этапов финиша заявки — показывается под спиннером */
.pm-steps {
list-style: none;
margin: 16px 0 0;
padding: 0;
text-align: left;
min-width: 360px;
max-width: 480px;
}
.pm-step {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
font-size: 14px;
transition: opacity 0.25s, color 0.25s;
}
.pm-step-icon {
display: inline-flex;
width: 22px;
height: 22px;
justify-content: center;
align-items: center;
border-radius: 50%;
font-weight: bold;
font-size: 14px;
flex-shrink: 0;
}
.pm-step-pending { color: #8a8a8a; opacity: 0.55; }
.pm-step-pending .pm-step-icon { background: #eee; color: #aaa; }
.pm-step-active { color: #0a4d8c; font-weight: 500; }
.pm-step-active .pm-step-icon { background: #cfe2ff; color: #0a4d8c; animation: pm-pulse 1.2s infinite; }
.pm-step-done { color: #155724; }
.pm-step-done .pm-step-icon { background: #d4edda; color: #155724; }
@keyframes pm-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* ===================================================================
Архив заявок (read-only history)
=================================================================== */
.arch-filters {
display: flex;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
padding: 14px 16px;
background: #fff;
border-bottom: 1px solid #e3e5e8;
}
.arch-filter-field {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: #5a6068;
}
.arch-filter-field span { font-weight: 500; }
.arch-filter-field input {
height: 32px;
padding: 0 10px;
border: 1px solid #d0d3d8;
border-radius: 6px;
background: #fff;
font-size: 14px;
color: #1e1f22;
min-width: 140px;
}
.arch-filter-field input[type="text"] { min-width: 220px; }
.arch-filter-field input:focus { outline: none; border-color: #2d7ef7; box-shadow: 0 0 0 2px rgba(45,126,247,0.18); }
.arch-btn {
height: 32px;
padding: 0 14px;
border-radius: 6px;
border: 1px solid #d0d3d8;
background: #fff;
font-size: 14px;
cursor: pointer;
color: #1e1f22;
}
.arch-btn:hover { background: #f0f3f7; }
.arch-btn-primary { background: #2d7ef7; color: #fff; border-color: #1e4a8a; font-weight: 600; }
.arch-btn-primary:hover { background: #1e6cd6; }
.arch-stats { color: #6b7280; font-size: 13px; margin-left: auto; align-self: center; }
.arch-main { padding: 16px; }
.arch-table-wrap {
background: #fff;
border: 1px solid #e3e5e8;
border-radius: 8px;
overflow: auto;
}
.arch-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.arch-table thead th {
position: sticky;
top: 0;
background: #f5f6f8;
text-align: left;
font-weight: 600;
color: #5a6068;
padding: 10px 12px;
border-bottom: 1px solid #e3e5e8;
white-space: nowrap;
}
.arch-table tbody td {
padding: 10px 12px;
border-bottom: 1px solid #f0f1f3;
vertical-align: middle;
}
.arch-table tbody tr:last-child td { border-bottom: none; }
.arch-table tbody tr.arch-row { cursor: pointer; }
.arch-table tbody tr.arch-row:hover { background: #f7f9fc; }
.arch-num { text-align: right; font-variant-numeric: tabular-nums; }
.arch-zid { font-weight: 600; margin-right: 6px; }
.arch-placeholder {
text-align: center;
padding: 32px 12px;
color: #6b7280;
font-style: italic;
}
.arch-err { color: #b91c1c; }
.arch-badge {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 4px;
background: #e5e7eb;
color: #374151;
vertical-align: middle;
}
.arch-badge.badge-sobrano { background: #d1fae5; color: #065f46; }
.arch-badge.badge-partial { background: #fef3c7; color: #92400e; }
.arch-badge.badge-closed { background: #e5e7eb; color: #4b5563; }
.arch-badge.badge-brak { background: #fee2e2; color: #991b1b; }
.arch-badge.badge-other { background: #e5e7eb; color: #374151; }
.arch-badge-status { background: #dbeafe; color: #1e40af; padding: 4px 10px; font-size: 12px; }
/* free/paid маркеры для коробов-источников (renderSources): free = бесплатно
изъят целиком, paid = платная услуга (раскладка / часть в ячейку / остаток).
Тон спокойный — это инфо, а не предупреждение. */
.arch-badge-ok { background: #d1fae5; color: #065f46; }
.arch-badge-warn { background: #fef3c7; color: #92400e; }
/* Подзаголовок секции (используется в renderSources для пояснения фильтра). */
.arch-sub { margin: 6px 0 10px; color: #6b7280; font-size: 12px; }
/* === Журнал событий (events.html) === */
/* Переключатель режима отображения: Операции / Отдельные события */
.evt-mode-switcher {
display: flex; gap: 4px;
padding: 10px 18px 0;
background: #fff;
}
.evt-mode-btn {
padding: 8px 16px;
border: 1px solid #cbd5e1;
background: #fff;
color: #475569;
border-radius: 6px 6px 0 0;
cursor: pointer;
font-size: 13px;
font-weight: 500;
border-bottom: none;
}
.evt-mode-btn:hover { background: #f1f5f9; }
.evt-mode-btn.active {
background: #1976d2;
color: #fff;
border-color: #1976d2;
font-weight: 600;
}
/* В режиме «Операции» — главная колонка с человекочитаемым описанием. */
.evt-summary {
font-size: 13px;
color: #1e293b;
line-height: 1.5;
}
.evt-summary code { background: #fff7ed; padding: 1px 6px; border-radius: 3px; color: #9a3412; font-size: 12px; }
/* Кнопка раскрытия группы → показать технические шаги */
.evt-expand-btn {
padding: 2px 10px;
border: 1px solid #c7d2fe;
background: #eef2ff;
color: #3730a3;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
}
.evt-expand-btn:hover { background: #e0e7ff; }
.evt-expand-none { color: #94a3b8; font-size: 11px; }
/* Технический шаг внутри раскрытой операции — визуально выделяем
светло-синей полосой слева чтобы было видно «это вложенные подэлементы». */
.evt-step-row {
background: #f0f9ff;
font-size: 11px;
}
.evt-step-row td { border-top: 1px dashed #bae6fd !important; padding: 4px 8px !important; }
.evt-step-row td:first-child {
border-left: 3px solid #0ea5e9 !important;
padding-left: 28px !important;
}
.evt-step-time { color: #0c4a6e; font-family: monospace; }
.evt-step-action { background: #e0f2fe; padding: 1px 5px; border-radius: 3px; font-size: 10px; color: #075985; }
/* === Режим «Устройства» === */
.evt-devices-block {
padding: 14px 18px 8px;
background: #fff;
}
.evt-devices-block h3 {
margin: 0 0 10px 0;
font-size: 14px;
color: #1e293b;
}
.evt-devices-block h3 small {
color: #64748b;
font-weight: 400;
font-size: 12px;
margin-left: 6px;
}
.evt-dev-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
margin-right: 4px;
vertical-align: middle;
}
.evt-dev-dot-green { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.evt-dev-dot-yellow { background: #eab308; }
.evt-dev-actor {
font-family: monospace;
font-size: 11px;
color: #334155;
word-break: break-all;
}
.evt-dev-muted { color: #94a3b8; }
.hidden { display: none !important; }
.evt-filters {
display: flex; flex-wrap: wrap; gap: 12px 16px;
align-items: flex-end;
padding: 14px 18px;
background: #fff;
border-bottom: 1px solid #e3e5e8;
}
.evt-filter-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6b7280; }
.evt-filter-field span { font-weight: 500; }
.evt-filter-field input[type="text"],
.evt-filter-field select {
padding: 6px 10px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 13px;
background: #fff;
}
.evt-filter-field input[type="text"] { min-width: 180px; }
.evt-filter-field select { min-width: 160px; }
.evt-filter-check { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: #333; }
.evt-table-wrap { padding: 12px 14px; overflow-x: auto; }
.evt-table { table-layout: fixed; width: 100%; font-size: 12px; }
.evt-table th, .evt-table td { vertical-align: top; padding: 6px 8px; }
.evt-time { font-family: monospace; color: #555; white-space: nowrap; }
.evt-zayavka { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt-zlink, .evt-clink { color: #1976d2; text-decoration: none; }
.evt-zlink:hover, .evt-clink:hover { text-decoration: underline; }
.evt-actor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; }
.evt-action code { background: #f3f4f6; padding: 1px 6px; border-radius: 3px; font-size: 11px; color: #1f2937; }
.evt-details { color: #555; word-break: break-word; overflow-wrap: anywhere; }
.evt-details code { background: #fff7ed; padding: 1px 4px; border-radius: 3px; color: #9a3412; font-size: 11px; }
.evt-err-text { color: #b91c1c; font-weight: 500; }
.evt-details-btn {
background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3;
padding: 1px 8px; border-radius: 3px; font-size: 11px; cursor: pointer;
}
.evt-details-btn:hover { background: #e0e7ff; }
.evt-details-pre {
margin: 4px 0 0; padding: 6px 8px;
background: #1e293b; color: #e2e8f0;
border-radius: 4px; font-size: 11px;
white-space: pre-wrap; max-height: 220px; overflow: auto;
}
.evt-row-error { background: #fef2f2; }
.evt-row-error:hover { background: #fee2e2; }
.evt-status { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.evt-st-ok { background: #d1fae5; color: #065f46; }
.evt-st-err { background: #fee2e2; color: #991b1b; }
.evt-st-tout { background: #fef3c7; color: #92400e; }
.evt-st-start { background: #dbeafe; color: #1e40af; }
.evt-st-other { background: #e5e7eb; color: #374151; }
.evt-pagination {
display: flex; align-items: center; gap: 12px;
padding: 12px 18px; justify-content: center;
border-top: 1px solid #e3e5e8; background: #fafafa;
}
.evt-page-info { color: #4b5563; font-size: 13px; }
.evt-clear-corr { color: #1976d2; margin-left: 12px; text-decoration: none; font-size: 12px; }
.evt-clear-corr:hover { text-decoration: underline; }
/* Live-индикатор: показывает что polling включён (3с) или приостановлен. */
.evt-live-indicator {
display: inline-flex; align-items: center;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
margin-left: auto;
}
.evt-live-on { background: #dcfce7; color: #166534; }
.evt-live-paused { background: #fef3c7; color: #92400e; }
.evt-live-idle { background: #e5e7eb; color: #4b5563; }
/* Блок «Квота Sheets API» — реальные цифры использования read/write квоты.
Жёлтый при >50% от лимита, красный при >80%. */
.evt-quota {
display: flex; flex-wrap: wrap; align-items: center;
gap: 8px 16px;
padding: 8px 18px;
background: #f8fafc;
border-bottom: 1px solid #e3e5e8;
font-size: 12px;
color: #475569;
}
.evt-quota-label { font-weight: 600; color: #1e293b; }
.evt-quota-cell {
padding: 2px 10px;
border-radius: 12px;
background: #fff;
border: 1px solid #e2e8f0;
font-family: monospace;
}
.evt-quota-cell.evt-quota-busy { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.evt-quota-cell.evt-quota-danger { background: #fee2e2; color: #991b1b; border-color: #fecaca; font-weight: 600; }
.evt-quota-warn { color: #b91c1c; font-weight: 600; }
/* ===== Detail view ===== */
.arch-detail { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.arch-head {
background: #fff;
border: 1px solid #e3e5e8;
border-radius: 8px;
padding: 16px 18px;
}
.arch-head-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.arch-head-top h1 { margin: 0; font-size: 20px; font-weight: 600; }
.arch-head-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px 18px;
}
.arch-head-grid > div { display: flex; flex-direction: column; gap: 2px; }
.arch-k { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; }
.arch-v { font-size: 14px; color: #1e1f22; }
.arch-money { font-weight: 600; }
.arch-section {
background: #fff;
border: 1px solid #e3e5e8;
border-radius: 8px;
padding: 14px 18px;
}
.arch-section h2 {
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 600;
color: #1e1f22;
}
.arch-section h2 .arch-stats { font-weight: 400; font-size: 13px; color: #6b7280; margin-left: 6px; }
.arch-section h3 { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: #5a6068; text-transform: uppercase; letter-spacing: 0.03em; }
.arch-table-compact th, .arch-table-compact td { padding: 6px 10px; font-size: 13px; }
.arch-table-compact code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.arch-nach-summary {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px 18px;
padding: 10px 0 14px;
border-bottom: 1px dashed #e3e5e8;
}
.arch-nach-summary > div { display: flex; flex-direction: column; gap: 2px; }
/* ===== Timeline ===== */
.arch-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-row {
display: grid;
grid-template-columns: 28px 80px 150px 140px 1fr;
gap: 10px;
align-items: baseline;
padding: 6px 8px;
border-radius: 6px;
font-size: 13px;
border-left: 3px solid transparent;
}
.ev-row:hover { background: #f7f9fc; }
.ev-icon { font-size: 16px; text-align: center; }
.ev-ts { font-variant-numeric: tabular-nums; color: #6b7280; font-size: 12px; }
.ev-type { font-weight: 600; color: #1e1f22; }
.ev-by { color: #6b7280; font-size: 12px; }
.ev-desc { color: #374151; word-break: break-word; }
.ev-desc code { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.ev-raw { margin: 0; font-size: 11px; color: #6b7280; white-space: pre-wrap; }
.ev-row.ev-start { border-left-color: #10b981; }
.ev-row.ev-finish { border-left-color: #2563eb; background: #f0f7ff; }
.ev-row.ev-close { border-left-color: #6b7280; background: #f5f6f8; }
.ev-row.ev-layout { border-left-color: #f59e0b; }
.ev-row.ev-full { border-left-color: #8b5cf6; }
.ev-row.ev-ship { border-left-color: #06b6d4; }
.ev-row.ev-ship-del { border-left-color: #ef4444; }
.ev-row.ev-inv { border-left-color: #f97316; background: #fff7ed; }
.ev-row.ev-other { border-left-color: #9ca3af; }
@media (max-width: 768px) {
.ev-row { grid-template-columns: 24px 70px 1fr; }
.ev-by, .ev-type { grid-column: 3 / 4; }
.ev-desc { grid-column: 1 / 4; padding-left: 36px; }
}
|