/* Отгрузки ВЭД builds on app.css (Счета ВЭД): same tokens, header, buttons and fields.
   Only the shipment parts live here — the step checklist and the instruction blocks rebuilt from screenshots. */
.mea { --sea: #1E3438; --sea-wash: #DDE7E6; }
.mea .band { background: var(--sea); }

.grow { flex: 1; min-width: 0; }
.small { font-size: 15px; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.stack.tight { gap: 10px; }
.scrollx { overflow-x: auto; }
.linklike.danger { color: var(--no); }

/* today */
.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.task { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.task:last-child { border-bottom: 1px solid var(--rule); }
.taskmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--roast); text-decoration: none; }
.taskmain:hover .tasktext { text-decoration: underline; }
.tasktext { font-weight: 700; font-size: 18px; }
.taskmeta { color: var(--jute); font-size: 15px; }
.due { font-size: 15px; font-weight: 700; white-space: nowrap; }
.due.overdue, .overdue > .due { color: var(--no); }
.due.today { color: var(--wait); }
.due.soon, .due.later, .due.open { color: var(--jute); font-weight: 600; }
.due.done { color: var(--stamp); }
.task.overdue { box-shadow: inset 4px 0 0 var(--no); padding-left: 14px; }
.task.today { box-shadow: inset 4px 0 0 var(--wait-ring); padding-left: 14px; }

.duties { display: flex; flex-direction: column; gap: 8px; }
.duty { background: var(--paper); border-radius: 8px; }
.dutyhead { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 16px; background: none; border: none; text-align: left; cursor: pointer; color: var(--roast); font-size: 17px; }
.duty.overdue { box-shadow: inset 4px 0 0 var(--no); }
.duty.done .dutyhead b { color: var(--jute); }
.checks { list-style: none; margin: 0; padding: 0 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.checks li.done .checkline span { color: var(--jute); text-decoration: line-through; }
.checkline { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 600; }
.checkline input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--stamp); flex: none; }

/* lists */
.pbar { display: block; width: 120px; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--stamp); }
.pbar.overdue i { background: var(--no); }
.shiptable, .linestable { width: 100%; border-collapse: collapse; font-size: 16px; }
.shiptable th, .linestable th { text-align: left; font-size: 14px; font-weight: 600; color: var(--jute); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.shiptable td, .linestable td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.shiptable td.num, .linestable td.num { text-align: right; }
.shiptable tr.completed td, .shiptable tr.cancelled td { color: var(--jute); }
.shiptable tr.late td:first-child { box-shadow: inset 3px 0 0 var(--no); padding-left: 8px; }
.shiptable .products div { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.shiptable .overdue { color: var(--no); font-weight: 600; }
.warnmark { display: inline-flex; align-items: center; gap: 4px; color: var(--no); font-weight: 700; }
.cellinput { width: 100%; min-width: 96px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--paper); font-size: 15px; }
.cellinput.num { min-width: 72px; text-align: right; }
.cellinput:disabled { background: transparent; border-color: transparent; color: var(--roast); }

/* shipment card */
.statuspill { display: inline-block; padding: 4px 12px; border-radius: 14px; font-weight: 700; font-size: 15px; background: var(--wait-wash); color: var(--wait); }
.statuspill.loaded { background: var(--stamp-wash); color: var(--stamp); }
.statuspill.completed { background: var(--sea-wash); color: var(--sea); }
.statuspill.cancelled { background: var(--rule); color: var(--jute); }
.statusbar { align-items: center; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; padding: 14px 18px; background: var(--paper); border-radius: 8px; }
.facts dt { color: var(--jute); font-size: 15px; }
.facts dd { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 6px; } }

