/* Sona Rice Mill · SRM Console components. Depends on theme.css tokens. */

/* ============================================================ Shell */
.shell { display: flex; height: 100vh; overflow: hidden; background: var(--bg); }
.side { width: var(--side-w); flex: 0 0 var(--side-w); background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; z-index: 30; }
.side-brand { display: flex; align-items: center; gap: 11px; padding: 18px 16px 20px; }
.side-tile { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: var(--ac); color: #fff; display: grid; place-items: center; font: 700 17px var(--font); }
.side-name { font: 700 15.5px var(--font); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-sub { font: 500 12px var(--font); color: var(--ink-4); }
.side-close { display: none !important; margin-left: auto; }
.side-group { padding: 0 10px 14px; }
.side-label { font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); padding: 6px 8px 8px; }
.side-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; margin-bottom: 2px; color: var(--ink-2); font: 600 13.5px var(--font); cursor: pointer; transition: background .12s ease, color .12s ease; }
.side-item:hover { background: var(--hover); color: var(--ink); }
.side-item.is-active { background: var(--sel); color: var(--ac); }
.side-item svg { flex: 0 0 18px; }
.side-item-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-kbd { display: flex; gap: 3px; }
.side-foot { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--line-2); font: 600 12.5px var(--font); color: var(--ink-3); }
.side-foot .mono { display: block; font: 700 13px var(--font); color: var(--ink-2); margin-top: 3px; }
.ws-scrim { display: none; position: fixed; inset: 0; background: rgba(17, 24, 39, .4); z-index: 25; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar { height: var(--top-h); flex: 0 0 var(--top-h); display: flex; align-items: center; gap: 16px; padding: 0 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.menu-btn { display: none !important; }
.crumb { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; flex: 0 1 auto; }
.crumb-root { font: 600 14px var(--font); color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb-root:hover { color: var(--ink-2); }
.crumb-sep { color: var(--ink-4); font-size: 13px; }
.crumb-leaf { font: 700 14.5px var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-spacer { flex: 0 0 12px; }
.search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; flex: 1 1 0; min-width: 0; max-width: 320px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-4); cursor: pointer; text-align: left; }
.search:hover { border-color: var(--ink-4); }
.search span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 14px var(--font); }
.search kbd { background: var(--panel); }
.userchip { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); white-space: nowrap; line-height: 1.15; cursor: pointer; }
.userchip:hover { background: var(--hover); }
.userchip-name { font: 700 13px var(--font); color: var(--ink); }
.userchip-sub { font: 500 11.5px var(--font); color: var(--ink-4); }
.content { flex: 1; overflow-y: auto; }
.page { padding: 26px 24px 40px; max-width: none; width: 100%; }
/* Every page uses the full content width; the modifiers are kept for markup compatibility only. */
.page--narrow, .page--mid, .page--form { max-width: none; }

