/* 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; }
/* The cash payment voucher under a record's number in a list (components/cash-voucher as="link"). */
.cv-link { display: flex; align-items: center; gap: 4px; width: max-content; margin-top: 4px; font: 700 12px var(--font); color: var(--ac); white-space: nowrap; }
.cv-link:hover { color: var(--ac-press); text-decoration: underline; }
.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; }
/* a purchase order's status on the list, as coloured text: pending grey, part received black, completed green */
.po-status { font-weight: 600; white-space: nowrap; color: var(--ink); }
.po-status--pending { color: var(--ink-4); }
.po-status--completed { color: var(--green-ink); }
.po-status--cancelled { color: var(--red); }
/* labels on a party: chips in a field that takes more as they are typed (x-label-input) */
.tagin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); cursor: text; position: relative; }
.tagin:focus-within { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-ring); }
.tagin.is-saving { opacity: .7; }
.tagin-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: var(--r-pill); background: var(--ac-soft); color: var(--ac); font: 600 12.5px var(--font); }
.tagin-x { border: 0; background: none; color: inherit; cursor: pointer; font: 700 14px/1 var(--font); width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; }
.tagin-x:hover { background: color-mix(in srgb, var(--ac) 18%, transparent); }
.tagin-input { flex: 1 0 120px; min-width: 120px; border: 0; outline: 0; background: transparent; font: 500 14px var(--font); color: var(--ink); padding: 4px 2px; }
/* labels used before, under the field as you type */
.tagin-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 264px; overflow: auto; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-pop); }
.tagin-opt { padding: 9px 10px; border-radius: 6px; font: 500 14px var(--font); color: var(--ink); cursor: pointer; }
.tagin-opt:hover, .tagin-opt.is-active { background: var(--ac-soft); color: var(--ac); }
.tagin-opt.is-new { color: var(--ink-3); font-weight: 600; }
.tagin-opt.is-new.is-active, .tagin-opt.is-new:hover { color: var(--ac); }
/* the same labels, read-only, under a name on the list */
.label-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.label-chip { padding: 1px 8px; border-radius: var(--r-pill); background: var(--ac-soft); color: var(--ac); font: 600 11px var(--font); }
.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; }
/* a name or address in Urdu: right to left, in Naskh, at the normal 44px height — 19px on a 36px line with 3px padding
   is the largest size whose tallest and deepest letters (ک گ ٹ ی ے, the ٰ mark) stay inside the field on Mac and Windows */
.field--urdu .input { direction: rtl; text-align: right; font: 400 19px/36px 'Noto Naskh Arabic', serif; min-height: 44px; padding-top: 3px; padding-bottom: 3px; }
.field--urdu .input::placeholder { font-weight: 400; }
/* while Gemini writes the Urdu, a spinner turns at the field's empty (left) end */
.urdu-wrap { position: relative; }
.urdu-wrap.is-loading::after { content: ''; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 999px; border: 2px solid var(--ac); border-right-color: transparent; animation: spin .7s linear infinite; pointer-events: none; }
.urdu-wrap.is-loading .input { padding-left: 38px; }
@media (prefers-reduced-motion: reduce) { .urdu-wrap.is-loading::after { animation-duration: 2s; } }
/* The English side of a name: its spinner sits at the end the text does not start from. */
.urdu-wrap--en.is-loading::after { left: auto; right: 12px; }
.urdu-wrap--en.is-loading .input { padding-left: 12px; padding-right: 38px; }
/* The mic on an Urdu field: on the left, where the right-to-left text ends; red while it listens. */
.urdu-mic { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-4); cursor: pointer; }
.urdu-mic:hover { background: var(--hover); color: var(--ac); }
.urdu-mic.is-on { background: var(--red-soft); color: var(--red); animation: micPulse 1.2s ease-in-out infinite; }
.urdu-wrap:has(.urdu-mic) .input { padding-left: 44px; }
/* While the Urdu is being written the mic stays where it is (it may be on its way to being tapped); the spinner sits beside it. */
.urdu-wrap:has(.urdu-mic).is-loading::after { left: 48px; }
.urdu-wrap:has(.urdu-mic).is-loading .input { padding-left: 72px; }
@keyframes micPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .urdu-mic.is-on { animation: none; } }
/* 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; }
/* The weighbridge sheet's letterhead: always open on a wide screen; on a phone a one-line bar that opens it. */
.weigh-head-sum { display: none; }
/* The truck's own reading is named in full on a wide screen, just "Truck" on a phone. */
.weigh-short { display: none; }
/* The weighbridge preview on a tablet: the voucher drops under the entry instead of being squeezed beside it. */
@media (max-width: 1100px) { .weigh-cols { grid-template-columns: minmax(0, 1fr); } .weigh-cols .sticky { position: static; } }
/* On a phone each reading stays one row under one header — Reading · Slip · Truck KG · Variety KG · Bags. Time, booked KG
   and who recorded it stay on the wider screens; the type and the spacing tighten so the row fits without scrolling. */
