/* WMS Portal: хаб контуров, календарь ворот, форма и карточка заявки. База — styles.css (форк портала WMS Central). */

/* Цвета статусов (ТЗ §21): переменные, одна пара на статус — фон / рамка / текст. */
:root {
  --s-booked: #E3EDFF; --s-booked-b: #5B7FBD; --s-booked-t: #2E4A7A;
  --s-confirmed: #E2F0E7; --s-confirmed-b: #12653C; --s-confirmed-t: #0E4D2F;
  --s-enroute: #EDE7FA; --s-enroute-b: #7B5EA7; --s-enroute-t: #4B3577;
  --s-arrived: #FFF3C7; --s-arrived-b: #C9852A; --s-arrived-t: #6B4300;
  --s-unloading: #FFE4CC; --s-unloading-b: #D9641E; --s-unloading-t: #7A3400;
  --s-done: #E6EBE6; --s-done-b: #6E8A74; --s-done-t: #3C4F42;
  --s-cancelled: #F0F0EE; --s-cancelled-b: #9A9A94; --s-cancelled-t: #5E5E58;
  --s-noshow: #FBE7E4; --s-noshow-b: #B3261E; --s-noshow-t: #7A1B15;
  --cal-break: repeating-linear-gradient(135deg, var(--track) 0 6px, transparent 6px 12px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --s-booked: #1C2E4A; --s-booked-b: #7FA3E0; --s-booked-t: #DCE7FF;
    --s-confirmed: #143824; --s-confirmed-b: #63D194; --s-confirmed-t: #DDF5E7;
    --s-enroute: #2B2340; --s-enroute-b: #B49BE0; --s-enroute-t: #E9DFFF;
    --s-arrived: #3A3006; --s-arrived-b: #F2B705; --s-arrived-t: #FFEFB0;
    --s-unloading: #40230C; --s-unloading-b: #F08A3C; --s-unloading-t: #FFD9BD;
    --s-done: #1E2A21; --s-done-b: #8FA895; --s-done-t: #D5E0D8;
    --s-cancelled: #262A27; --s-cancelled-b: #6E7870; --s-cancelled-t: #B9C2BB;
    --s-noshow: #3D1714; --s-noshow-b: #FF9A8F; --s-noshow-t: #FFD3CE;
  }
}

/* Статусы: текст, плашка в карточке, блоки календаря и недели, образцы легенды */
.status-text { font-size: var(--t-cap); font-weight: 600; white-space: nowrap; }
.status-text.s-BOOKED { color: var(--s-booked-b); }
.status-text.s-CONFIRMED { color: var(--ok); }
.status-text.s-EN_ROUTE { color: var(--s-enroute-b); }
.status-text.s-ARRIVED { color: var(--s-arrived-b); }
.status-text.s-UNLOADING { color: var(--s-unloading-b); }
.status-text.s-DONE { color: var(--s-done-b); }
.status-text.s-CANCELLED { color: var(--muted); text-decoration: line-through; }
.status-text.s-NO_SHOW { color: var(--error); }
.status-text.s-MOVED { color: var(--warn); }
.status-text .late { color: var(--error); }
.tally-num .status-text { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--track); white-space: normal; text-align: right; }
.tally-num .status-text.s-CONFIRMED { background: var(--ok-bg); }
.tally-num .status-text.s-BOOKED { background: var(--s-booked); }
.tally-num .status-text.s-ARRIVED { background: var(--s-arrived); }
.tally-num .status-text.s-UNLOADING { background: var(--s-unloading); }
.tally-num .status-text.s-DONE { background: var(--s-done); }
.s-BOOKED.cal-b, .s-BOOKED.week-b, .cal-swatch.s-BOOKED { background: var(--s-booked); border-color: var(--s-booked-b); color: var(--s-booked-t); }
.s-CONFIRMED.cal-b, .s-CONFIRMED.week-b, .cal-swatch.s-CONFIRMED { background: var(--s-confirmed); border-color: var(--s-confirmed-b); color: var(--s-confirmed-t); }
.s-EN_ROUTE.cal-b, .s-EN_ROUTE.week-b, .cal-swatch.s-EN_ROUTE { background: var(--s-enroute); border-color: var(--s-enroute-b); color: var(--s-enroute-t); }
.s-ARRIVED.cal-b, .s-ARRIVED.week-b, .cal-swatch.s-ARRIVED { background: var(--s-arrived); border-color: var(--s-arrived-b); color: var(--s-arrived-t); }
.s-UNLOADING.cal-b, .s-UNLOADING.week-b, .cal-swatch.s-UNLOADING { background: var(--s-unloading); border-color: var(--s-unloading-b); color: var(--s-unloading-t); }
.s-DONE.cal-b, .s-DONE.week-b, .cal-swatch.s-DONE { background: var(--s-done); border-color: var(--s-done-b); color: var(--s-done-t); }
.s-CANCELLED.cal-b, .s-CANCELLED.week-b, .cal-swatch.s-CANCELLED { background: var(--s-cancelled); border-color: var(--s-cancelled-b); color: var(--s-cancelled-t); border-style: dashed; text-decoration: line-through; }
.s-NO_SHOW.cal-b, .s-NO_SHOW.week-b, .cal-swatch.s-NO_SHOW { background: var(--s-noshow); border-color: var(--s-noshow-b); color: var(--s-noshow-t); border-style: dashed; }
.cal-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid; flex: none; }
.cal-legend { padding: 10px 16px 14px; }