/* ============================================================ Page anatomy */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.page-head > .page-head-text { flex: 1 1 260px; min-width: 0; }
.page-title { font: 800 24px/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); }
.page-sub { font: 500 13.5px var(--font); color: var(--ink-3); margin-top: 5px; }
.page-sub .mono { font-weight: 700; color: var(--ink); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 18px 18px 16px; color: var(--ink); min-width: 0; }
a.kpi:hover { border-color: var(--ac); color: var(--ink); }
.kpi-label { font: 700 11.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kpi-value { font: 800 27px/1.1 var(--font); letter-spacing: -.01em; margin: 10px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kpi--sm .kpi-value { font-size: 22px; margin: 8px 0 4px; }
.kpi-sub { font: 500 12.5px var(--font); color: var(--ink-4); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); margin-bottom: 16px; min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px 14px; }
.card-head--rule { border-bottom: 1px solid var(--line-2); }
.card-head-text { flex: 1 1 160px; min-width: 0; }
.card-title { font: 800 15px var(--font); letter-spacing: -.02em; color: var(--ink); }
.card-sub { font: 500 12.5px var(--font); color: var(--ink-4); margin-top: 3px; }
.card-link { font: 700 13px var(--font); color: var(--ac); white-space: nowrap; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-body { padding: 0 18px 18px; }
.card-head + .card-body { padding-top: 2px; }
.card > .card-body:first-child { padding-top: 18px; }
.card-body--flush { padding: 0; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 18px; background: var(--panel-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.card-body--flush + .card-foot, .dtable-wrap + .card-foot { border-top: 1px solid var(--line); }

.cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.cols--3-1 { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.cols--1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--2-1 { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.cols--voucher { grid-template-columns: minmax(0, 1fr) 300px; }
.cols > * { min-width: 0; }
/* A form and the document it writes, side by side on their own grounds: the work on white, the preview
   on the page's ground, with a rule between them running the full height of the window. Full-bleed, so
   it cancels the page padding and puts it back inside each half. */
/* The preview (the document being written) gets the larger share: purchase order and shipment alike. */
.worksplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 1.3fr); align-items: stretch; margin: -26px -24px -40px; min-height: calc(100vh - var(--top-h)); }
.worksplit > * { min-width: 0; }
.worksplit-form { padding: 26px 24px 40px; background: var(--panel); }
.worksplit-preview { padding: 26px 24px 40px; background: var(--bg); border-left: 1px solid var(--line); }
@media (max-width: 1100px) { .worksplit { grid-template-columns: 1fr; min-height: 0; } .worksplit-preview { border-left: 0; border-top: 1px solid var(--line); } }
.sticky { position: sticky; top: 18px; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; }
.grid--auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; }
.grid--auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; } .span-10 { grid-column: span 10; } .span-12 { grid-column: span 12; }
.row-flex { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.row-flex > .grow { flex: 1 1 520px; min-width: 0; }
.row-flex > .aside { flex: 1 1 300px; min-width: 0; }
.spacer { flex: 1 1 0; min-width: 6px; }

/* ============================================================ Data tables */
.dtable { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; margin-bottom: 16px; }
.card > .dtable, .card-body > .dtable { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.card > .dtable-wrap { margin: 0; }
.dtable-wrap { overflow-x: auto; white-space: nowrap; }
.dtable table, .dtable-wrap > table { width: 100%; min-width: var(--min, 680px); border-collapse: collapse; }
.dtable th, .dtable-wrap th { height: 42px; padding: 0 14px; text-align: left; background: var(--panel-2); border-bottom: 1px solid var(--line); font: 700 11.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.dtable thead + tbody tr:first-child td { border-top: 0; }
.dtable td, .dtable-wrap td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); font: 500 14px var(--font); color: var(--ink-2); vertical-align: middle; }
.dtable tbody tr { height: var(--rowh); transition: background .1s ease; }
.dtable tbody tr:hover, .dtable-wrap tbody tr:hover { background: var(--hover); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody + tfoot tr:first-child td { border-top: 1px solid var(--line); }
tr[data-href] { cursor: pointer; }
.dtable th.num, .dtable td.num, .dtable-wrap th.num, .dtable-wrap td.num { text-align: right; }
.dtable td.num { font: 700 14px var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.dtable-id { font: 700 13px var(--font); color: var(--ink); }
.dtable-nm { font: 700 14px var(--font); color: var(--ink); }
.dtable-sub { display: block; font: 500 12px var(--font); color: var(--ink-4); margin-top: 2px; }
.dtable tfoot td { background: var(--panel-2); font: 700 13px var(--font); color: var(--ink); border-top: 1px solid var(--line); }
.dtable tfoot td.num { font: 800 14px var(--font); }
.dtable tr.is-cancelled td { text-decoration: line-through; color: var(--ink-4); }
.dtable tr.is-muted td { color: var(--ink-4); }
.dtable tr.is-fail { background: var(--red-soft); }
.dtable tr.is-selected { background: var(--sel); }
.dtable tr.is-cursor { box-shadow: inset 3px 0 0 var(--ac); }
.dtable--dense { --rowh: 46px; }
.dtable--dense td { padding: 8px 12px; font-size: 13.5px; }
.dtable--dense th { height: 38px; padding: 0 12px; }
/* Lazy-loaded detail rows (see [data-expand-url] in srm.js): the nested table scrolls inside its own wrap. */
.dtable tr.is-detail > td { padding: 0; background: var(--panel-2); max-width: 0; }
.dtable tr.is-detail > td > .dtable { border-top: 1px solid var(--line); }
.dtable tbody tr.is-detail:hover { background: transparent; }
.dtable tr.is-detail .empty { padding: 16px; font: 500 13px var(--font); color: var(--ink-4); }
[data-expand-url] svg { transition: transform .15s; }
[data-expand-url].is-open svg { transform: rotate(180deg); }
/* .dtable--pin-end: keep the last two columns (the quantity inputs) in view while the table scrolls sideways. */
.dtable--pin-end { --pin-w: 130px; }
.dtable--pin-end th:nth-last-child(-n+2), .dtable--pin-end td:nth-last-child(-n+2) { position: sticky; z-index: 1; background: var(--panel); }
.dtable--pin-end th:nth-last-child(-n+2), .dtable--pin-end tfoot td:nth-last-child(-n+2) { background: var(--panel-2); z-index: 2; }
.dtable--pin-end th:nth-last-child(1), .dtable--pin-end td:nth-last-child(1) { right: 0; width: var(--pin-w); }
.dtable--pin-end th:nth-last-child(2), .dtable--pin-end td:nth-last-child(2) { right: var(--pin-w); box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .18); border-left: 1px solid var(--line-2); }
.dtable--pin-end tbody tr:hover td:nth-last-child(-n+2) { background: var(--hover); }
.dtable--pin-end tbody tr.is-selected td:nth-last-child(-n+2) { background: var(--sel); }
.dtable .input, .dtable .select { height: 38px; padding: 8px 9px; font-size: 13.5px; }
.dtable .btn--xs, .dtable .iconbtn { vertical-align: middle; }
.dtable a:not(.btn):not(.pill) { color: var(--ac); }
.dtable a.dtable-id { color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.dtable a.dtable-id:hover, .dtable a.dtable-nm:hover { color: var(--ac); text-decoration-color: var(--ac); }
.dtable a.dtable-nm { color: var(--ink); }
.dtable td .pill { vertical-align: middle; }
.td-actions { text-align: right; white-space: nowrap; }
.td-actions > * + * { margin-left: 6px; }

/* ============================================================ Chips, seg tabs, tabs */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font: 700 12px var(--font); white-space: nowrap; line-height: 1.2; vertical-align: middle; }
.pill--grey { background: var(--panel-2); color: var(--ink-3); border: 1px solid var(--line-2); }
.pill--blue { background: color-mix(in srgb, var(--blue) 10%, var(--panel)); color: var(--blue-ink); }
.pill--green { background: color-mix(in srgb, var(--green) 14%, var(--panel)); color: var(--green-ink); }
.pill--red { background: var(--red-soft); color: var(--red); }
.pill--amber { background: color-mix(in srgb, var(--amber) 14%, var(--panel)); color: var(--amber-ink); }
.pill--ac { background: var(--ac-soft); color: var(--ac); }
.pill--lg { padding: 5px 12px; font-size: 13px; }
.pill--sm { padding: 2px 8px; font-size: 11px; }
.pill-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--line-2); border-radius: var(--r); margin-bottom: 18px; }
.seg-item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font: 700 13px var(--font); cursor: pointer; white-space: nowrap; }
.seg-item:hover { color: var(--ink-2); }
.seg-item.is-on { background: var(--panel); color: var(--ink); box-shadow: var(--sh-sm); }
.seg-count { font: 600 11px var(--font); color: var(--ink-4); padding: 1px 6px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.seg-item.is-on .seg-count { color: var(--ac); background: var(--ac-soft); border-color: transparent; }

.tabs { display: flex; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 0 10px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-4); font: 600 13.5px var(--font); cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--ink-2); }
.tab.is-on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ac); }
.tab-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 999px; background: var(--line-2); }
.tab-dot.is-pass { background: var(--green); }
.tab-dot.is-fail { background: var(--red); }
.tab-score { padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); font: 700 11px var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tab-score.is-pass { color: var(--green-ink); background: color-mix(in srgb, var(--green) 14%, var(--panel)); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.tab-score.is-fail { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.tab-count { padding: 2px 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font: 700 11px var(--font); color: var(--ink-3); }
.tab-pane { display: none; }
.tab-pane.is-on { display: block; }

/* ============================================================ Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 15px; border: 1px solid transparent; border-radius: var(--r); background: var(--panel); color: var(--ink-2); font: 700 13.5px var(--font); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .12s ease, color .12s ease, border-color .12s ease, transform .1s ease; box-shadow: var(--sh-sm); }
.btn:hover { color: var(--ink); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn svg { flex: 0 0 auto; }
.btn kbd { background: rgba(255, 255, 255, .2); border: 0; color: inherit; opacity: .9; }
.btn--primary { background: var(--ac); border-color: var(--ac); color: #fff; }
.btn--primary:hover { background: var(--ac-press); border-color: var(--ac-press); color: #fff; }
.btn--ghost { background: var(--panel); border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover { background: var(--hover); }
.btn--ghost kbd { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-4); }
.btn--subtle { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-3); }
.btn--subtle:hover { background: var(--hover); color: var(--ink); }
.btn--ac { background: var(--ac-soft); border-color: transparent; color: var(--ac); box-shadow: none; }
.btn--ac:hover { background: color-mix(in srgb, var(--ac) 16%, var(--panel)); color: var(--ac-press); }
.btn--outline-ac { background: var(--panel); border-color: var(--line); color: var(--ac); }
.btn--outline-ac:hover { border-color: var(--ac); background: var(--ac-soft); color: var(--ac); }
.btn--danger { background: var(--red-soft); border-color: var(--red); color: var(--red); box-shadow: none; }
.btn--danger:hover { background: var(--red-soft-2); color: var(--red); }
.btn--danger-solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn--danger-solid:hover { filter: brightness(.94); color: #fff; }
.btn--success { background: var(--green); border-color: var(--green); color: #fff; }
.btn--success:hover { filter: brightness(.94); color: #fff; }
.btn--amber { background: color-mix(in srgb, var(--amber) 14%, var(--panel)); border-color: var(--amber); color: var(--amber-ink); box-shadow: none; }
.btn--amber:hover { background: color-mix(in srgb, var(--amber) 22%, var(--panel)); color: var(--amber-ink); }
.btn--link { background: transparent; border-color: transparent; box-shadow: none; color: var(--ac); padding: 0 4px; height: auto; }
.btn--link:hover { color: var(--ac-press); text-decoration: underline; }
.btn--sm { height: 36px; padding: 0 13px; font-size: 13px; }
.btn--xs { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; }
.btn--lg { height: 48px; padding: 0 26px; font-size: 15px; border-radius: var(--r-lg); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn--primary[disabled] { background: var(--ink-4); border-color: var(--ink-4); opacity: 1; }
.btn--busy { pointer-events: none; }
.btn--busy::before { content: ''; width: 14px; height: 14px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink-3); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.iconbtn:hover { background: var(--hover); color: var(--ink); }
.iconbtn--sm { width: 30px; height: 30px; border-radius: 8px; }
.iconbtn--danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.iconbtn--ac:hover { background: var(--ac-soft); border-color: var(--ac); color: var(--ac); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ============================================================ Fields */
.field { display: block; margin-bottom: 16px; min-width: 0; }
.field--inline { margin-bottom: 0; }
.field--tight { margin-bottom: 10px; }
.field-label { display: block; font: 700 12px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.field-label--plain { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.input, .select, .textarea { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); font: 500 14.5px var(--font); box-shadow: none; transition: border-color .12s, box-shadow .12s; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-ring); }
.input:hover:not(:focus):not([readonly]):not([disabled]), .select:hover:not(:focus):not([disabled]) { border-color: var(--ink-4); }
.textarea { min-height: 68px; line-height: 1.5; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
.select[multiple] { background-image: none; padding-right: 12px; }
.input--sm, .select--sm, .textarea--sm { min-height: 38px; padding: 8px 10px; font-size: 13.5px; border-radius: 9px; }
.input--num, .input[type=number] { font-family: var(--font); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.input--mono { font-family: var(--font); font-weight: 600; }
.input--err, .input.is-invalid, .select.is-invalid, .select--err { border-color: var(--red) !important; }
.input--err:focus, .input.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.input--warn { border-color: var(--amber) !important; }
.input[readonly], .textarea[readonly], .select[disabled], .input[disabled] { background: var(--panel-2); color: var(--ink-2); cursor: default; }
.input[type=file] { padding: 8px 10px; font-size: 13px; cursor: pointer; }
.input[type=file]::file-selector-button { font: 700 12px var(--font); color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; margin-right: 10px; cursor: pointer; }
.input[type=date], .input[type=datetime-local], .input[type=time] { font-weight: 600; font-size: 14px; }
.readbox { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); color: var(--ink-2); font: 600 13.5px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readbox.mono { font: 700 14px var(--font); justify-content: flex-end; color: var(--ink); }
.readbox--sm { min-height: 38px; padding: 8px 10px; }
.field-hint { font: 500 12.5px var(--font); color: var(--ink-4); margin-top: 7px; }
.field-err { font: 600 12.5px var(--font); color: var(--red); margin-top: 6px; }
.input-wrap { display: flex; align-items: center; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.input-wrap:focus-within { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-ring); }
.input-wrap .input { border: 0; border-radius: 0; box-shadow: none !important; min-height: 42px; flex: 1; min-width: 0; }
.input-wrap .unit { flex: 0 0 auto; padding: 0 12px 0 6px; font: 500 12.5px var(--font); color: var(--ink-4); }
.input-wrap--sm { min-height: 38px; }
.input-wrap--sm .input { min-height: 36px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font: 600 13.5px var(--font); color: var(--ink); }
.check input { width: 18px; height: 18px; flex: 0 0 18px; margin: 1px 0 0; accent-color: var(--ac); cursor: pointer; }
.check-hint { display: block; font: 500 12.5px/1.5 var(--font); color: var(--ink-3); margin-top: 3px; }
.check--card { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.check--card:has(input:checked) { border-color: var(--ac); background: var(--ac-soft); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
/* A form read top to bottom rather than spread across the screen: never wider than comfortable. */
.form-narrow { max-width: 880px; }
.form-section { padding: 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.form-section-title { font: 700 12px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }

/* ============================================================ Combo (searchable select) */
.combo { position: relative; }
.combo-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); cursor: pointer; text-align: left; font: 600 14.5px var(--font); }
.combo-trigger:hover { border-color: var(--ink-4); }
.combo.is-open .combo-trigger, .combo-trigger:focus { outline: none; border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-ring); }
.combo--sm .combo-trigger { min-height: 38px; padding: 8px 10px; font-size: 13.5px; border-radius: 9px; }
.combo-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-val.is-empty { font-weight: 500; color: var(--ink-4); }
.combo-trigger svg { flex: 0 0 16px; color: var(--ink-3); transition: transform .14s; }
.combo.is-open .combo-trigger svg { transform: rotate(180deg); }
.combo-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 420px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-pop); z-index: 40; overflow: hidden; animation: popIn .14s cubic-bezier(.2, .8, .2, 1.1); }
.combo-pop--up { top: auto; bottom: calc(100% + 6px); }
/* Floated onto the body so a scrolling panel — a line editor, a card — cannot clip it. Its position
   and width are set from the field it belongs to, so the anchored left/right rules must stand aside. */
.combo-pop--float { position: fixed; right: auto; z-index: 90; }
.combo-pop--float.combo-pop--up { top: auto; }
.combo-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.combo-search svg { flex: 0 0 16px; color: var(--ink-4); }
.combo-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 500 14.5px var(--font); color: var(--ink); padding: 0; }
.combo-hint { padding: 9px 14px; font: 600 12px var(--font); color: var(--ink-4); background: var(--panel-2); }
.combo-list { max-height: 280px; overflow-y: auto; }
.combo-opt { padding: 10px 14px; cursor: pointer; }
.combo-opt:hover, .combo-opt.is-cursor { background: var(--hover); }
.combo-opt.is-selected { background: var(--sel); }
.combo-opt-nm { font: 700 14px var(--font); color: var(--ink); }
.combo-opt-sub { font: 500 12.5px var(--font); color: var(--ink-3); margin-top: 3px; }
.combo-empty { padding: 16px 14px; font: 500 13.5px var(--font); color: var(--ink-4); text-align: center; }

/* ============================================================ Line editor */
.lineed { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); }
.lineed-scroll { overflow-x: auto; }
.lineed-min { min-width: var(--min, 680px); }
.lineed-head, .lineed-row { display: grid; grid-template-columns: var(--cols); gap: 8px; align-items: center; padding: 10px 14px; }
.lineed-head { background: var(--panel-2); border-bottom: 1px solid var(--line); }
.lineed-head > div { font: 700 11.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.lineed-row { border-bottom: 1px solid var(--line-2); animation: lineIn .35s ease both; }
.lineed-row:last-child { border-bottom: 0; }
.lineed-row .input, .lineed-row .select, .lineed-row .combo-trigger { min-height: 42px; padding: 9px 9px; font-size: 13.5px; }
.lineed-row .select { padding-right: 28px; background-position: right 6px center; }
.lineed-row .readbox { min-height: 42px; }
.lineed-cell--num, .lineed-head .num { text-align: right; }
.lineed-amount { text-align: right; font: 800 13.5px var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineed-amount.is-empty { color: var(--ink-4); }
/* A line the order already fixed: shown, posted, but not up for editing. */
.lineed-fixed { font: 600 13.5px var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineed-fixed.is-muted { color: var(--ink-3); }
.lineed-rm { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-4); cursor: pointer; }
.lineed-rm:hover { background: var(--red-soft); color: var(--red); }
.lineed-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel-2); border-top: 1px solid var(--line); }
.lineed-add { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 1px dashed var(--ac); border-radius: 9px; background: var(--panel); color: var(--ac); font: 700 12.5px var(--font); cursor: pointer; }
.lineed-add:hover { background: var(--ac-soft); }
.lineed-total-label { font: 700 11.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lineed-total { font: 800 15px var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.lineed-empty { padding: 20px 14px; text-align: center; font: 500 13px var(--font); color: var(--ink-4); }

/* ============================================================ Workflow: stepper, step panel */
.stepper { display: flex; align-items: flex-start; margin-bottom: 26px; padding: 0 4px; }
.step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: inherit; }
a.step { cursor: pointer; }
.step-track { position: relative; width: 100%; height: 28px; display: grid; place-items: center; }
.step-line-l, .step-line-r { position: absolute; top: 13px; height: 2px; background: var(--line); }
.step-line-l { left: 0; width: 50%; }
.step-line-r { left: 50%; width: 50%; }
.step:first-child .step-line-l, .step:last-child .step-line-r { background: transparent; }
.step-line-l.is-hot, .step-line-r.is-hot { background: var(--ac); }
.step-line-l.is-done, .step-line-r.is-done { background: var(--green); }
.step-line-l.is-fail, .step-line-r.is-fail { background: var(--red); }
.step-circle { position: relative; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--line-2); color: #fff; }
.step-circle.is-done { background: var(--green); border-color: var(--green); }
.step-circle.is-failed { background: var(--red); border-color: var(--red); }
.step-circle.is-current { border-color: var(--ac); }
.step-circle.is-current::after, .step-circle.is-todo::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--ac); }
.step-circle.is-todo::after { background: var(--line); }
.step-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font: 600 12.5px var(--font); color: var(--ink-4); }
.step.is-current .step-label { font-weight: 700; color: var(--ink); }
.step.is-done .step-label { color: var(--ink-2); }
/* The step on screen: its label becomes a filled chip and its circle gets a ring, whatever state it is in. */
.step.is-viewing .step-label { background: var(--ac); color: #fff; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.step.is-viewing .step-circle { box-shadow: 0 0 0 4px var(--ac-ring); }
.step.is-failed .step-label { color: var(--red); font-weight: 700; }

/* Shipment steps: the stepper and its panel, with a slim timeline of every step beside them. */
.ship-steps { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.ship-steps-main { min-width: 0; }
.tline { position: sticky; top: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 14px 14px 6px; }
.tline-head { font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px; }
.tline-list { list-style: none; margin: 0; padding: 0; }
.tline-item { position: relative; display: flex; gap: 10px; padding-bottom: 12px; }
.tline-item:not(:last-child)::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--line-2); }
.tline-item.is-done:not(:last-child)::before { background: var(--green); }
.tline-dot { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 999px; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--line-2); color: #fff; }
.tline-item.is-done .tline-dot { background: var(--green); border-color: var(--green); }
.tline-item.is-failed .tline-dot { background: var(--red); border-color: var(--red); }
.tline-item.is-current .tline-dot { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-ring); }
.tline-body { flex: 1; min-width: 0; display: block; color: inherit; text-decoration: none; border-radius: 6px; margin: -2px -6px 0; padding: 2px 6px; }
a.tline-body:hover { background: var(--hover); }
.tline-item.is-viewing .tline-body { background: var(--ac-soft); }
.tline-label { font: 700 12.5px var(--font); color: var(--ink); }
.tline-item.is-todo .tline-label { color: var(--ink-4); }
.tline-line { font: 500 11.5px/1.35 var(--font); color: var(--ink-3); margin-top: 1px; }
.tline-item.is-failed .tline-line { color: var(--red); }
.tline-sub { font: 500 11px var(--font); color: var(--ink-4); margin-top: 1px; }
/* The lab steps list each variety's test under the step, one small line each. */
.tline-tests { list-style: none; margin: 5px 0 0; padding: 0 0 0 8px; border-left: 2px solid var(--line-2); }
.tline-tests li { font: 500 11.5px/1.35 var(--font); color: var(--ink-3); padding: 2px 0; }
.tline-tests-nm { font-weight: 700; color: var(--ink-2); }
.tline-tests li.is-pass { color: var(--green-ink); }
.tline-tests li.is-fail { color: var(--red); }
.tline-tests li .tline-sub { color: var(--ink-4); }
@media (max-width: 1100px) { .ship-steps { grid-template-columns: 1fr; } .tline { position: static; } }
/* Arrival: the single action sits large and centred above the booked sheet. */
.arrive-cta { display: flex; justify-content: center; margin: 4px 0 20px; }
.gp-tested { display: inline-flex; align-items: center; gap: 4px; font: 700 12.5px var(--font); color: var(--green-ink); }
/* Arrival: the time and the button, centred; once arrived, the record of it and a way to correct the time. */
.arrive-box { max-width: 440px; margin: 6px auto 10px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.arrive-box > .btn { align-self: center; }
.arrive-done { text-align: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-2); }
.arrive-done-k { font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.arrive-done-v { font: 800 20px var(--font); color: var(--ink); margin: 4px 0 6px; }
.arrive-done-sub { font: 500 12.5px var(--font); color: var(--ink-3); }
.arrive-change { display: flex; align-items: flex-end; gap: 10px; }
.arrive-change .field { margin-bottom: 0; }
/* For a button drawn by a component that sets its own classes (x-confirm-form): size it from the wrapper. */
.arrive-cta--lg { margin: 4px 0 8px; }
.arrive-cta--lg .btn { height: 48px; padding: 0 26px; font-size: 15px; border-radius: var(--r-lg); }
.sheet-table tr.is-void td { color: var(--ink-4); text-decoration: line-through; }
.steppanel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; margin-bottom: 16px; }
.steppanel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-2); }
.steppanel-head-text { flex: 1 1 200px; min-width: 0; }
.steppanel-kicker { font: 700 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.steppanel-title { font: 800 17px var(--font); letter-spacing: -.02em; color: var(--ink); margin-top: 3px; }
.steppanel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.steppanel-head:not(:has(.steppanel-actions > *)) { display: none; }
.steppanel-body { padding: 20px; }
.steppanel-body--tight { padding: 14px 18px; }
.steppanel-locked { padding: 34px 20px; text-align: center; font: 500 13.5px/1.6 var(--font); color: var(--ink-4); }
.steppanel-center { padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; font: 600 14px var(--font); color: var(--ink-2); }
.steppanel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line-2); background: var(--panel-2); }
.steppanel-hint { font: 500 12.5px var(--font); color: var(--ink-4); white-space: nowrap; }
details.steppanel--done > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font: 600 13.5px var(--font); color: var(--ink-2); }
details.steppanel--done > summary::-webkit-details-marker { display: none; }
details.steppanel--done > summary .step-circle { width: 22px; height: 22px; }
details.steppanel--done > summary .steppanel-title { font-size: 15px; margin: 0; }
details.steppanel--done > summary .steppanel-summary { flex: 1; min-width: 0; font: 500 13px var(--font); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.steppanel--done > summary .chev { transition: transform .16s; color: var(--ink-3); }
details.steppanel--done[open] > summary .chev { transform: rotate(180deg); }
details.steppanel--done[open] > summary { border-bottom: 1px solid var(--line-2); }

.lab-grid { width: auto; min-width: 0; border-collapse: collapse; }
.lab-grid td:first-child, .lab-grid th:first-child { min-width: 180px; }
.lab-grid th { height: 40px; padding: 0 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); font: 700 11.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: left; }
.lab-grid td { padding: 8px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.lab-grid tr.is-fail td { background: var(--red-soft); }
.lab-grid tr:last-child td { border-bottom: 0; }
.lab-grid .input { min-height: 38px; padding: 8px 10px; font-size: 13.5px; }
.lab-grid .lab-name { font: 600 13.5px var(--font); color: var(--ink); }
.lab-grid .lab-limit { font: 500 13.5px var(--font); color: var(--ink-3); text-align: right; }
.lab-wrap { width: fit-content; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.lab-wrap .dtable-wrap { margin: 0; }
/* the lab test: its fields run the full width, the readings, note and verdict sit as one column in the middle */
.lab-form > :not(.grid--auto-sm) { max-width: 720px; margin-inline: auto; }
.lab-form .lab-wrap, .lab-form .lab-grid { width: 100%; }
.verdict { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; }
.verdict--pass { background: color-mix(in srgb, var(--green) 14%, var(--panel)); color: var(--green); }
.verdict--fail { background: var(--red-soft-2); color: var(--red); }
.verdict--blank { font: 700 13px var(--font); color: var(--ink-4); }
.lab-add { display: flex; align-items: center; gap: 9px; padding: 12px; cursor: pointer; font: 700 13.5px var(--font); color: var(--ac); }
.lab-add:hover { background: var(--ac-soft); }
.weigh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.weigh-note { font: 500 12px var(--font); color: var(--ink-4); }
.weigh-note.is-bad { color: var(--red); }
.weigh-note.is-ok { color: var(--green-ink); }
.delta-preview { font: 500 12.5px var(--font); color: var(--ink-3); margin-top: 8px; }
.delta-preview strong { font: 800 14px var(--font); }
.delta-preview .is-neg { color: var(--red); }
.delta-preview .is-pos { color: var(--green); }
.delta-preview.is-err { color: var(--red); }

.summary { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; margin-bottom: 22px; }
.summary-toggle { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; width: 100%; border: 0; background: transparent; text-align: left; }
.summary-toggle:hover { background: var(--hover); }
.summary-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.summary-id { font: 700 11.5px var(--font); letter-spacing: .1em; color: var(--ink-4); }
.summary-name { font: 700 17px/1.3 var(--font); letter-spacing: -.015em; color: var(--ink); }
.summary-meta { font: 500 12.5px var(--font); color: var(--ink-4); }
.summary-right { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.summary-hint { font: 700 12px var(--font); color: var(--ink-3); white-space: nowrap; }
.summary-chev { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-3); transition: transform .16s ease; }
.summary.is-open .summary-chev { transform: rotate(180deg); }
.summary-body { border-top: 1px solid var(--line-2); }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; padding: 16px; }
.meta-tile { min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 13px 14px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; }
.meta-k { font: 700 10.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.meta-v { font: 700 14px var(--font); color: var(--ink); overflow-wrap: break-word; }
a.meta-v { color: var(--ac); width: fit-content; max-width: 100%; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ac) 40%, transparent); }
a.meta-v:hover { text-decoration-color: var(--ac); }
.meta-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.meta-row-k { flex: 0 0 74px; font: 600 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.meta-row-v { min-width: 0; font: 600 12.5px var(--font); color: var(--ink-2); overflow-wrap: break-word; }
.copy { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; cursor: pointer; }
.copy:hover { color: var(--ac); }
.copy svg { opacity: .7; }

.voucher { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-sm); overflow: hidden; }
.voucher-head { padding: 14px 16px; border-bottom: 1px solid var(--line-2); background: var(--panel-2); }
.voucher-kicker { font: 700 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.voucher-id { font: 800 15px var(--font); color: var(--ink); margin-top: 4px; }
.voucher-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.voucher-k { font: 700 10.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 5px; }
.voucher-v { font: 700 14px var(--font); color: var(--ink); }
.voucher-v.is-empty { color: var(--ink-4); font-weight: 600; }
.voucher-line { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.voucher-line-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px var(--font); color: var(--ink); }
.voucher-line-sub { font: 500 11.5px var(--font); color: var(--ink-4); }
.voucher-line-qty { font: 700 13px var(--font); color: var(--ink-2); }
.voucher-line-amt { font: 700 12px var(--font); color: var(--ac); min-width: 56px; text-align: right; }
.voucher-totals { border-top: 1px dashed var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.voucher-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.voucher-tot-k { font: 600 12.5px var(--font); color: var(--ink-3); white-space: nowrap; }
.voucher-tot-v { font: 700 13px var(--font); color: var(--ink-2); white-space: nowrap; }
.voucher-tot.is-grand .voucher-tot-k { font-weight: 700; color: var(--ink-2); }
.voucher-tot.is-grand .voucher-tot-v { font: 800 14.5px var(--font); color: var(--ink); }

/* ============================================================ Documents (screen preview) */
.doc { border: 1px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); max-width: 760px; }
.doc--A5 { max-width: 640px; }
.doc-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 18px; border-bottom: 2px solid var(--ink); }
.doc-head-text { flex: 1 1 200px; }
.doc-title { font: 800 18px var(--font); letter-spacing: -.02em; color: var(--ink); }
.doc-kicker { font: 700 11.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.doc-right { text-align: right; }
.doc-id { font: 800 18px var(--font); color: var(--ink); }
.doc-sub { font: 500 12.5px var(--font); color: var(--ink-3); margin-top: 3px; }
.doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; padding: 18px; }
.doc-k { font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.doc-v { font: 700 14px var(--font); color: var(--ink); margin-top: 4px; overflow-wrap: break-word; }
.doc-body { padding: 0 18px 18px; }
.doc-kv { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.doc-kv th { width: 44%; text-align: left; font: 600 12px var(--font); color: var(--ink-3); padding: 6px 0; border-bottom: 1px dashed var(--line); }
.doc-kv td { text-align: right; font: 700 13px var(--font); color: var(--ink); padding: 6px 0; border-bottom: 1px dashed var(--line); }
.doc-grid { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.doc-grid th { font: 700 10px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: left; border-bottom: 1px solid var(--ink); padding: 6px 8px 6px 0; }
.doc-grid td { font: 500 12.5px var(--font); color: var(--ink); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line-2); }
.doc-grid .num, .doc-grid th.num { text-align: right; font-family: var(--font); }
.doc-grid tfoot td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 0; }
.doc-verdict { padding: 14px 18px; border-top: 1px dashed var(--line); background: var(--panel-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 500 12.5px var(--font); color: var(--ink-3); }
.doc-verdict .pass { font-weight: 700; color: var(--green); }
.doc-verdict .fail { font-weight: 700; color: var(--red); }
.doc-sign { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 0 18px 18px; }
.doc-sign-line { flex: 1 1 30%; border-top: 1px solid var(--ink-2); text-align: center; padding-top: 5px; font: 500 12px var(--font); color: var(--ink-3); }
.doc-foot { margin-top: 12px; padding: 10px 18px; font: 500 11px var(--font); color: var(--ink-4); border-top: 1px solid var(--line); }
.doc-note { font: 500 12.5px var(--font); color: var(--ink-2); border-left: 2px solid var(--line); padding: 2px 0 2px 9px; margin-bottom: 8px; }
.doc-section { margin: 16px 0 10px; font: 700 13px var(--font); color: var(--ink); }

/* ============================================================ Feedback & overlays */
.toast-root { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: var(--r-pill); background: #111827; color: #fff; font: 600 13.5px var(--font); box-shadow: var(--sh-lg); animation: toastIn .16s cubic-bezier(.2, .8, .2, 1.1) both; pointer-events: auto; max-width: min(560px, 92vw); }
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--green); flex: 0 0 8px; }
.toast--warn::before { background: var(--amber); }
.toast--err::before { background: var(--red); }
.toast--info::before { background: var(--ac); }
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); font: 500 13.5px/1.5 var(--font); color: var(--ink-2); margin-bottom: 16px; }
.alert svg { flex: 0 0 16px; margin-top: 2px; }
.alert > div { flex: 1; min-width: 0; }
.alert ul { margin: 4px 0 0; padding-left: 18px; }
.alert strong { color: inherit; }
.alert--error { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red-ink); }
.alert--warn { background: color-mix(in srgb, var(--amber) 12%, var(--panel)); border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber-ink); }
.alert--ok { background: color-mix(in srgb, var(--green) 12%, var(--panel)); border-color: color-mix(in srgb, var(--green) 35%, transparent); color: var(--green-ink); }
.alert--info { background: var(--ac-soft); border-color: color-mix(in srgb, var(--ac) 30%, transparent); color: var(--ac-press); }
.alert--muted { background: var(--panel-2); border-color: var(--line); color: var(--ink-3); }
.alert-close { margin-left: auto; flex: 0 0 auto; border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; padding: 0; line-height: 1; }
.alert-close:hover { opacity: 1; }
.notice { padding: 12px 14px; border-radius: var(--r); font: 500 12.5px/1.55 var(--font); }
.notice--amber { background: color-mix(in srgb, var(--amber) 12%, var(--panel)); color: var(--amber-ink); }
.notice--green { background: color-mix(in srgb, var(--green) 12%, var(--panel)); color: var(--green-ink); }
.notice--red { background: var(--red-soft); color: var(--red-ink); }
.notice--muted { background: var(--panel-2); color: var(--ink-3); }
.notice--ac { background: var(--ac-soft); color: var(--ac-press); }