@media (max-width: 760px) {
    .weigh-long { display: none; }
    .weigh-short { display: inline; }

    .weigh-voucher .voucher-body { padding: 14px 12px; }
    .voucher-grid--weigh { grid-template-columns: minmax(0, 1fr) 46px 54px 54px 30px 20px; gap: 6px; }
    .voucher-grid--weigh > :nth-child(3), .weigh-voucher .weigh-when { display: none; }
    .weigh-voucher .voucher-grid-head { font-size: 9.5px; letter-spacing: .04em; }
    .weigh-voucher .voucher-line { padding: 8px 0; }
    .weigh-voucher .voucher-line-nm { font-size: 13.5px; }
    .weigh-voucher .voucher-line-qty, .weigh-voucher .weigh-slip { font-size: 12.5px; }
    .weigh-voucher .weigh-slip { overflow-wrap: anywhere; }
    .weigh-foot > .voucher-grid { padding: 7px 0; }
    .weigh-foot-k, .weigh-foot .is-grand .weigh-foot-k, .weigh-foot-v, .weigh-foot .is-grand .weigh-foot-v { font-size: 12.5px; }

    .sheet.weigh-sheet { padding: 20px 14px; }
    .weigh-head-sum { display: flex; align-items: center; gap: 6px; width: 100%; padding: 2px 0; border: 0; background: none; font: 600 13.5px var(--font); color: var(--ink); text-align: left; cursor: pointer; }
    .weigh-head-kind { font: 700 10px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-right: 2px; }
    .weigh-head-dot { color: var(--ink-4); }
    .weigh-head-chev { margin-left: auto; color: var(--ink-4); transition: transform .15s; }
    .weigh-head.is-open .weigh-head-chev { transform: rotate(180deg); }
    .weigh-head:not(.is-open) .weigh-head-body { display: none; }
    .weigh-head.is-open .weigh-head-body { margin-top: 14px; }
    .weigh-head-body .sheet-kind { display: none; }
    .sheet--compact.weigh-sheet .sheet-table { margin-top: 14px; }
    .weigh-sheet .sheet-table th:nth-child(2), .weigh-sheet .sheet-table th:nth-child(5),
    .weigh-sheet .sheet-table td:nth-child(2), .weigh-sheet .sheet-table td:nth-child(5), .weigh-sheet .weigh-by { display: none; }
    .weigh-sheet .sheet-table th { padding: 8px 4px; font-size: 9.5px; letter-spacing: .04em; }
    .sheet.weigh-sheet .sheet-table td, .sheet.weigh-sheet .sheet-table tfoot td { padding: 8px 4px; }
    .sheet.weigh-sheet .sheet-table tfoot tr:first-child td { padding-top: 10px; }
    .sheet.weigh-sheet .sheet-table :is(th, td):first-child { padding-left: 0; }
    .sheet.weigh-sheet .sheet-table :is(th, td):last-child { padding-right: 0; }
    .weigh-sheet .sheet-item { font-size: 13.5px; }
    .weigh-sheet .sheet-table td, .weigh-sheet .sheet-table td.num, .weigh-sheet .sheet-table tfoot td, .weigh-sheet .sheet-table tfoot td.num { font-size: 12.5px; }
    .weigh-sheet .sheet-table td.mono { overflow-wrap: anywhere; }
}
.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; }
/* A sheet page that uses the whole width of the page (the purchase order, made and viewed). */
.doc-view--full { max-width: none; }
.doc-view--full > .sheet { max-width: none; }
.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; }
/* the raised purchase invoice: its total row reads at the size of the rows above it, only bolder */
.sheet--invoice .sheet-table tfoot td.num { font-size: 13.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; }
/* the purchase invoice while it is written: the raised sheet with its open figures as fields */
.inv-sheet .sheet-table { min-width: 680px; }
.inv-sheet .sheet-table td { vertical-align: middle; }
.inv-sheet .sheet-table .input--sm { min-height: 34px; padding: 6px 9px; }
/* the total row reads at the size of the rows above it, only bolder */
.inv-sheet .sheet-table tfoot td, .inv-sheet .sheet-table tfoot td.num { font-size: 12.5px; }
.inv-sheet .sheet-table td { font-size: 12.5px; }
/* the price per KG reads like the figures beside it: same size and weight, only a dotted rule marks it as a field */
.inv-rate-in { width: 100%; min-width: 70px; border: 0; border-bottom: 1px dashed var(--line-2); border-radius: 0; background: transparent; padding: 2px 0; font: 600 12.5px var(--font); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; -moz-appearance: textfield; appearance: textfield; }
.inv-rate-in::-webkit-outer-spin-button, .inv-rate-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inv-rate-in:hover { border-bottom-color: var(--ink-4); }
.inv-rate-in:focus { outline: none; border-bottom: 1px solid var(--ac); }
.inv-rate-in::placeholder { color: var(--ink-4); font-weight: 500; }
.inv-rate-in.is-err { border-bottom-color: var(--red); }
/* the same field among the sheet's facts (date, kaat, commission): as wide as its figure, at the facts' size */
.inv-rate-in.inv-fact-in { min-width: 0; font-size: 13px; }
.inv-sheet .sheet-facts { gap: 12px; }
/* a date reads from the left of its box, even among the right-aligned facts */
.inv-sheet input[type=date] { text-align: left; }
/* the line between the summary's parts: the supplier, the broker, our expenses and the total of them all */
.inv-tot-sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0 10px; }
.inv-tot-sep + .sheet-tot.is-grand { margin-top: 0; padding-top: 9px; border-top: 0; }
/* totals lines that open a popup (the baardana price, an invoice expense) */
.inv-tot-click { border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: 6px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; width: calc(100% + 12px); }
.inv-tot-click:hover { background: var(--hover); }
.inv-tot-add { padding: 4px 0 6px; }
/* Add expense / Add our expense: plain text that opens the popup, not a button */
.inv-tot-link { border: 0; background: none; padding: 0; cursor: pointer; font: 600 13px var(--font); color: var(--ac); }
.inv-tot-link:hover { text-decoration: underline; }
.inv-sheet-scroll { overflow-x: auto; }
.inv-sheet-fact { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.sheet-meta-col .inv-sheet-fact { justify-content: flex-start; margin-top: 10px; font: 500 13px var(--font); color: var(--ink-2); }
@media (max-width: 720px) { .inv-sheet-fact { justify-content: flex-start; } }
/* the purchase order while it is written: the sheet's parties, facts and rows as ordinary bordered fields */
.po-pick { margin: 6px 0 0; width: min(320px, 100%); }
.po-pick + .sheet-party-line { margin-top: 6px; }
/* who the order is from reads as the lead name on the sheet */
.po-pick--lead .combo-trigger { font-weight: 700; font-size: 16px; }
/* the baardana and kaat terms under the total weight: the label on the left, its field on the right */
.sheet-tot.po-term { align-items: center; padding: 5px 0; cursor: text; }
.sheet-tot.po-term .input { width: 120px; flex: 0 0 120px; }
.po-sheet .sheet-meta-col .inv-sheet-fact { margin-top: 8px; }
.po-sheet .inv-sheet-fact .input { display: inline-block; }
.po-sheet .sheet-table td { vertical-align: middle; }
.po-sheet .sheet-table .input--sm { min-height: 36px; padding: 7px 9px; font-size: 13px; }
.po-sheet .sheet-table .combo--sm .combo-trigger { min-height: 36px; padding: 7px 9px; font-size: 13px; }
/* the shipment sheet: the bilty as a block of small fields, three to a row */
.ship-sheet .ship-bilty { margin-top: 12px; }
.ship-sheet .sheet-item + input + .sheet-item-sub, .ship-sheet .combo + .sheet-item-sub { margin-top: 4px; }
@media (max-width: 720px) { .ship-sheet .ship-bilty { grid-template-columns: minmax(0, 1fr); } }

@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; }
/* a printed step sheet (the gate pass): the bar only as wide as the sheet under it */
.report-bar--narrow { max-width: 820px; }
.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, .report-page > .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); } }