.phases { display: flex; flex-wrap: wrap; gap: 6px; }
.phase { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 6px; border: 1.5px solid var(--rule-strong); background: var(--paper); cursor: pointer; font-size: 16px; color: var(--roast); }
.phase .pcount { color: var(--jute); font-size: 14px; font-variant-numeric: tabular-nums; }
.phase.complete { border-color: var(--stamp); }
.phase.complete .pname::before { content: "✓ "; color: var(--stamp); }
.phase.late { border-color: var(--no); }
.phase[aria-selected="true"] { background: var(--sea); border-color: var(--sea); color: #fff; }
.phase[aria-selected="true"] .pcount { color: #CFE0DE; }
.phasebody { display: flex; flex-direction: column; gap: 10px; }
.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.item { background: var(--paper); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.item.overdue { box-shadow: inset 4px 0 0 var(--no); }
.item.today { box-shadow: inset 4px 0 0 var(--wait-ring); }
.item.done { background: transparent; border: 1px solid var(--rule); }
.item.done .itemtext { color: var(--jute); }
.itemhead { display: flex; gap: 14px; align-items: flex-start; }
.itemtext { font-weight: 700; font-size: 18px; }
.bigcheck { position: relative; flex: none; width: 32px; height: 32px; cursor: pointer; }
.bigcheck input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bigcheck .box { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: 2px solid var(--rule-strong); background: var(--paper); color: transparent; }
.bigcheck .box svg { width: 20px; height: 20px; stroke-width: 3; }
.bigcheck input:checked + .box { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.bigcheck input:focus-visible + .box { outline: 3px solid var(--stamp); outline-offset: 2px; }
.bigcheck input:disabled + .box { cursor: default; opacity: .7; }
.item .details { margin: 0; padding-left: 46px; color: var(--roast); font-size: 16px; }
.item .blocks { padding-left: 46px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 560px) { .item .details, .item .blocks { padding-left: 0; } }
.clarify { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; background: var(--wait-wash); color: var(--wait); font-size: 14px; font-weight: 700; white-space: nowrap; }
.clarifytext { margin: 0; padding: 8px 12px 8px 46px; color: var(--wait); font-size: 15px; display: flex; gap: 6px; align-items: flex-start; }

/* instruction blocks: native, copyable — never screenshots */
.blk { border-radius: 6px; background: var(--ground); padding: 10px 12px; font-size: 16px; min-width: 0; }
.blk b { display: block; margin-bottom: 4px; }
.copybtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 4px; background: none; color: var(--jute); cursor: pointer; flex: none; vertical-align: middle; }
.copybtn:hover { background: var(--paper); color: var(--roast); }
.copybtn svg { width: 16px; height: 16px; }
.blk code, .facts code, .req code, .contact code { font: 600 15px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--paper); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.blk.path { display: flex; align-items: center; gap: 10px; }
.blk.path .grow { display: flex; flex-direction: column; gap: 2px; }
.blk.sap { background: var(--sea-wash); }
.saphead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.tcode { display: inline-flex; align-items: center; font: 700 15px/1 ui-monospace, Menlo, monospace; background: var(--sea); color: #fff; padding: 4px 4px 4px 10px; border-radius: 4px; text-transform: uppercase; }
.tcode .copybtn { color: #CFE0DE; width: 26px; height: 22px; }
.tcode .copybtn:hover { background: rgba(255,255,255,.12); color: #fff; }
.saphead .screen { font-weight: 700; }
.sapfields { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 4px 16px; margin: 0; align-items: center; }
.sapfields dt { color: var(--jute); font-size: 15px; display: flex; align-items: center; gap: 6px; }
.sapfields dd { margin: 0; display: flex; align-items: center; gap: 4px; min-width: 0; }
.checkmark { font-size: 12px; font-weight: 700; color: var(--stamp); background: var(--stamp-wash); padding: 1px 6px; border-radius: 8px; }
.fillhint { color: var(--wait); font-style: italic; font-size: 15px; }
.sapactions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 15px; }
.sapactions span:not(.arrow) { background: var(--paper); padding: 2px 8px; border-radius: 4px; }
.sapactions .arrow { color: var(--jute); }
@media (max-width: 560px) { .sapfields { grid-template-columns: 1fr; } .sapfields dd { margin-bottom: 6px; } }
.blk.email { background: var(--paper); border: 1px solid var(--rule-strong); display: flex; flex-direction: column; gap: 8px; }
.mailhead { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.mailhead svg { margin-top: 2px; color: var(--jute); }
.mailbody { margin: 0; padding: 10px 12px; background: var(--ground); border-radius: 4px; font: 15px/1.45 var(--f-text); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }
.mailactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.attach { margin: 0; font-size: 15px; }
.blk.checklist ul { margin: 0; padding-left: 20px; }
.blk.checklist li { margin: 2px 0; }
.blk.docs table, .blk.tableblk table { border-collapse: collapse; font-size: 15px; }
.blk.docs td, .blk.tableblk td, .blk.tableblk th { padding: 4px 12px 4px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.blk.tableblk th { color: var(--jute); font-weight: 600; white-space: nowrap; }
.blk.clicks { margin: 0; padding: 10px 12px 10px 32px; }
.blk.warn { display: flex; gap: 10px; align-items: flex-start; background: var(--no-wash); color: #7D241A; font-weight: 600; }
.blk.text { margin: 0; background: none; padding: 0; }

/* clients and settings */
.req { padding: 6px 0; border-top: 1px solid var(--rule); }
.req p { margin: 2px 0 0; white-space: pre-wrap; }
.contact { padding: 8px 0; border-top: 1px solid var(--rule); }
.contact ul { margin: 4px 0 0; padding-left: 20px; }
.clarifylist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.jsonedit { width: 100%; font: 14px/1.4 ui-monospace, Menlo, monospace; border: 1px solid var(--rule-strong); border-radius: 6px; padding: 10px; }