.modal-scrim { position: fixed; inset: 0; background: rgba(17, 24, 39, .45); z-index: 60; display: grid; place-items: center; padding: 16px; animation: popIn .12s ease; }
.modal { background: var(--panel); border-radius: 14px; box-shadow: var(--sh-pop); width: min(440px, 94vw); padding: 22px; max-height: 92vh; overflow: auto; }
.modal--wide { width: min(720px, 94vw); }
.modal--palette { width: min(560px, 94vw); padding: 0; overflow: hidden; align-self: start; margin-top: 10vh; }
.modal-title { font: 800 17px var(--font); letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; }
.modal-body { font: 500 14px/1.5 var(--font); color: var(--ink-2); }
.modal-body .field { margin-top: 14px; margin-bottom: 0; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.palette-list { max-height: 60vh; overflow-y: auto; padding: 6px; }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--ink); cursor: pointer; }
.palette-item:hover, .palette-item.is-cursor { background: var(--hover); }
.palette-item svg { color: var(--ink-3); flex: 0 0 18px; }
.palette-item-label { flex: 1; min-width: 0; font: 600 14px var(--font); }
.palette-item-group { font: 600 11.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }

.empty { padding: 34px 20px; text-align: center; font: 500 13.5px var(--font); color: var(--ink-4); }
.empty svg { display: block; margin: 0 auto 8px; color: var(--ink-4); }
.empty .btn { margin-top: 12px; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 4px; font: 500 12.5px var(--font); color: var(--ink-4); }
.pager-links { display: flex; align-items: center; gap: 4px; }
.pager-btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink-2); font: 700 12.5px var(--font); }
.pager-btn:hover { background: var(--hover); color: var(--ink); }
.pager-btn.is-on { background: var(--ac); border-color: var(--ac); color: #fff; }
.pager-btn.is-disabled { opacity: .4; pointer-events: none; }
.pager-gap { padding: 0 4px; color: var(--ink-4); }

.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.kv dt { font: 700 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); padding-top: 3px; white-space: nowrap; }
.kv dd { margin: 0; font: 600 13.5px var(--font); color: var(--ink); overflow-wrap: anywhere; }
.kv--wide { grid-template-columns: 1fr; gap: 12px; }
.kv--wide dt { padding-top: 0; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline-item { position: relative; border-left: 2px solid var(--line); padding: 0 0 12px 14px; }
.timeline-item::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ac); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-title { font: 700 13px var(--font); color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.timeline-meta { font: 500 12px var(--font); color: var(--ink-4); margin-top: 2px; }
.timeline-desc { font: 500 12.5px/1.5 var(--font); color: var(--ink-2); margin-top: 3px; }

.filters { margin-bottom: 16px; }
.filters-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 12px 14px; }
.filters-row .field, .filters-row > div { margin-bottom: 0; flex: 0 1 auto; min-width: 140px; }
.filters-row .field-label { font-size: 11px; margin-bottom: 6px; }
.filters-row .input, .filters-row .select { min-height: 40px; padding: 8px 10px; font-size: 13.5px; }
.filters-row .select { padding-right: 30px; }
.filters-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.filters-row .input-search { min-width: 220px; }
.table-tools { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.col-toggle-pop { min-width: 210px; max-height: 60vh; overflow: auto; }
.col-toggle-item { cursor: pointer; }
.col-toggle-item input { width: 16px; height: 16px; margin: 0; accent-color: var(--ac); cursor: pointer; }

/* party labels: chips with an × to take one off, and a dashed chip to add one */
.label-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.label-chip { padding-right: 4px; }
.label-chip form { display: inline-flex; }
.label-chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; opacity: .65; cursor: pointer; }
.label-chip-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }
.label-add { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px dashed var(--line); border-radius: var(--r-pill); background: transparent; color: var(--ink-3); font: 700 12px var(--font); cursor: pointer; }
.label-add:hover { border-color: var(--ac); color: var(--ac); }
.bank-acct { display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); }
.bank-acct + .bank-acct { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.bank-acct-name { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }

/* order entry form: one variety at a time, added to the live voucher */
.order-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.order-entry .field { margin-bottom: 0; }
.order-entry-wide { grid-column: 1 / -1; }
.order-entry-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* The line's amount reads beside the button that commits it: a figure, not a field. */
.order-entry-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 2px; }
.order-entry-amount { flex: 1 1 auto; font: 800 24px/1.2 var(--font); letter-spacing: -.02em; color: var(--ink); }
.order-entry-amount.is-empty { color: var(--ink-4); }
.btn--outline-ac kbd { background: var(--ac-soft); border: 1px solid color-mix(in srgb, var(--ac) 30%, transparent); color: var(--ac); opacity: 1; }
/* large voucher (purchase order): a wider, easier-to-read panel with a Variety / KG / Price / Total grid */
.voucher--lg .voucher-head { padding: 16px 20px; }
.voucher--lg .voucher-kicker { font-size: 12px; }
.voucher--lg .voucher-id { font-size: 18px; }
.voucher--lg .voucher-body { padding: 20px; gap: 18px; }
.voucher--lg .voucher-k { font-size: 11.5px; margin-bottom: 8px; }
.voucher--lg .voucher-v { font-size: 16px; }
.voucher--lg .voucher-tot-k { font-size: 14px; }
.voucher--lg .voucher-tot-v { font-size: 15px; }
.voucher--lg .voucher-tot.is-grand .voucher-tot-v { font-size: 18px; }
.voucher-grid { display: grid; grid-template-columns: minmax(0, 1fr) 80px 90px 110px 26px; gap: 10px; align-items: center; }
.voucher-grid .num { text-align: right; }
.voucher-grid-head { padding: 0 8px 6px; margin: 0 -8px; border-bottom: 1px solid var(--line); font: 700 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.voucher--lg .voucher-line { padding: 9px 8px; }
.voucher--lg .voucher-line-nm { font-size: 15px; white-space: normal; }
.voucher--lg .voucher-line-sub { font: 500 12.5px var(--font); color: var(--ink-4); margin-top: 2px; }
.voucher--lg .voucher-line-qty { font-size: 14.5px; }
.voucher--lg .voucher-line-amt { font-size: 14.5px; min-width: 0; }
.voucher-empty { font: 500 14px var(--font); padding: 8px 0; }
.voucher-grid--weigh { grid-template-columns: minmax(0, 1fr) 100px minmax(90px, .7fr) 96px 96px 52px 28px; }
.weigh-cols { grid-template-columns: minmax(300px, .75fr) minmax(0, 1.6fr); }
/* The weighbridge as a compact invoice-style sheet beside the entry form. */
.weigh-sheet { max-width: none; padding: 28px 32px 24px; }
/* Larger type than the other sheets: this one is read at the weighbridge, often from a distance. */
.weigh-sheet .sheet-table th { font-size: 11.5px; }
.weigh-sheet .sheet-table td { font-size: 14.5px; padding-top: 11px; padding-bottom: 11px; }
.weigh-sheet .sheet-item { font-size: 15px; }
.weigh-sheet .sheet-item-sub { font-size: 12.5px; }
.weigh-sheet .sheet-table td.num { font-size: 15px; }
.weigh-sheet .sheet-table tfoot td { font-size: 15px; }
.weigh-sheet .sheet-table tfoot td.num { font-size: 17px; }
.weigh-time { white-space: nowrap; color: var(--ink-3); }
.weigh-stack { gap: 16px; }
/* Weighbridge entry: Reading · Weight · Bags · Weight slip · Record on one row; wraps only on narrow screens. */
.weigh-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.weigh-row > .field { flex: 1 1 130px; min-width: 0; margin-bottom: 0; }
.weigh-row > .field:first-child { flex-basis: 180px; }
.weigh-record { flex: 0 0 auto; }
.weigh-done { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--green) 7%, var(--panel)); }
.weigh-done-text { flex: 1 1 260px; color: var(--ink-2); }
.weigh-operator { margin-top: -4px; text-align: right; font: 500 11.5px var(--font); color: var(--ink-4); }
/* Drop zone: files as tiles, and a tile that takes new ones (drop or click) and uploads them at once. */
.dz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.dz-tile { position: relative; }
.dz-thumb { display: grid; place-items: center; align-content: center; gap: 4px; height: 110px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); color: var(--ink-3); overflow: hidden; text-decoration: none; }
.dz-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dz-ext { font: 700 11px var(--font); letter-spacing: .06em; }
.dz-del { position: absolute; top: 6px; right: 6px; }
.dz-del .iconbtn { background: var(--panel); box-shadow: var(--sh-sm); }
/* The drop target spans the whole card, under any tiles. */
.dz-drop { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 110px; padding: 10px; border: 2px dashed var(--line-2); border-radius: var(--r); color: var(--ink-3); text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
.dz-drop:hover, .dz-drop.is-over { border-color: var(--ac); background: var(--ac-soft); color: var(--ac); }
.dz-drop.is-busy { opacity: .7; cursor: progress; }
.dz-drop.is-error { border-color: var(--red); color: var(--red); }
.dz-hint { font: 500 11.5px/1.3 var(--font); }
.weigh-sheet .sheet-table td { vertical-align: top; }
.weigh-slip { font-size: 13.5px; color: var(--ink-2); }
.weigh-sup { font: 500 13.5px var(--font); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.grid--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
@media screen and (max-width: 900px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--2 > .field, .grid--3 > .field, .grid--4 > .field { margin-bottom: 0; }
/* weighbridge totals under the columns */
.weigh-foot { border-top: 2px solid var(--line); margin-top: -1px; }
.weigh-foot > .voucher-grid { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.weigh-foot > .voucher-grid.is-grand { border-bottom: 0; }
.weigh-foot-k { font: 700 13px var(--font); color: var(--ink-3); white-space: nowrap; }
.weigh-foot-v { font: 700 14.5px var(--font); color: var(--ink); }
.weigh-foot .is-grand .weigh-foot-k { color: var(--ink); }
.weigh-foot .is-grand .weigh-foot-v { font-size: 16px; }
@media (max-width: 760px) { .voucher-grid--weigh { grid-template-columns: minmax(0, 1fr) 90px 90px 28px; } .voucher-grid--weigh > :nth-child(2), .voucher-grid--weigh > :nth-child(3), .voucher-grid--weigh > :nth-child(6) { display: none; } }
.voucher-line-rm.weigh-rm { opacity: 1; }
.voucher-grid--gp { grid-template-columns: minmax(0, 1fr) 150px 130px; }
.voucher-id.is-pending { color: var(--ink-4); }
.gp-cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.gp-result { font: 600 14px var(--font); color: var(--ink-2); }
.gp-result.is-green { color: var(--green-ink); }
.gp-result.is-red { color: var(--red); }
.gp-result.is-amber { color: var(--amber-ink); }
.voucher-grid--ship { grid-template-columns: minmax(0, 1fr) 100px 100px 90px 120px 130px; }
.voucher-line.is-cancelled .voucher-line-nm, .voucher-line.is-cancelled .voucher-line-qty, .voucher-line.is-cancelled .voucher-line-amt { color: var(--ink-4); text-decoration: line-through; }
/* shipment details card: the body reads as an invoice sheet on a tinted backdrop */
.summary-body:has(.doc-sheet) { background: var(--panel-2); padding: 16px; }
@media (max-width: 760px) { .voucher-grid--ship { grid-template-columns: minmax(0, 1fr) 80px 80px; } .voucher-grid--ship > :nth-child(n+4) { display: none; } }
.voucher-grid--recv { grid-template-columns: minmax(0, 1fr) 90px 110px 90px 130px; }
.voucher-line-qty.is-done { color: var(--green-ink); }
/* a saved document shown as its voucher (purchase order view) */
.doc-view { max-width: 980px; display: flex; flex-direction: column; gap: 18px; }
.doc-view--center { margin-inline: auto; }
.doc-view-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.doc-view-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.doc-view-meta a { color: var(--ink); }
.doc-view-meta a:hover { color: var(--ac); }
@media (max-width: 640px) { .voucher-grid--recv { grid-template-columns: minmax(0, 1fr) 70px 80px 70px 100px; gap: 6px; } }
/* voucher lines you can click to edit, with a delete icon on hover */
.voucher-line.is-editable { cursor: pointer; margin: 0 -8px; padding: 6px 8px; border-radius: 8px; align-items: center; }
.voucher-line.is-editable:hover { background: var(--hover); }
.voucher-line.is-editing { background: var(--ac-soft); }
.voucher-line-rm { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--red); cursor: pointer; opacity: 0; transition: opacity .12s; }
.voucher-line.is-editable:hover .voucher-line-rm, .voucher-line-rm:focus-visible { opacity: 1; }
.voucher-line-rm:hover { background: var(--red-soft); }
@media (hover: none) { .voucher-line-rm { opacity: 1; } }

.disclosure > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--font); color: var(--ac); cursor: pointer; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: '+'; font: 700 14px var(--font); }
.disclosure[open] > summary::before { content: '−'; }
.disclosure-body { margin-top: 12px; }

.dropdown { position: relative; }
.dropdown-pop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-pop); z-index: 45; padding: 6px; animation: popIn .14s ease; }
.dropdown-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 600 13.5px var(--font); text-align: left; cursor: pointer; white-space: nowrap; }
.dropdown-item:hover { background: var(--hover); color: var(--ink); }
.dropdown-item.is-danger { color: var(--red); }
.dropdown-text { padding: 8px 12px 6px; font: 500 12.5px var(--font); color: var(--ink-4); }
.dropdown-sep { height: 1px; background: var(--line-2); margin: 6px 4px; }