/* ============================================================ User profile
   A person's page: who they are and how to reach them, their one balance with the mill, and what to do next;
   the details beneath side by side, then the ledger at full width. */
.profile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: 22px 24px; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.profile-main { display: flex; align-items: center; gap: 18px; min-width: 0; }
.profile-id { min-width: 0; }
.profile-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.profile-code { font: 700 12.5px var(--font); color: var(--ink-3); }
.profile-contact { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font: 500 13px var(--font); color: var(--ink-2); }
.profile-contact > * { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); overflow-wrap: anywhere; }
.profile-contact svg { flex: none; color: var(--ink-4); }
.profile-contact a:hover { color: var(--ac); }
.profile-balance { text-align: right; padding-left: 28px; border-left: 1px solid var(--line-2); align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.profile-k { font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.profile-net { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; }
.profile-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.profile-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 16px; align-items: start; }
@media (max-width: 760px) {
    .profile { grid-template-columns: 1fr; padding: 18px 16px; }
    .profile-balance { text-align: left; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line-2); }
    .profile-net { align-items: flex-start; }
    .profile-actions { justify-content: flex-start; }
}

/* Shipment return: the step being worked on. A row of fields and the action; the varieties to pick from as tiles. */
.ret-step { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.ret-step > .field { flex: 1 1 220px; margin: 0; }
.ret-step > .btn { height: 44px; }
.ret-calc { display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel-2); }
.ret-calc-k { font: 700 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.ret-calc .mono { font: 700 16px var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.ret-calc-v.is-bad { color: var(--red); font-size: 13px; }
.ret-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.ret-pick-item { display: flex; flex-direction: column; gap: 2px; min-width: 170px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--panel); cursor: pointer; transition: border-color .12s, background .12s; }
.ret-pick-item:hover { border-color: var(--ac); }
.ret-pick-item input { position: absolute; opacity: 0; pointer-events: none; }
.ret-pick-item:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 25%, transparent); }
.ret-pick-item.is-on { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, var(--panel)); }
.ret-pick-name { font: 700 14px var(--font); color: var(--ink); }
.ret-pick-sub { font: 500 12.5px var(--font); color: var(--ink-3); }
.ret-pick.is-err .ret-pick-item { border-color: var(--red); }
.ret-finish { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); border-radius: var(--r); background: color-mix(in srgb, var(--green) 7%, var(--panel)); font: 500 13.5px var(--font); color: var(--ink-2); }