/* Хаб */
.hub { display: flex; flex-direction: column; gap: 0; }
.hub-grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px; }
.pkg { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.pkg-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg); color: var(--brand); }
.pkg-ico svg { width: 24px; height: 24px; }
.ico-frost { color: #3d7ea6; } .ico-doors { color: #a67c3d; } .ico-delivery { color: #5a8f4a; }
.pkg-body { min-width: 0; }
.pkg-body h3 { margin: 0 0 2px; font-size: var(--t-name); font-weight: 600; }
.pkg-code { font-size: 12px; color: var(--muted); letter-spacing: .02em; margin-bottom: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.pkg-body p { font-size: var(--t-cap); color: var(--muted); line-height: 1.4; }
.pkg-note { margin-top: 8px; font-size: var(--t-cap); font-weight: 600; color: var(--text); }
.pkg-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pkg-kind { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pkg-kind.k-internal { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.pkg-kind.k-stub { color: var(--warn); border-color: var(--mark); background: var(--warn-bg); }
.pkg-enter { min-height: 40px; padding: 6px 14px; font-size: var(--t-cap); text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.hub-rail { background: var(--surface); border-top: 1px solid var(--line); }
.rail-list { max-height: none; }
.rail-line { border-left-color: transparent; }
.rail-line .oline-top b { white-space: normal; }
.hub-rail .actions { flex-direction: row; flex-wrap: wrap; }
.hub-rail .actions .btn { flex: 1 1 160px; }

/* Ворота: панель инструментов */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 16px 12px; }
.search { flex: 1 1 220px; min-height: 44px; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--surface); color: var(--text); font: inherit; }
.search:focus { outline: 3px solid var(--mark); outline-offset: 1px; }
.filter { min-height: 44px; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); color: var(--text); font: inherit; }
.toolbar .btn { min-height: 44px; }

/* Календарь */
.cal-wrap { overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--line); }
.cal { min-width: max(100%, calc(140px + var(--cols) * 84px)); }
.cal-head, .cal-row { display: grid; grid-template-columns: 140px 1fr; }
/* Шапку не делать sticky: внутри прокручиваемого .cal-wrap она сдвигалась бы на top и накрывала первую зону. */
.cal-head { background: var(--surface); border-bottom: 2px solid var(--text); }
.cal-corner, .cal-zone { position: sticky; left: 0; z-index: 1; background: var(--surface); border-right: 1px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-corner b, .cal-zone b { font-weight: 600; font-size: var(--t-body); }
.cal-corner small, .cal-zone small { font-size: 12px; color: var(--muted); line-height: 1.25; }
.cal-track { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(84px, 1fr)); grid-auto-rows: minmax(64px, auto); }
.cal-head .cal-track { grid-auto-rows: auto; }
.cal-col { grid-row: 1; padding: 8px 6px; font-size: var(--t-cap); color: var(--muted); font-weight: 600; border-left: 1px solid var(--line); text-align: left; }
.cal-col.break { background: var(--cal-break); color: var(--warn); font-size: 11px; }
.cal-row { border-bottom: 1px solid var(--line); }
.cal-cell { grid-row: 1; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--idle); font-size: 18px; min-height: 64px; cursor: pointer; }
.cal-cell:hover:not(:disabled) { background: var(--ok-bg); color: var(--ok); }
.cal-cell:disabled { cursor: default; color: transparent; }
.cal-cell.break { background: var(--cal-break); }
.cal-cell.closed { background: var(--bg); }
.cal-b { grid-row: 1; z-index: 1; margin: 6px 4px; padding: 6px 8px; border-radius: 8px; border: 1.5px solid; text-align: left; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.cal-b b { font-weight: 600; font-size: var(--t-cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-b small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.cal-b.hit { box-shadow: 0 0 0 3px var(--mark); }
.cal-b.overtime { border-style: double; }
.cal-b.off { grid-column: calc(var(--cols) - 1) / span 2; opacity: .85; }
.cal-b:active { filter: brightness(.95); }

/* Неделя: колонки — дни, строки — зоны */
.week { min-width: max(100%, calc(140px + var(--days) * 150px)); }
.week-head, .week-row { display: grid; grid-template-columns: 140px repeat(var(--days), minmax(150px, 1fr)); }
.week-head { background: var(--surface); border-bottom: 2px solid var(--text); }
.week-corner, .week-zone { position: sticky; left: 0; z-index: 1; background: var(--surface); border-right: 1px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.week-zone b, .week-corner b { font-weight: 600; }
.week-zone small { font-size: 12px; color: var(--muted); }
.week-day { padding: 8px 8px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.week-day b { font-weight: 600; font-size: var(--t-cap); }
.week-day small { font-size: 12px; color: var(--muted); }
.week-day.today b { color: var(--ok); }
.week-row { border-bottom: 1px solid var(--line); }
.week-cell { border-left: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-height: 56px; }
.week-cell.today { background: var(--ok-bg); }
.week-b { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 5px 7px; border-radius: 7px; border: 1.5px solid; font-size: 12px; line-height: 1.25; min-width: 0; }
.week-b b { font-weight: 700; }
.week-b span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-b small { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-add { align-self: flex-start; border: 1.5px dashed var(--line); background: transparent; color: var(--idle); border-radius: 7px; min-width: 36px; min-height: 28px; font-size: 16px; }
.week-add:hover { color: var(--ok); border-color: var(--ok); }

/* Удалённые склады */
.remote { padding-bottom: 12px; }
.remote-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0 12px; }
.remote-card { gap: 6px; }
.remote-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btn.small { min-height: 36px; padding: 4px 10px; font-size: var(--t-cap); }
.remote-line { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; padding: 8px 0; font-size: var(--t-cap); }
.remote-line b { font-weight: 600; }
.remote-line.s-CANCELLED { color: var(--muted); text-decoration: line-through; }
.remote-line.s-CONFIRMED b { color: var(--ok); }

/* Список */
.list-table th, .list-table td { text-align: left; white-space: normal; }
.list-table td.num, .list-table th.num { text-align: right; white-space: nowrap; }
.list-table tbody th { white-space: nowrap; }
.trow { cursor: pointer; }
.trow:hover > * { background: var(--bg); }
.trow.s-CANCELLED > * { color: var(--muted); }

/* Форма заявки */
.dialog.wide { max-width: 760px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
.form-grid .field { margin-top: 10px; }
.form-grid .field.wide { grid-column: 1 / -1; }
.field span em { font-style: normal; color: var(--idle); }
.field.text input, .field.text select, .field.text textarea { font-size: var(--t-body); font-weight: 500; min-height: 44px; }
.field.text select { font-size: var(--t-body); font-weight: 500; }
.field.check { flex-direction: row; align-items: center; gap: 10px; margin-top: 14px; }
.field.check input { width: 22px; height: 22px; margin: 0; }
.field.check span { font-size: var(--t-body); color: var(--text); }
.problems { margin: 12px 0 0; padding: 10px 12px 10px 28px; border-radius: 8px; background: var(--error-bg); color: var(--error); font-weight: 600; font-size: var(--t-cap); }
.problems li + li { margin-top: 4px; }
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--t-cap); color: var(--muted); }
.suggest .chip { min-height: 36px; padding: 4px 12px; font-size: var(--t-cap); }
@media (min-width: 600px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid.narrow { grid-template-columns: 1fr; } }

/* Карточка заявки */
.tally-meta span + span::before { content: '·'; margin: 0 8px 0 0; color: var(--idle); }
.history .eline { padding-left: 16px; padding-right: 16px; border-bottom: 1px solid var(--line); }
.history .eline:last-child { border-bottom: 0; }
.history .eline-text small { display: block; margin-top: 2px; font-size: var(--t-cap); color: var(--muted); }
.banner a { color: inherit; font-weight: 700; }

/* Факт и KPI в карточке */
.fact { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 16px 14px; display: grid; gap: 12px; }
.fact-table { border-collapse: collapse; width: 100%; max-width: 520px; }
.fact-table th, .fact-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); font-weight: 500; }
.fact-table thead th { font-size: var(--t-cap); color: var(--muted); font-weight: 600; }
.fact-table tbody th { color: var(--muted); font-size: var(--t-cap); font-weight: 500; }
.fact-table td { font-weight: 600; }
.fact-table td.late { color: var(--error); }
.fact-table td.early { color: var(--s-enroute-b); }
.kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); min-width: 120px; }
.kpi span { font-size: 12px; color: var(--muted); }
.kpi b { font-size: var(--t-name); font-weight: 700; }
.kpi.late b { color: var(--error); }
.kpi.early b { color: var(--s-enroute-b); }
.kpi.ok b { color: var(--ok); }
.kpi.live { border-color: var(--mark); background: var(--warn-bg); }
.fact-reasons { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--t-cap); color: var(--muted); }
.fact-reasons b { color: var(--text); }
.btn.quiet { color: var(--muted); }
.btn.big { min-height: 56px; font-size: var(--t-name); padding: 10px 18px; }