.progress { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--ac); border-radius: 999px; }
.progress--green > span { background: var(--green); }
.progress--amber > span { background: var(--amber); }
.progress--red > span { background: var(--red); }
.stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.stat-row-k { font: 600 12.5px var(--font); color: var(--ink-3); }
.stat-row-v { font: 700 13.5px var(--font); color: var(--ink); }
.list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.list-row:first-child { border-top: 0; }
.list-row-text { flex: 1; min-width: 0; }
.list-row-nm { font: 700 14px var(--font); color: var(--ink); }
.list-row-sub { font: 500 12px var(--font); color: var(--ink-4); margin-top: 2px; }
.list-row-val { font: 700 14px var(--font); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
a.list-row { color: inherit; }
a.list-row:hover .list-row-nm { color: var(--ac); }

.trace-tree ul { list-style: none; padding-left: 1.25rem; border-left: 1px dashed var(--line); margin: 0; }
.trace-tree li { padding: .15rem 0; font-size: 13px; }
.lot-picker tr.selected, .lot-picker tr.is-selected { background: var(--sel); }
.w-6 { width: 6rem; } .w-8 { width: 8rem; } .w-10 { width: 10rem; }
.chart-box { position: relative; height: 240px; }
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh); padding: 28px; }
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand .side-tile { margin: 0 auto 10px; width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
.auth-title { font: 800 20px var(--font); letter-spacing: -.02em; color: var(--ink); }
.auth-sub { font: 500 13px var(--font); color: var(--ink-4); margin-top: 3px; }

/* ============================================================ Responsive */
@media screen and (max-width: 1180px) {
    .cols--voucher { grid-template-columns: 1fr; }
    .cols--voucher .sticky { position: static; }
}
@media screen and (max-width: 820px) {
    .side { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1); box-shadow: none; }
    .side.is-open { transform: none; box-shadow: var(--sh-pop); }
    .side-close { display: inline-grid !important; }
    body.has-drawer .ws-scrim { display: block; }
    .menu-btn { display: inline-grid !important; }
    .topbar { padding: 0 14px; gap: 10px; }
    .search { max-width: 44px; padding: 0 12px; }
    .search span, .search kbd { display: none; }
    .userchip-sub { display: none; }
    .page { padding: 18px 14px 32px; }
    .worksplit { grid-template-columns: 1fr; margin: -18px -14px -32px; min-height: 0; }
    .worksplit-form, .worksplit-preview { padding: 18px 14px 32px; }
    .worksplit-preview { border-left: 0; border-top: 1px solid var(--line); }
    .cols, .cols--3-1, .cols--1-1, .cols--2-1 { grid-template-columns: 1fr; }
    .sticky { position: static; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid > * { grid-column: span 12; }
    .steppanel-foot { flex-direction: column; align-items: stretch; }
    .steppanel-hint { white-space: normal; text-align: center; }
}
@media screen and (max-width: 560px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .crumb-root, .crumb-sep { display: none; }
    .userchip { padding: 0 8px; }
    .userchip > div { display: none; }
    .topbar { gap: 8px; }
    .content { overflow-x: hidden; }
    .grid--auto, .grid--auto-sm, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .seg-item { padding: 9px 12px; }
    .side-kbd, .topbar kbd, .btn kbd { display: none; }
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1 1 auto; }
    .step-label { font-size: 11px; }
    .topbar-cta-label { display: none; }
    .topbar .btn--primary { padding: 0 12px; }
}
@media print {
    .side, .topbar, .toast-root, .ws-scrim, .modal-scrim, .table-tools { display: none !important; }
    .shell { height: auto; overflow: visible; }
    .content { overflow: visible; }
}