/* A searchable field picker that also takes a new name (Mill expense → Field). */
.head-pick { position: relative; }
.head-pick-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 280px; overflow-y: auto; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-md, 0 8px 24px rgba(0,0,0,.12)); }
.head-pick-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; font: 500 14px var(--font); color: var(--ink); cursor: pointer; }
.head-pick-item:hover, .head-pick-item.is-active { background: var(--hover); }
.head-pick-new { color: var(--ac); font-weight: 600; }
.head-pick-empty { padding: 9px 12px; font: 500 13px var(--font); color: var(--ink-4); }
/* A picture uploaded with a row (expenses list): a thumbnail beside the status, full size in a new tab. */
.row-file { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 4px; vertical-align: middle; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel-2); font: 700 9px var(--font); color: var(--ink-3); }
.row-file img { width: 100%; height: 100%; object-fit: cover; }
.row-file:hover { border-color: var(--ac); }

/* Documents & notes on a record (components/record-extras, record-files). Sized by the space it sits in (a sidebar,
   a popup, a full-width panel) through container queries, not by the window. */
.rx { container-type: inline-size; margin-top: 4px; min-width: 0; }
.rx-grid { display: grid; gap: 18px; }
.rx--compact .rx-grid { gap: 14px; }
/* Documents and notes side by side when the form is wide enough. */
@container (min-width: 720px) {
    .rx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .rx-grid--2 > .rx-block + .rx-block { border-left: 1px solid var(--line-2); padding-left: 28px; }
}
.rx-block { display: grid; gap: 8px; align-content: start; min-width: 0; }
.rx-head { display: flex; align-items: center; gap: 6px; }
.rx-title { font: 700 11.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rx-count { font: 700 11px var(--font); color: var(--ink-4); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 7px; line-height: 17px; }
.rx-list { display: grid; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.rx-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; min-width: 0; }
.rx-item + .rx-item { border-top: 1px solid var(--line-2); }
.rx-item:hover { background: var(--panel-2); }
.rx-item-text { flex: 1; min-width: 0; }
.rx-item-nm { display: block; font: 600 13px/1.35 var(--font); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rx-item-nm:hover { color: var(--ac); }
.rx-item-sub { font: 500 11.5px/1.35 var(--font); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-item-act { flex: none; opacity: .55; transition: opacity .12s; }
.rx-item:hover .rx-item-act, .rx-item-act:focus-visible { opacity: 1; }
.rx-thumb { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--ink-3); overflow: hidden; text-decoration: none; }
.rx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rx-ext { font: 700 9.5px var(--font); letter-spacing: .04em; }
.rx-note { align-items: flex-start; }
.rx-note-text { font: 500 13px/1.45 var(--font); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.rx-edit { display: grid; gap: 6px; margin-bottom: 4px; }
.rx-rows { display: grid; gap: 6px; }
/* A document row: title and file side by side, the remove button at the end; stacked when the space is narrow. */
.rx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.rx-row--note { grid-template-columns: minmax(0, 1fr) 30px; align-items: start; }
.rx-row .iconbtn { color: var(--ink-4); }
.rx-pick { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; height: 38px; padding: 0 10px 0 4px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--panel); cursor: pointer; transition: border-color .12s, background .12s; }
.rx-pick:hover, .rx-pick:focus-within { border-color: var(--ac); background: var(--ac-soft); }
.rx-pick.is-set { border-style: solid; }
.rx-pick-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rx-pick-btn { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 26px; padding: 0 9px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line-2); font: 600 12px var(--font); color: var(--ink-2); }
.rx-pick-name { min-width: 0; font: 500 12.5px var(--font); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-pick.is-set .rx-pick-name { color: var(--ink); }
.rx-textarea { min-height: 38px; padding-top: 8px; padding-bottom: 8px; resize: vertical; }
.rx-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 32px; }
.rx-add { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; font: 600 12.5px var(--font); color: var(--ac); cursor: pointer; }
.rx-add:hover { text-decoration: underline; }
.rx-hint { margin-top: -2px; font: 500 11.5px var(--font); color: var(--ink-4); }
@container (max-width: 460px) {
    .rx-row:not(.rx-row--note) { grid-template-columns: minmax(0, 1fr) 30px; }
    .rx-row:not(.rx-row--note) > .rx-pick { grid-column: 1 / 2; grid-row: 2; }
    .rx-row:not(.rx-row--note) + .rx-row { padding-top: 8px; border-top: 1px dashed var(--line-2); }
}
/* The show-page panel: documents and notes side by side when there is room, one under the other when not. */
.rx-panel { container-type: inline-size; }
.rx-panel-grid { display: grid; gap: 20px; }
.rx-panel .rx { margin-top: 0; }
@container (min-width: 720px) {
    .rx-panel--2 .rx-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .rx-panel--2 .rx-panel-grid > form + form { border-left: 1px solid var(--line-2); padding-left: 28px; }
}
@container (max-width: 719.98px) {
    .rx-panel--2 .rx-panel-grid > form + form { border-top: 1px solid var(--line-2); padding-top: 16px; }
}
@media print { .rx, .rx-panel { display: none; } }