/* Табло склада */
.board .brow { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 12px; padding: 12px 16px; }
.brow-time { display: flex; flex-direction: column; gap: 2px; }
.brow-time b { font-size: var(--t-qty); font-weight: 700; }
.brow-time small { font-size: 12px; color: var(--muted); }
.brow-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brow-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.brow-top b { font-size: var(--t-name); font-weight: 700; }
.brow-top span { font-weight: 600; }
.brow-meta { font-size: var(--t-cap); color: var(--muted); }
.brow-place { color: var(--text); font-weight: 600; }
.brow-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.brow-actions .btn { flex: 1 1 180px; }
.brow.s-ARRIVED { box-shadow: inset 4px 0 0 var(--s-arrived-b); }
.brow.s-UNLOADING { box-shadow: inset 4px 0 0 var(--s-unloading-b); }
.brow.s-DONE { opacity: .75; }

/* Отчёты */
.reports-period .toolbar { padding-top: 10px; }
.field.inline { flex-direction: row; align-items: center; gap: 6px; margin: 0; }
.field.inline input { min-height: 44px; font-size: var(--t-body); font-weight: 500; }
.kpi-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-grid > :nth-child(2n + 1) { border-left: 0; }
.kpi-grid > :nth-child(n + 3) { border-top: 1px solid var(--line); }
.kpi-grid b { font-size: var(--t-qty); }
.report.zones th small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.load { display: inline-flex; align-items: center; gap: 8px; }
.load i { display: inline-block; width: 72px; height: 8px; border-radius: 2px; background: var(--track); position: relative; overflow: hidden; }
.load i::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--ok); }
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 140px; padding: 12px 16px 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
/* Столбики загрузки по часам (.hbar — не .bar: так называется шапка страницы в styles.css) */
.hbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.hbar i { display: block; width: 100%; background: var(--ok); border-radius: 3px 3px 0 0; min-height: 2px; }
.hbar.break i { background: var(--cal-break); }
.hbar b { font-size: 12px; }
.hbar span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.report.rows th, .report.rows td { white-space: nowrap; font-size: var(--t-cap); }
.report.rows td { font-weight: 500; }