/* long KPI values (big money figures) step down instead of truncating */
.kpi-value.is-long { font-size: 22px; }
.kpi-value.is-xlong { font-size: 18px; }

/* ---- sale line = variety row + production-date picker underneath */
.lineed-item { border-bottom: 1px solid var(--line-2); animation: lineIn .35s ease both; }
.lineed-item:last-child { border-bottom: 0; }
.lineed-item .lineed-row { border-bottom: 0; }
.lineed-picker { padding: 0 14px 12px 28px; display: grid; gap: 6px; }
.picker-row { display: grid; grid-template-columns: 112px minmax(140px, 1fr) 96px 110px 84px; gap: 8px; align-items: center; font: 500 12.5px var(--font); color: var(--ink-2); }
.picker-row .input { min-height: 34px; padding: 6px 8px; font-size: 13px; }
.picker-row .picker-date { font: 700 12.5px var(--font); color: var(--ink); }
.picker-row .picker-avail { color: var(--ink-3); }
.picker-row .picker-rate { font: 700 12.5px var(--font); text-align: right; }
.picker-empty { font: 500 12.5px var(--font); color: var(--red); padding: 2px 0 6px; }
.picker-head { display: grid; grid-template-columns: 112px minmax(140px, 1fr) 96px 110px 84px; gap: 8px; font: 700 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }

/* ============================================================ Segmented radio
   A choice that has to be made deliberately — "which balance does this settle". */
.seg-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-radio-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; background: var(--panel); font: 600 13.5px var(--font); }
.seg-radio-item:hover { border-color: var(--ac); }
.seg-radio-item.is-on { border-color: var(--ac); background: var(--ac-soft); }
.seg-radio-item input { accent-color: var(--ac); }
.seg-radio-item .mono { color: var(--ink-3); }
.seg-radio-item:has(input:disabled) { cursor: default; opacity: .9; }

/* ============================================================ Document sheet
   The shared document head of a detail page — purchase order, sale order, delivery,
   shipment. Boxed meta tiles, ruled lines and totals set to the right, so the page
   reads as the document it stands for before it reads as a screen. */
.doc-sheet .doc-view-meta { gap: 10px; }
.doc-sheet .doc-view-meta > div { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); }
.doc-sheet .voucher-grid-head { margin: 0; padding: 9px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px 8px 0 0; }
.doc-sheet .voucher-line { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-top: 0; }
.doc-sheet .voucher-line:last-child { border-radius: 0 0 8px 8px; }
.doc-sheet .voucher-line:nth-child(odd) { background: color-mix(in srgb, var(--panel-2) 55%, var(--panel)); }
.doc-sheet .voucher-totals { align-self: flex-end; min-width: min(380px, 100%); }