/* Настройки */
.settings-bar { position: sticky; top: var(--bar-h); z-index: 5; }
.settings-grid { padding-top: 0; padding-bottom: 14px; }
.settings-grid .field { margin-top: 10px; }
.pair { display: flex; align-items: center; gap: 8px; }
.pair input { flex: 1; min-width: 0; min-height: 44px; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); font: inherit; color: inherit; }
.row-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
.row-edit input { flex: 1 1 140px; min-width: 0; min-height: 44px; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); font: inherit; color: inherit; }
.row-edit input[type=time] { flex: 0 0 120px; }
.zone-edit { padding: 8px 16px 12px; border-bottom: 1px solid var(--line); }
.zone-edit .settings-grid { padding: 0; }
.field.check { margin-top: 14px; }

/* Заглушка */
.stub { padding: 20px 16px; }
.stub-lead { font-size: var(--t-name); font-weight: 500; margin-bottom: 14px; }
.stub-links { display: grid; grid-template-columns: 1fr; gap: 10px; }
.stub-links .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; }
.stub-links .btn small { font-weight: 400; font-size: var(--t-cap); color: var(--muted); }
.stub-note { margin-top: 14px; font-size: var(--t-cap); }

/* Компьютер */
@media (min-width: 960px) {
  .hub { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .hub-grid { grid-template-columns: 1fr 1fr; padding: 24px; gap: 14px; }
  .hub-rail { border-top: 0; border-left: 1px solid var(--line); min-height: calc(100vh - var(--bar-h) - 52px); }
  .hub-rail .group-head { padding-left: 24px; }
  .toolbar { padding: 0 24px 0 0; margin-left: auto; }
  .period .toolbar { flex: 1; }
  .cal-head, .cal-row { grid-template-columns: 200px 1fr; }
  /* 12 колонок по 88 px + 200 px зоны = 1256 px: сетка дня целиком влезает в лист 1280 px без прокрутки. */
  .cal { min-width: max(100%, calc(200px + var(--cols) * 88px)); }
  .cal-track { grid-template-columns: repeat(var(--cols), minmax(88px, 1fr)); }
  .remote-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 24px; }
  .week-head, .week-row { grid-template-columns: 200px repeat(var(--days), minmax(140px, 1fr)); }
  .week { min-width: max(100%, calc(200px + var(--days) * 140px)); }
  .board .brow { grid-template-columns: 90px minmax(0, 1fr) auto; }
  .brow-actions { grid-column: auto; flex-direction: column; align-items: stretch; min-width: 220px; }
  .brow-actions .btn { flex: 0 0 auto; }
  .kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpi-grid > :nth-child(n) { border-left: 1px solid var(--line); border-top: 0; }
  .kpi-grid > :nth-child(6n + 1) { border-left: 0; }
  .kpi-grid > :nth-child(n + 7) { border-top: 1px solid var(--line); }
  .settings-grid, .zone-edit { padding-left: 24px; padding-right: 24px; }
  .bars { padding: 12px 24px 8px; }
  .cal-legend { padding-left: 24px; }
  .stub { padding: 24px; }
  .stub-links { grid-template-columns: 1fr 1fr; max-width: 720px; }
}
@media (min-width: 1280px) { .hub-grid { grid-template-columns: 1fr 1fr; } }