/* A journal line on a voucher: the account it hit, and which side of the books it landed on. */
.voucher-grid--journal { grid-template-columns: minmax(0, 1fr) 140px 140px; }
/* Signature lines sit inside the sheet, which already carries its own padding. */
.doc-sheet .doc-sign { padding: 0; margin-top: 18px; }

/* ---- document sheet: an order rendered as the paper it stands in for, on screen and in print */
.doc-view--sheet { max-width: 880px; }
.sheet { max-width: 880px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 52px 56px 40px; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; }
.sheet-org { font: 800 21px var(--font); letter-spacing: -.02em; color: var(--ink); }
.sheet-org-sub { font: 500 12.5px/1.6 var(--font); color: var(--ink-3); margin-top: 3px; max-width: 320px; }
.sheet-kind { font: 400 27px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-align: right; margin-left: auto; }
.sheet-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; margin-top: 44px; }
.sheet-meta-col { display: flex; flex-direction: column; gap: 18px; }
.sheet-k { font: 700 10px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.sheet-party { font: 700 15px var(--font); color: var(--ink); margin-top: 6px; }
.sheet-party a, .sheet-party-line a { color: var(--ink); }
.sheet-party a:hover, .sheet-party-line a:hover { color: var(--ac); }
.sheet-party-line { font: 500 13px/1.65 var(--font); color: var(--ink-2); }
.sheet-party-line--lead { font-weight: 700; color: var(--ink); margin-top: 6px; }
.sheet-facts { display: flex; flex-direction: column; gap: 5px; text-align: right; font: 500 13px var(--font); color: var(--ink-2); }
.sheet-fact-k { color: var(--ink-4); }
.sheet-fact-v { font-weight: 700; color: var(--ink); }
.sheet-table { width: 100%; border-collapse: collapse; margin-top: 42px; }
.sheet-table th { font: 700 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-align: left; padding: 10px 12px; border-top: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); }
.sheet-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sheet-table th:first-child, .sheet-table td:first-child { padding-left: 0; }
.sheet-table th:last-child, .sheet-table td:last-child { padding-right: 0; }
.sheet-table .num { text-align: right; font-family: var(--font); font-variant-numeric: tabular-nums; }
.sheet-table td.num { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sheet-table td.is-done { color: var(--green-ink); }
.sheet-item { font: 600 14px var(--font); color: var(--ink); }
.sheet-item-sub { font: 500 12px var(--font); color: var(--ink-4); margin-top: 3px; }
.sheet-table td.sheet-item-sub { font: 500 12px var(--font); color: var(--ink-4); }
.sheet-totals { width: min(380px, 100%); margin: 16px 0 0 auto; }
.sheet-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; font: 600 13px var(--font); color: var(--ink-2); }
.sheet-tot.is-grand { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--ink-2); font: 700 15px var(--font); color: var(--ink); }
.sheet-tot.is-grand .mono { font-size: 21px; }
.sheet-tot.is-aside { border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-3); }
/* A labelled group under the totals (e.g. bag terms): reference figures, lighter than the sums above. */
.sheet-tot-group { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.sheet-tot-group .sheet-k { margin-bottom: 2px; }
.sheet-tot.is-detail { padding: 5px 0; font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
.sheet-tot.is-detail .mono { color: var(--ink-2); }
.sheet-tot-note { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--ink-4); }
.sheet-notes { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.sheet-note-body { font: 500 13.5px/1.7 var(--font); color: var(--ink-2); white-space: pre-line; margin-top: 6px; }
.sheet-void { font: 700 13px var(--font); color: var(--red); margin-bottom: 10px; }
.sheet.is-void .sheet-kind { color: var(--red); }
.sheet-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--line); }
.sheet-foot-line { font: 500 12.5px/1.7 var(--font); color: var(--ink-3); }
.sheet-sign { display: flex; gap: 18px; }
.sheet-sign > div { width: 108px; padding-top: 6px; border-top: 1px solid var(--ink-4); text-align: center; font: 500 11.5px var(--font); color: var(--ink-4); }
.sheet-th-n { font-weight: 600; color: var(--ink-4); }
/* a sheet table squeezed into half a page: narrower gutters, smaller figures */
.sheet-table--tight th, .sheet-table--tight td { padding-left: 7px; padding-right: 7px; }
.sheet-table--tight th { font-size: 10px; letter-spacing: .04em; }
.sheet-table--tight .sheet-item { font-size: 12.5px; }
.sheet-table--tight td.num, .sheet-table--tight tfoot td.num { font-size: 12.5px; }
.sheet-table tr.is-fail td { background: var(--red-soft); }
/* sheet rows you can click to edit, with a delete icon on hover (the order forms' live sheet) */
.sheet-table tr.is-editable { cursor: pointer; }
.sheet-table tr.is-editable:hover td { background: var(--hover); }
.sheet-table tr.is-editing td { background: var(--ac-soft); }
/* the column's own total, sat under it */
.sheet-table tfoot td { padding: 9px 12px; border-bottom: 0; font: 700 13.5px var(--font); color: var(--ink); }
.sheet-table tfoot tr:first-child td { padding-top: 14px; border-top: 1px solid var(--ink-2); }
.sheet-table tfoot td:first-child { padding-left: 0; }
.sheet-table tfoot td:last-child { padding-right: 0; }
.sheet-table tfoot td.num { font-size: 16.5px; }
/* a block of labelled facts on the sheet (the bilty), three to a row */
.sheet-block { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.sheet-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; margin-top: 12px; }
.sheet-kv-k { font: 700 10px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.sheet-kv-v { font: 600 13px/1.5 var(--font); color: var(--ink); margin-top: 3px; overflow-wrap: anywhere; }
.sheet-kv-v.is-empty { font-weight: 500; color: var(--ink-4); }
/* the same sheet in a column rather than on a page: tighter, and as wide as what it sits in */
.sheet--compact { max-width: none; padding: 30px 32px 26px; }
.sheet--compact .sheet-kind { font-size: 21px; letter-spacing: .12em; }
.sheet--compact .sheet-org { font-size: 18px; }
.sheet--compact .sheet-meta { margin-top: 26px; gap: 18px; }
.sheet--compact .sheet-table { margin-top: 24px; }
.sheet--compact .sheet-table td { padding: 10px 10px; }
.sheet--compact .sheet-table tbody tr:last-child td { border-bottom: 0; }
.sheet--compact .sheet-block { margin-top: 24px; }
.sheet--compact .sheet-foot { margin-top: 26px; }
@media (max-width: 1100px) { .sheet--compact .sheet-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sheet--compact .sheet-sign { display: none; } }
/* smaller again: the sheet read inside a step panel, beside the work rather than instead of it */
.sheet--sm { padding: 24px 26px 20px; }
.sheet--sm .sheet-org { font-size: 16px; }
.sheet--sm .sheet-kind { font-size: 17px; }
.sheet--sm .sheet-org-sub { font-size: 11.5px; }
.sheet--sm .sheet-meta { margin-top: 18px; }
.sheet--sm .sheet-facts { font-size: 12px; }
.sheet--sm .sheet-party { font-size: 14px; }
.sheet--sm .sheet-party-line { font-size: 12.5px; }
.sheet--sm .sheet-table { margin-top: 18px; }
.sheet--sm .sheet-table th { padding: 8px 10px; }
.sheet--sm .sheet-table td { padding: 8px 10px; }
.sheet--sm .sheet-item { font-size: 13px; }
.sheet--sm .sheet-table td.num { font-size: 12.5px; }
.sheet--sm .sheet-table tfoot td { font-size: 12.5px; padding: 7px 10px; }
.sheet--sm .sheet-table tfoot tr:first-child td { padding-top: 11px; }
.sheet--sm .sheet-table tfoot td.num { font-size: 15px; }
.sheet--sm .sheet-block { margin-top: 18px; padding-top: 14px; }
.sheet--sm .sheet-kv { gap: 11px 14px; margin-top: 10px; }
.sheet--sm .sheet-kv-v { font-size: 12.5px; }
.sheet--sm .sheet-foot { margin-top: 18px; padding-top: 14px; }
/* a sheet read inside a step panel sits in the middle of it, only as wide as its columns need */
.sheet--center { margin-inline: auto; max-width: 640px; }
.sheet--center.sheet--roomy { max-width: 820px; }
@media (max-width: 720px) {
    .sheet { padding: 26px 20px 24px; }
    .sheet-kind { font-size: 19px; }
    .sheet-meta { margin-top: 28px; }
    .sheet-facts { text-align: left; }
    .sheet-sign { display: none; }
}

/* ---- invoice pages: the work on the left, the invoice as it will read on the right */
.inv-cols { grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr); }
.inv-cols .sheet-totals { width: 100%; }
.inv-cols .sheet-tot.is-grand .mono { font-size: 19px; }
@media screen and (max-width: 1180px) { .inv-cols { grid-template-columns: 1fr; } .inv-cols .sticky { position: static; } }

/* Full shipment report — a classic ruled document in the app's colours: centred letterhead, boxed details,
   solid section bars, and fully gridded tables with a tinted header row. Easy to read on screen and on paper. */
.report-page { background: var(--bg); padding: 24px 16px 48px; }
.report-bar { max-width: 980px; margin: 0 auto 14px; display: flex; gap: 8px; }
.report-sheet { max-width: 980px; margin: 0 auto; padding: 36px 40px 30px; border-radius: 4px; }
.report-sheet .sheet-head { display: block; text-align: center; padding-bottom: 16px; border-bottom: 3px double var(--ink); }
.report-sheet .sheet-org { font-size: 24px; }
.report-sheet .sheet-org-sub { font-size: 13px; }
.report-sheet .sheet-kind { margin-top: 10px; display: inline-block; padding: 4px 14px; border: 1.5px solid var(--ac); color: var(--ac); font-size: 14px; letter-spacing: .18em; }
.report-sheet .sheet-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 18px; border: 1px solid var(--line-2); }
.report-sheet .sheet-meta > * { padding: 12px 14px; }
.report-sheet .sheet-meta > * + * { border-left: 1px solid var(--line-2); }
.report-sheet .sheet-meta-col { display: grid; gap: 10px; }
.report-sheet .sheet-facts { display: grid; gap: 5px; align-content: start; }
.report-sec { margin-top: 26px; break-inside: avoid-page; }
.report-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 12px; background: var(--ac); color: #fff; font: 700 12.5px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.report-sec-head > span:last-child:not(:first-child) { font: 500 12.5px var(--font); letter-spacing: 0; text-transform: none; opacity: .9; }
.report-sheet .sheet-table { width: 100%; border-collapse: collapse; margin-top: 0; }
.report-sheet .sheet-table th, .report-sheet .sheet-table td { border: 1px solid var(--line-2); padding: 7px 10px; font-size: 13.5px; vertical-align: top; }
.report-sheet .sheet-table th { background: var(--ac-soft); color: var(--ink); font: 700 12px var(--font); letter-spacing: .02em; text-transform: none; }
.report-sheet .sheet-table td:first-child, .report-sheet .sheet-table th:first-child { padding-left: 10px; }
.report-sheet .sheet-table td:last-child, .report-sheet .sheet-table th:last-child { padding-right: 10px; }
.report-sheet .sheet-table tfoot td, .report-sheet .sheet-table tfoot tr:first-child td { background: var(--panel-2); font: 700 13.5px var(--font); padding-top: 7px; border-top: 1px solid var(--line-2); }
.report-sheet .sheet-table td.num, .report-sheet .sheet-table tfoot td.num { font-size: 13.5px; }
.report-sheet .sheet-item { font-size: 13.5px; }
.report-sheet .sheet-item-sub { font-size: 12px; }
.report-sub-table { margin-top: 10px !important; }
.report-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 10px; border: 1px solid var(--line-2); }
.report-kv > div { padding: 8px 10px; }
.report-kv > div + div { border-left: 1px solid var(--line-2); }
.report-lab .report-lab-head td { background: var(--panel-2); }
.report-lab td.is-pass { color: var(--green-ink); font-weight: 700; }
.report-lab td.is-fail { color: var(--red); font-weight: 700; }
.report-sheet .sheet-foot { margin-top: 30px; }
@media print {
    .report-page { background: #fff; padding: 0; }
    .report-bar { display: none; }
    .report-sheet { max-width: none; border: 0; box-shadow: none; padding: 0; }
    .report-sheet .sheet-table tr { break-inside: avoid; }
    .report-sec-head, .report-sheet .sheet-table th, .report-sheet .sheet-table tfoot td, .report-lab .report-lab-head td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 700px) { .report-sheet { padding: 20px 16px; } .report-sheet .sheet-meta, .report-kv { grid-template-columns: 1fr; } .report-sheet .sheet-meta > * + *, .report-kv > div + div { border-left: 0; border-top: 1px solid var(--line-2); } }