/* MeiyiOrders workspace: preserve the brand, tighten hierarchy, keep data legible. */
:root {
  color-scheme: light;
  --brand: #ad272d;
  --brand-hover: #922126;
  --brand-soft: #fbefec;
  --brand-line: #e8c9c4;
  --ink: #2d2926;
  --muted: #68615b;
  --quiet: #74695f;
  --line: #e4dfd9;
  --line-strong: #cdc4bb;
  --paper: #fff;
  --surface: #faf8f5;
  --background: #f5f3ef;
  --nav: #302b28;
  --success: #326347;
  --success-soft: #eef5ef;
  --amber: #815d23;
  --amber-soft: #fff7e8;
  --danger: #a92c35;
  --danger-soft: #fff1ef;
  --radius: 12px;
  --radius-small: 8px;
  --shadow: 0 8px 24px #34231b12;
  --shadow-dialog: 0 24px 80px #251d1838;
  --focus: #ad272d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--ink); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: var(--brand); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
button:disabled { cursor: not-allowed; opacity: .5; }
input:disabled, select:disabled, textarea:disabled { color: var(--muted); background: var(--background); cursor: not-allowed; }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-size: 30px; font-weight: 650; line-height: 1.3; letter-spacing: -.7px; margin-bottom: 8px; text-wrap: balance; }
h2 { font-size: 20px; font-weight: 650; line-height: 1.4; margin-bottom: 14px; letter-spacing: -.3px; text-wrap: balance; }
h3 { font-size: 16px; font-weight: 650; line-height: 1.5; margin-bottom: 12px; }
p { margin-bottom: 14px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.eyebrow { font-size: 12px; letter-spacing: .3px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.primary, .secondary, .quiet, .button-link {
  border: 1px solid transparent; border-radius: var(--radius-small); min-height: 44px; padding: 10px 17px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}
.primary { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 2px 3px #7020200d; }
.primary:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); }
.secondary, .button-link { background: var(--paper); border-color: var(--line-strong); color: var(--ink); }
.secondary:hover:not(:disabled), .button-link:hover { background: var(--surface); border-color: #b8aba1; text-decoration: none; }
.quiet { background: transparent; color: var(--muted); }
.quiet:hover:not(:disabled) { background: #eee9e3; color: var(--ink); }
button:not(:disabled):active, .button-link:active { transform: translateY(1px); }
.compact { padding: 7px 11px; font-size: 12px; min-height: 38px; }
.full { width: 100%; }
button[data-busy="true"]::after { content: ""; width: 12px; height: 12px; flex-shrink: 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.pill { font-size: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 5px; background: var(--success-soft); color: var(--success); font-weight: 600; white-space: nowrap; }
.pill.pending { background: var(--amber-soft); color: var(--amber); }
.pill.neutral { background: #f0eeeb; color: #65605b; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
input, select, textarea { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); border-radius: var(--radius-small); padding: 10px 12px; min-height: 44px; width: 100%; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: #b9ada3; }
input::placeholder, textarea::placeholder { color: #786d63; opacity: 1; }
textarea { resize: vertical; min-height: 100px; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
input[type=date] { min-width: 140px; }
input[type=date], input[inputmode=decimal], .number { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 50; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.skip-link:focus { top: 12px; }
.brand-mark { display: block; object-fit: contain; border-radius: 0; flex-shrink: 0; }
.brand-mark.large { width: 52px; height: auto; margin-bottom: 24px; }

/* Calm brand entry. Decorative artwork stays outside all input surfaces. */
.login-panel { min-height: 100dvh; display: grid; place-items: center; padding: 40px 24px; background: var(--background); }
.login-layout { display: grid; grid-template-columns: 1.05fr 1fr; width: min(1040px, 100%); min-height: 550px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: 0 18px 60px #34231b0a; }
.login-brand-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px; background: #f1eae2; }
.login-pattern { position: absolute; inset: auto -170px -150px auto; width: 560px; height: 560px; opacity: .09; pointer-events: none; z-index: -1; }
.login-pattern img, img.login-pattern { object-fit: contain; }
.login-brand-copy { position: relative; max-width: 330px; }
.login-brand-name { display: flex; align-items: center; gap: 16px; font-size: 18px; font-weight: 650; line-height: 1.5; }
.login-brand-name small { display: block; margin-top: 4px; color: #786b60; font-size: 12px; font-weight: 500; letter-spacing: .25px; }
.login-brand-title, .login-brand-copy h2 { font-size: clamp(28px, 3.2vw, 36px); line-height: 1.45; font-weight: 650; letter-spacing: -.7px; margin: 36px 0 16px; }
.login-brand-copy p { font-size: 14px; line-height: 1.8; max-width: 30ch; text-wrap: pretty; }
.login-brand-copy .eyebrow { font-size: 10px; color: #786b60; }
.login-brand-note { color: #716153; }
.login-brand-footer { position: relative; font-size: 12px; color: #716153; margin: 24px 0 0; }
.login-card { background: var(--paper); padding: 52px 44px; max-width: 490px; width: 100%; align-self: center; }
.login-card h1 { font-size: 28px; margin-bottom: 12px; }
.login-card > .muted { font-size: 14px; line-height: 1.75; margin-bottom: 22px; }
.login-card form input { margin-bottom: 18px; }
.login-card form button { margin-top: 8px; }
.login-card > .full { margin-top: 12px; }
#demo-description { margin-top: 16px; line-height: 1.8; }
.notice { border: 1px solid #ead9b8; background: var(--amber-soft); color: var(--amber); border-radius: var(--radius-small); padding: 12px 14px; font-size: 13px; line-height: 1.7; }
.notice.error { background: var(--danger-soft); color: var(--danger); border-color: #edc9c6; }
.notice p:last-child { margin-bottom: 0; }
.notice ul { padding-left: 20px; margin-bottom: 0; }
.file-reading-notes { margin: 16px 0; }
.file-reading-details { margin: 12px 0; }
.file-reading-details summary { color: var(--muted); font-size: 12px; cursor: pointer; padding: 6px 0; }
.file-reading-details summary:hover { color: var(--brand); }
.file-reading-details .notice { margin-top: 10px; }

/* Workspace shell: stable navigation and a neutral reading surface. */
.app-header { height: 70px; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 24px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 650; line-height: 1.2; color: var(--ink); flex-shrink: 0; width: 192px; }
.brand:hover { text-decoration: none; }
.brand small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .25px; margin-top: 5px; }
.header-caption { font-size: 12px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 24px; }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.user-name { font-size: 12px; padding-left: 16px; border-left: 1px solid var(--line); }
.connection { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.connection::before, .demo-dot { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #60906e; }
.offline .connection::before { background: #b68a3e; }
.mode-banner, .network-notice { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 5px 16px; font-size: 12px; background: #eeeae4; color: #665c53; }
.network-notice { background: var(--amber-soft); color: var(--amber); font-size: 12px; }
.workspace { display: grid; grid-template-columns: 216px minmax(0,1fr); min-height: calc(100dvh - 100px); }
.main-nav { padding: 24px 14px; background: var(--nav); color: #d9d0c9; display: flex; flex-direction: column; }
.nav-label { margin: 0 14px 18px; color: #d6c9be; font-size: 12px; }
.nav-label span { display: block; color: #a99a8f; font-size: 9px; letter-spacing: 1.6px; margin-top: 3px; }
.nav-button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 14px; min-height: 46px; color: #ded6cf; background: transparent; border: 1px solid transparent; border-radius: var(--radius-small); text-align: left; font-size: 13px; font-weight: 500; margin-bottom: 6px; white-space: nowrap; transition: background .16s ease, color .16s ease, transform .16s ease; }
.nav-button svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-button:hover { background: #403832; color: #fff; }
.nav-button.active { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.main-nav .nav-button:focus-visible { outline-color: #f0b7b1; }
.nav-arrow { margin-left: auto; opacity: .65; font-size: 17px; }
.nav-note { margin: auto 14px 0; padding-top: 64px; }
.nav-note-mark { display: block; width: 44px; height: auto; color: #b48b75; }
.nav-note-logo { display: block; width: 44px; height: auto; object-fit: contain; }
.nav-note p { margin: 12px 0; font-size: 12px; line-height: 1.8; color: #c5b7ac; }
.nav-note > span:last-child { font-size: 9px; color: #a99a8f; letter-spacing: 1.4px; }
.header-new-record { flex-shrink: 0; margin-left: auto; font-size: 12px; }
.header-new-record + .header-actions { margin-left: 0; }
main { padding: 28px 32px 52px; min-width: 0; max-width: 1520px; width: 100%; margin: 0 auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.page-heading > div { min-width: 0; }
.page-heading p:last-child, .page-heading-description { margin-bottom: 0; font-size: 13px; line-height: 1.7; max-width: 65ch; text-wrap: pretty; }
.heading-period { color: var(--brand); }
.page-index { align-self: flex-start; margin-top: 10px; font-size: 10px; color: var(--quiet); letter-spacing: 1.2px; white-space: nowrap; }

/* Upload states use the same visual grammar as voucher uploads. */
.dropzone { position: relative; border: 1px dashed var(--line-strong); border-radius: var(--radius); transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.sales-dropzone { display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: var(--brand-soft); border-color: var(--brand-line); border-style: solid; margin-bottom: 24px; }
.upload-art { width: 48px; flex-shrink: 0; }
.upload-art svg { width: 48px; height: 58px; fill: #fffaf7; stroke: #bc8e82; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.upload-art circle { fill: var(--brand); stroke: var(--brand); }
.upload-art svg path:last-child { stroke: #fff; }
.upload-copy { flex: 1; min-width: 0; }
.upload-copy .eyebrow { font-size: 9px; letter-spacing: 1.4px; color: #816154; margin-bottom: 7px; }
.upload-copy h2 { font-size: 17px; font-weight: 600; margin-bottom: 5px; }
.upload-status { color: #6f5f54; font-size: 13px; margin: 0; overflow-wrap: anywhere; }
.upload-action { padding: 11px 19px; flex-shrink: 0; }
.dropzone[data-upload="dragging"] { background: #f8e3df; border-color: var(--brand); border-style: dashed; box-shadow: 0 0 0 4px #ad272d0b; }
.dropzone[data-upload="busy"] { border-style: dashed; border-color: #bd847e; }
.dropzone[data-upload="offline"] { background: #f1efec; border-color: var(--line-strong); }
.overview { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.list-title { display: flex; align-items: center; gap: 9px; }
.list-title h2 { font-size: 17px; margin: 0; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #675a51; background: #ece6df; min-width: 25px; padding: 1px 7px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.page-items { font-size: 12px; }
.page-items strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.overview-note { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.toolbar { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line); padding: 12px; border-radius: var(--radius) var(--radius) 0 0; margin: 0 0 -1px; }
.search-field { flex: 1; position: relative; min-width: 0; }
.search-field svg { position: absolute; left: 13px; top: 13px; width: 18px; height: 18px; fill: none; stroke: #92877c; stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.search-field input { padding-left: 40px; background: var(--surface); border-color: var(--line); }
.toolbar select { min-width: 160px; font-size: 13px; }
.toolbar > .secondary { min-width: 64px; }
.toolbar > .quiet { padding: 10px 12px; font-size: 12px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.inline-form, .report-form { display: flex; align-items: flex-end; gap: 18px; }
.inline-form > div:first-child { flex: 1; }
.inline-form > div:nth-child(2) { width: 185px; }
.report-form > div { flex: 1; min-width: 0; }
.report-form .supplier-field { flex: 1.4; }
.report-note, .report-source-note { margin: 0 0 20px; font-size: 12px; line-height: 1.7; max-width: 75ch; }
.table-container { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; }
.orders-table { border-radius: 0 0 var(--radius) var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
th { font-size: 12px; letter-spacing: .1px; color: #625a53; background: var(--surface); font-weight: 600; white-space: nowrap; }
th, td { padding: 12px 16px; border-bottom: 1px solid #eee9e3; vertical-align: middle; }
th { padding-top: 10px; padding-bottom: 10px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fdfaf7; }
.number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .1px; }
.orders-table td.number { font-size: 13px; font-weight: 600; }
.order-link { border: 0; background: transparent; color: var(--brand); font-weight: 650; text-align: left; min-height: 34px; padding: 3px 0; overflow-wrap: anywhere; line-height: 1.4; }
.order-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.secondary-text { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.order-cards { display: none; }
.empty-state { padding: 32px 24px; text-align: center; border: 1px dashed var(--line-strong); background: var(--surface); border-radius: var(--radius); color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); margin-bottom: 7px; font-size: 16px; font-weight: 600; }
.empty-state p { margin-bottom: 0; font-size: 13px; line-height: 1.7; }
#orders-content > .empty-state, #orders-content > .loading { border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); background: var(--paper); }
.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 16px; }
.pagination p { margin: 0; font-size: 12px; }
.pagination > div { display: flex; gap: 6px; }
.pagination .compact { background: transparent; font-size: 12px; min-height: 36px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 14px; }
.section-heading h2 { margin: 0; font-size: 18px; }
.report-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; }
.report-summary p { margin-bottom: 6px; }
.report-summary strong { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.6px; }
.report-summary > div { min-width: 0; max-width: 100%; }
.report-summary .report-label, .report-summary .muted { font-size: 13px; color: var(--muted); }
.report-summary .button-link { margin-left: 10px; }

/* One dialog language, with headers kept visible and scroll contained. */
dialog { color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-dialog); padding: 24px; width: min(1040px, calc(100% - 40px)); max-height: 92svh; overflow-y: auto; overscroll-behavior: contain; }
dialog::backdrop { background: #211b1766; backdrop-filter: blur(4px); }
.order-dialog { --detail-header-height: 76px; width: min(1130px, calc(100% - 48px)); background: var(--background); padding: 0; scroll-padding-top: calc(var(--detail-header-height) + var(--detail-nav-height, 56px) + 12px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 20px; }
.dialog-heading > div, .dialog-heading-content { min-width: 0; }
.dialog-heading h2 { margin-bottom: 0; overflow-wrap: anywhere; }
.dialog-heading .eyebrow { margin-bottom: 5px; font-size: 9px; }
.order-dialog > .dialog-heading { position: sticky; top: 0; z-index: 4; min-height: 76px; padding: 16px 24px; margin: 0; background: var(--paper); }
.order-dialog > .dialog-heading > div { min-width: 0; }
.order-dialog > .dialog-heading h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 22px; letter-spacing: -.5px; }
.close-dialog { flex-shrink: 0; }
.order-content { padding: 0 24px 24px; }
.detail-nav { display: flex; align-items: center; gap: 5px; position: sticky; top: var(--detail-header-height); z-index: 3; margin: 0 -24px 20px; padding: 10px 24px; background: var(--background); border-bottom: 1px solid var(--line); overflow-x: auto; }
.detail-nav a { padding: 7px 12px; font-size: 12px; color: var(--muted); border-radius: 6px; white-space: nowrap; }
.detail-nav a:hover { color: var(--brand); background: var(--brand-soft); text-decoration: none; }
.detail-section { margin: 20px 0; scroll-margin-top: 0; }
.detail-panel { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.detail-panel > h3, .detail-section-heading { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); margin-bottom: 18px; padding-bottom: 12px; font-size: 16px; }
.section-index { font-size: 10px; color: var(--quiet); letter-spacing: 1px; font-weight: 500; }
.detail-section .table-container { border-radius: var(--radius-small); }
.detail-section th, .detail-section td { padding: 12px 14px; }
.detail-subheading { margin: 22px 0 12px; font-size: 14px; font-weight: 600; }
.money-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.money-grid > div { background: var(--surface); border: 0; border-radius: var(--radius-small); padding: 16px; min-width: 0; }
.money-grid > div:last-child { background: var(--brand-soft); }
.money-grid strong { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 7px; letter-spacing: -.4px; }
.money-grid .small { font-size: 12px; }
.detail-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 17px; }
.detail-form .wide { grid-column: 1/-1; }
.detail-form button { justify-self: start; }
.detail-columns { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 26px; }
.shipment-box { background: var(--surface); border: 0; border-radius: var(--radius-small); padding: 18px; }
.shipment-box > h4 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.shipment-box > p { font-size: 12px; }
.status-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.status-line > strong { font-weight: 600; font-size: 15px; margin-right: 3px; }
.order-context { display: flex; gap: 8px 20px; font-size: 12px; color: var(--muted); margin-top: 10px; flex-wrap: wrap; }
/* Three quiet progress facts; employee declarations live with procurement. */
.order-tracking { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin: -3px 0 14px; }
.order-progress-item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.progress-label { font-size: 12px; color: var(--muted); }
.pill.state-neutral { color: #5E5953; background: #F0EEEB; }
.pill.state-blue { color: #285782; background: #EAF2FA; }
.pill.state-amber { color: #80531A; background: #FFF1D8; }
.pill.state-teal { color: #1B6666; background: #E5F4F1; }
.pill.state-green { color: #2D6244; background: #E8F4E9; }
.pill.state-violet { color: #624986; background: #F1EBF8; }
.pill.state-red { color: #9A3543; background: #FBECEE; }
.order-support-control { margin: 0 0 18px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.order-support-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; cursor: pointer; color: var(--muted); font-size: 12px; width: fit-content; }
.order-support-summary > span:first-child { color: var(--brand); font-weight: 600; margin-right: 4px; }
.order-support-summary::before { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); margin-right: 4px; }
.order-support-control[open] > summary::before { transform: rotate(45deg); }
.tracking-controls { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-start; margin-top: 12px; }
.cost-review-control { min-width: 0; flex: 1 1 300px; }
.cost-review-control > summary { cursor: pointer; width: fit-content; padding: 6px 0; color: var(--brand); font-size: 13px; font-weight: 600; text-underline-offset: 3px; }
.cost-review-control > summary:hover { text-decoration: underline; }
.cost-review-form { margin-top: 12px; }
.cost-review-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 16px; margin: 0 0 14px; font-size: 13px; }
.cost-review-facts dt { color: var(--muted); }
.cost-review-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cost-review-declaration { align-items: flex-start; margin-bottom: 14px; font-size: 13px; }
.cost-review-declaration input { margin-top: 3px; flex-shrink: 0; }
.tracking-issues { padding-left: 20px; font-size: 13px; color: var(--amber); margin: 0 0 14px; }
.archive-control { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; }
.tracking-write-result { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; }
.tracking-write-result:empty { display: none; }
.tracking-write-result p { margin: 0; }
.tracking-write-result button { margin-top: 10px; }
.activity-list [data-activity-action="cost_review_confirm"]::before { background: var(--success); }
.activity-list [data-activity-action="cost_review_invalidated"]::before { background: var(--amber); }
.activity-list [data-activity-action="order_archive"]::before, .activity-list [data-activity-action="order_unarchive"]::before { background: var(--muted); }
@media (max-width: 760px) {
  .order-tracking { gap: 8px 16px; }
  .order-progress-item { gap: 5px; }
  .order-support-summary { min-height: 44px; font-size: 14px; }
  .tracking-controls { gap: 14px; }
  .cost-review-control { flex-basis: 100%; }
  .cost-review-control > summary { min-height: 44px; padding-block: 11px; font-size: 14px; }
  .cost-review-facts, .cost-review-declaration { font-size: 14px; }
  .archive-control { justify-content: flex-start; width: 100%; }
  .tracking-controls button { min-height: 44px; font-size: 14px; }
}
.shipment-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.shipment-form > div { flex: 1 0 100%; }
.shipment-form > button { width: 100%; }
.file-list { list-style: none; padding: 0; margin: 0; }
.file-list li { padding: 13px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.file-list li:last-child { border: 0; }
.file-list a { overflow-wrap: anywhere; font-size: 13px; }
.file-list .file-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.file-preview-name { min-width: 0; max-width: 100%; border: 0; padding: 6px 0; background: transparent; color: var(--brand); text-align: left; font-size: 13px; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.file-preview-name:hover { color: var(--brand-hover); }
.file-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 12px; }
.file-actions .button-link { font-size: 12px; white-space: nowrap; }
.acceptance-tools { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; margin: -8px 0 16px; font-size: 12px; }
.acceptance-tools a { padding: 8px 0; }
.acceptance-tools span { color: var(--muted); }
.file-list .file-info::before { content: "XLS"; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: #7a5c47; border: 1px solid #e5dacf; border-radius: 4px; background: #faf5ef; width: 30px; height: 34px; flex-shrink: 0; }
.purchase-dropzone { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--surface); padding: 16px 18px; margin: 18px 0 20px; }
.purchase-dropzone h4 { font-size: 14px; margin: 0 0 5px; font-weight: 600; }
.purchase-upload { margin: 0; font-size: 12px; }
.purchase-card { background: var(--surface); border: 0; border-radius: var(--radius-small); padding: 18px; margin-bottom: 14px; }
.purchase-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 15px; }
.purchase-heading h3, .purchase-heading h4 { margin: 0 0 5px; font-size: 14px; font-weight: 600; }
.purchase-identity { min-width: 0; overflow-wrap: anywhere; }
.purchase-heading > strong { max-width: 100%; overflow-x: auto; white-space: nowrap; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.purchase-card .file-list, .purchase-card .table-container { margin-top: 12px; }
.timeline { list-style: none; padding: 0; margin: 18px 0 0; }
.timeline li { position: relative; padding: 0 0 18px 22px; border-left: 1px solid var(--line); margin-left: 5px; }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -4px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #aa9c8e; box-shadow: 0 0 0 4px #f4efe9; }
.timeline p { margin: 0 0 3px; font-size: 13px; }
.timeline-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.timeline-note { color: var(--muted); font-size: 12px; margin-top: 5px; }
.activity-list { max-height: 330px; overflow-y: auto; padding: 4px 8px 4px 0; }
.cash-placeholder { display: flex; align-items: center; gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); padding: 24px; }
.cash-placeholder .placeholder-mark { color: #aa9b8c; font-size: 26px; }
.cash-placeholder h4 { margin: 0 0 7px; font-size: 14px; font-weight: 600; }
.cash-placeholder p { margin: 0; font-size: 12px; color: var(--muted); }
.cash-placeholder .pill { margin-left: auto; }
.partial-details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); padding: 18px; margin: 18px 0; }
.partial-details p { font-size: 12px; margin-bottom: 8px; }
.issue-list { padding-left: 22px; font-size: 13px; }
.issue-list li { margin: 10px 0; }
.toast { position: fixed; right: 24px; top: 18px; z-index: 100; background: var(--nav); color: white; border: 1px solid #ffffff21; border-radius: var(--radius-small); max-width: min(500px, calc(100% - 32px)); padding: 14px 18px; box-shadow: var(--shadow); white-space: pre-line; overflow-wrap: anywhere; font-size: 12px; }
.toast.error { background: var(--danger); }
.loading { padding: 32px 24px; color: var(--muted); text-align: center; font-size: 13px; }
.loading::before { content: ""; display: inline-block; width: 13px; height: 13px; border: 2px solid var(--brand-line); border-right-color: var(--brand); border-radius: 50%; margin-right: 10px; vertical-align: -2px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Views and filters share controls; the fixed view remains visibly locked. */
.view-bar { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; position: relative; z-index: 6; }
.view-selector { display: flex; gap: 10px; align-items: center; margin-right: auto; flex-wrap: wrap; min-width: 0; }
.view-selector select { min-width: 180px; background: var(--paper); border-color: var(--line-strong); font-size: 13px; font-weight: 600; }
.view-personal { color: var(--muted); font-size: 12px; white-space: nowrap; }
.column-picker > summary, .view-save > summary, .advanced-filters > summary { cursor: pointer; color: var(--muted); font-size: 12px; list-style: none; padding: 9px 12px; border-radius: 6px; }
.column-picker > summary:hover, .view-save > summary:hover, .advanced-filters > summary:hover { background: #eee9e3; color: var(--ink); }
.column-picker > summary::after, .view-save > summary::after, .advanced-filters > summary::after { content: '⌄'; margin-left: 8px; }
.column-picker[open] > summary::after, .view-save[open] > summary::after, .advanced-filters[open] > summary::after { content: '⌃'; }
.column-picker summary span { color: #61584f; background: #ece6df; padding: 1px 6px; margin-left: 5px; font-size: 12px; border-radius: 4px; }
.column-popover, #view-form { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.column-popover { max-height: min(65svh, 620px); overflow-y: auto; }
.column-option { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3px 8px; min-height: 42px; padding: 5px 0; border-bottom: 1px solid #eee9e3; }
.column-source { grid-column: 1/-1; min-width: 0; font-size: 12px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.column-option:last-child { border: 0; }
.checkbox-line { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; font-weight: 500; line-height: 1.7; margin: 0; }
.checkbox-line input { width: 16px; height: 16px; min-height: 0; margin: 3px 0 0; padding: 0; flex-shrink: 0; accent-color: var(--brand); }
.column-option .checkbox-line { align-items: center; }
.column-moves { display: flex; }
.column-moves .compact { padding: 3px 7px; min-height: 30px; }
.view-save-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 15px 0; }
#view-status { margin: 12px 0 0; font-size: 12px; line-height: 1.7; }
#order-search { flex-wrap: wrap; }
.advanced-filters { flex: 1 0 100%; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 6px; }
.advanced-filters > summary { width: fit-content; padding-left: 6px; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; padding: 14px 4px 8px; }
.filter-grid label { font-size: 12px; margin-bottom: 5px; color: var(--muted); }
.filter-grid input, .filter-grid select { font-size: 13px; min-width: 0; padding: 10px; }
.filter-actions { display: flex; gap: 12px; justify-content: flex-end; align-items: center; margin: 10px 4px 4px; }
.filter-actions > span { margin-right: auto; font-size: 12px; }
#order-filter-state { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 12px; padding: 12px; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
#order-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.order-filter-chip { max-width: 100%; padding: 6px 9px; border-radius: 6px; color: #61584f; background: #eee8e0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
#clear-active-order-filters { min-height: 44px; margin: 0; white-space: normal; }
.orders-table table { min-width: 960px; }
.orders-table .row-actions { position: sticky; right: 0; background: var(--paper); border-left: 1px solid var(--line); box-shadow: -5px 0 10px #34231b04; }
.orders-table th.row-actions { background: var(--surface); }
.orders-table .record-add { font-size: 12px; min-height: 34px; padding: 6px 10px; border-color: var(--line); background: var(--surface); }
.card-preview { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); font-size: 12px; gap: 6px 12px; margin: 15px 0; }
.card-preview dt { color: var(--muted); }
.card-preview dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* Records: compact rows, explicit amounts and six stable semantic colors. */
.records-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; border-bottom: 1px solid var(--line); padding: 0 0 16px; margin-bottom: 20px; }
.records-intro > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.records-intro-mark { font-size: 22px; font-weight: 400; color: var(--muted); }
.records-intro p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink); }
.records-intro p span { font-size: 12px; color: var(--muted); }
.records-intro > .small { font-size: 12px; color: var(--muted); }
.records-toolbar { flex-wrap: wrap; align-items: flex-end; border-radius: var(--radius); margin-bottom: 18px; }
.records-toolbar > .search-field { min-width: 190px; }
.records-toolbar > .record-filter-date { flex: 0 1 154px; min-width: 154px; }
.record-filter-date label { font-size: 12px; margin-bottom: 6px; color: var(--muted); }
.records-toolbar input[type=date] { font-size: 13px; }
.records-toolbar select { min-width: 140px; }
.records-toolbar .search-field input { padding-left: 14px; }
.record-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.record-card, .compact-records .record-card { display: block; padding: 11px 18px 10px; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.record-card:last-child { border-bottom: 0; }
.record-card:hover { background: #fdfbf8; }
.record-card.is-void { background: var(--surface); }
.record-card.is-void .record-money { text-decoration: line-through; color: var(--quiet); }
.record-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 3px 0 0; }
.record-date { font-size: 12px; color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; }
.record-card .pill { font-size: 12px; padding: 1px 6px; }
.record-card-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.record-row-identity { display: grid; gap: 0; min-width: 0; }
.record-row-context { display: grid; gap: 2px; min-width: 0; }
.record-title-button, .compact-records .record-title-button { border: 0; background: transparent; color: var(--ink); text-align: left; padding: 0; min-height: 26px; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.record-title-button:hover { color: var(--brand); }
.record-money, .compact-records .record-money { font-weight: 600; font-size: 19px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.record-money.income { color: var(--success); }
.record-money.expense { color: #875342; }
.record-amount-summary { display: grid; justify-items: end; gap: 4px; text-align: right; min-width: 0; max-width: 100%; }
.record-amount-summary .record-money { max-width: 100%; overflow-x: auto; }
.record-amount-summary .small { font-size: 12px; white-space: normal; }
.record-captions { display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 0; }
.record-captions > span { overflow-wrap: anywhere; }
.record-note { color: var(--muted); font-size: 12px; margin: 5px 0 7px; white-space: pre-line; overflow-wrap: anywhere; }
.record-alert { color: var(--amber); font-size: 12px; margin: 5px 0 8px; }
.record-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 7px; }
.record-card-footer .small { font-size: 12px; }
.record-actions { display: flex; gap: 4px; flex-shrink: 0; }
.record-actions .compact { min-height: 34px; font-size: 12px; padding: 4px 8px; }
[data-record-category=order_followup] { --category-bg: #eaf3fc; --category-text: #264f73; --category-edge: #6697bf; }
[data-record-category=sales_shipment] { --category-bg: #fff4d5; --category-text: #775419; --category-edge: #ba963d; }
[data-record-category=purchase_receipt] { --category-bg: #f0ebfa; --category-text: #584776; --category-edge: #9780b9; }
[data-record-category=financial_payment] { --category-bg: #fce8e1; --category-text: #8b4234; --category-edge: #c8755e; }
[data-record-category=financial_receipt] { --category-bg: #eaf5e9; --category-text: #3c6440; --category-edge: #77a57b; }
[data-record-category=administrative] { --category-bg: #efefed; --category-text: #565954; --category-edge: #989b94; }
.record-category-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 24px; }
.record-category-button { position: relative; min-width: 0; min-height: 49px; padding: 11px 12px; border: 1px solid transparent; border-radius: var(--radius-small); background: var(--category-bg); color: var(--category-text); font-size: 13px; font-weight: 500; text-align: center; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.record-category-button:hover { border-color: var(--category-edge); }
.record-category-button[aria-checked=true] { border: 2px solid var(--category-edge); box-shadow: 0 0 0 1px var(--category-edge); font-weight: 650; padding: 10px 11px; }
.record-category-button[aria-checked=true]::after { content: '✓'; margin-left: 7px; font-weight: 700; }
.record-category-label { background: var(--category-bg); color: var(--category-text); border: 1px solid var(--category-edge); }
.timeline li[data-record-category]::before { background: var(--category-edge); box-shadow: 0 0 0 4px var(--category-bg); }
.timeline li:not([data-record-category])[data-activity-action=file_import]::before { background: #6697bf; box-shadow: 0 0 0 4px #eaf3fc; }
.timeline li:not([data-record-category])[data-activity-action=file_revision]::before { background: #ba963d; box-shadow: 0 0 0 4px #fff4d5; }
.timeline li:not([data-record-category])[data-activity-action=order_edit]::before { background: #989b94; box-shadow: 0 0 0 4px #efefed; }
.timeline li:not([data-record-category])[data-activity-action=shipment_complete]::before { background: #77a57b; box-shadow: 0 0 0 4px #eaf5e9; }

/* Record editor reuses the global inputs, buttons, surfaces and status tokens. */
.record-dialog { width: min(900px, calc(100% - 40px)); padding: 0; background: var(--paper); }
.record-dialog > .dialog-heading { position: sticky; top: 0; z-index: 3; padding: 16px 24px; margin: 0; background: var(--paper); }
.record-dialog > .dialog-heading h2 { font-size: 22px; }
#record-detail { padding: 22px 24px 24px; }
.record-form-intro { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.record-form-intro p { margin: 0; font-size: 12px; color: var(--muted); }
.record-form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.record-field { min-width: 0; }
.record-field.wide { grid-column: 1/-1; }
.record-field label { font-size: 13px; color: #554d48; }
.record-field input, .record-field select, .record-field textarea { font-size: 14px; min-height: 44px; }
.record-field textarea { min-height: 80px; }
.record-form-basics { display: grid; gap: 16px; margin-bottom: 18px; }
.record-form-basics > .record-field:last-child { max-width: 245px; }
.record-form[data-record-kind=event] .record-form-basics:not(.record-payment-basics) { grid-template-columns: minmax(155px, 225px) minmax(0, 1fr); gap: 16px; }
.record-form[data-record-kind=event] .record-form-basics:not(.record-payment-basics) > .record-field:first-child { grid-column: 1/-1; }
.record-form[data-record-kind=event] .record-form-basics:not(.record-payment-basics) > .record-field { max-width: none; }
.record-form[data-record-kind=cash] .record-form-basics:not(.record-payment-basics) > .record-field:has(input[type=date]) { max-width: 245px; }
.record-type-hint { background: #f1ece6; border: 1px solid var(--line); padding: 13px 15px; border-radius: var(--radius-small); font-size: 12px; line-height: 1.75; color: var(--muted); margin: 18px 0; }
.finance-calculation summary, .record-void summary, .record-special summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.record-special { margin: 12px 0 18px; }
.record-special summary { padding: 7px 0; }
.record-special-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 9px; }
.record-special-actions button { font-size: 12px; white-space: normal; }
.record-subtype-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 19px; }
.record-subtype-button { min-height: 41px; padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-small); background: var(--paper); color: #56514c; font-size: 13px; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.record-subtype-button:hover { background: #f4f1ee; border-color: #b8aba0; }
.record-subtype-button[aria-pressed=true] { border-color: #807365; background: #eeebe6; color: var(--ink); box-shadow: inset 0 0 0 1px #807365; font-weight: 650; }
.record-subtype-button[aria-pressed=true]::after { content: '✓'; margin-left: 7px; }
.record-money-fields { padding: 0; background: transparent; border: 0; margin-bottom: 22px; }
.record-money-fields > .checkbox-line { margin: 17px 0; }
.record-money-fields > .record-form-grid { margin-bottom: 16px; }
.record-party-advanced { padding: 0 0 13px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.record-party-advanced > summary, .record-own-voucher > summary, .record-movement > summary { padding: 8px 0; cursor: pointer; color: var(--muted); font-size: 12px; }
.record-party-advanced[open] > .record-field, .record-own-voucher[open] > .record-field { margin-top: 10px; }
.record-business-party { margin: 0 0 5px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.record-original-context { grid-column: 1/-1; font-size: 12px; line-height: 1.7; margin: 0; padding: 12px 14px; color: var(--amber); background: var(--amber-soft); border-radius: var(--radius-small); }
.record-picker { position: relative; }
.record-picker input[type=search] { width: 100%; min-width: 0; padding-right: 28px; }
.record-picker-status { display: block; font-size: 12px; line-height: 1.6; color: var(--muted); padding-top: 5px; overflow-wrap: anywhere; }
.record-purchase-guidance { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius-small); color: var(--amber); background: var(--amber-soft); line-height: 1.7; overflow-wrap: anywhere; }
.record-picker-options { position: absolute; top: 48px; left: 0; right: 0; z-index: 6; max-height: 250px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-small); padding: 5px; background: var(--paper); box-shadow: var(--shadow); }
.record-picker-options > p { padding: 12px; margin-bottom: 0; }
.record-picker-option { display: block; width: 100%; text-align: left; border: 0; border-radius: 5px; background: var(--paper); color: var(--ink); padding: 11px 10px; min-height: 42px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
.record-picker-option:hover, .record-picker-option.is-active, .record-picker-option[aria-selected=true] { background: var(--brand-soft); color: var(--brand); }
.allocation-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 14px; border-top: 1px solid var(--line); padding-top: 16px; }
.allocation-heading h3 { font-size: 14px; margin: 0; }
.allocation-heading > span { font-size: 12px; }
.allocation-rows { display: grid; gap: 14px; margin-bottom: 16px; }
.allocation-row { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,.8fr) auto; align-items: start; gap: 10px; }
.allocation-row.simple-allocation { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.allocation-row input, .allocation-row select { font-size: 14px; padding: 10px; }
.allocation-row label { font-size: 12px; }
.allocation-row > button { padding: 8px; font-size: 12px; align-self: center; }
.allocation-preview { font-size: 13px; color: var(--muted); background: var(--surface); padding: 11px 13px; border-radius: var(--radius-small); margin: 14px 0 0; font-variant-numeric: tabular-nums; }
.allocation-preview.overallocated { color: var(--danger); background: var(--danger-soft); }
.record-money-fields > .adjustment-confirm { color: var(--amber); background: var(--amber-soft); padding: 12px; border-radius: var(--radius-small); margin-bottom: 0; }
#expand-record-allocations, .record-dialog [id$=expand-record-allocations] { width: 100%; font-size: 12px; min-height: 42px; border-style: dashed; }
.record-form > .record-field:has(textarea), .record-save-fields > .record-field:has(textarea) { margin-top: 20px; }
.record-save-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.record-save-fields:disabled { opacity: .75; }
.record-submission-recovery { margin-top: 20px; padding: 18px; border: 1px solid #d3b78b; border-radius: var(--radius-small); background: var(--amber-soft); }
.record-submission-recovery .notice { color: var(--amber); background: transparent; border: 0; padding: 0; margin-bottom: 10px; }
.record-submission-recovery > button { margin-top: 10px; }
.record-edit-version { margin-bottom: 16px; }
.record-event-link, .record-replacement-link { grid-column: 1/-1; min-width: 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.record-event-link summary, .record-replacement-link summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 8px 0; }
.record-event-link[open] > .record-field, .record-replacement-link[open] > .record-field { margin-top: 10px; }
.record-settlement { margin-top: 18px; padding: 14px; border: 0; border-radius: var(--radius-small); background: var(--surface); }
.record-settlement .checkbox-line { align-items: start; color: #554c44; line-height: 1.65; }
.record-settlement-preview { margin: 10px 0 0; color: var(--muted); line-height: 1.7; }
.record-settlement > .record-field { margin-top: 14px; }
.record-event-payments { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.record-event-payments > h3 { color: var(--ink); font-size: 15px; margin-bottom: 9px; }
.record-event-payments > p { line-height: 1.75; margin-bottom: 17px; }
.record-payment-cards { display: grid; gap: 18px; margin-bottom: 16px; }
.record-payment-card { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: visible; }
.record-payment-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 11px 11px 0 0; background: #fce8e1; padding: 12px 18px; color: #8b4234; }
.record-payment-heading strong { font-size: 13px; }
.record-payment-editor { padding: 16px; }
.record-payment-editor > .record-field { margin-bottom: 17px; }
.record-payment-editor .record-form-basics { margin-bottom: 17px; }
.record-payment-editor .record-money-fields { padding: 0; border: 0; }
.record-payment-editor .record-type-hint { margin: 8px 0 18px; }
.record-payment-editor > .record-field:has(textarea) { margin-top: 18px; }
.record-payment-editor .record-file-field { margin-top: 16px; margin-bottom: 0; }
.record-form-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.record-form-footer > span { font-size: 12px; }
.record-save-summary { flex: 1; min-width: 0; line-height: 1.5; }
.record-save-summary-value { display: flex; flex-wrap: wrap; gap: 0 .35em; max-width: 100%; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.record-save-amount { max-width: 100%; overflow-x: auto; white-space: nowrap; }
.record-save-summary-note { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
#record-form-error { margin: 18px 0; }
.record-read .record-card { padding: 14px 18px 16px; border-bottom: 0; }
.record-read .record-card-footer { display: flex; }
.record-read .record-actions { display: none; }
.record-read-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.record-void { border-top: 1px solid var(--line); padding-top: 16px; }
.record-void form { padding-top: 16px; }
.record-void form button { margin-top: 16px; }
.allocation-read { margin: 24px 0; }
.allocation-read h3 { font-size: 14px; }
.allocation-read-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 13px; }
.allocation-read-row strong { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Optional quantity details and shared originals never become mandatory steps. */
.record-movement { margin: 4px 0 18px; padding: 12px 0; background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.record-movement > .checkbox-line { margin: 8px 0 15px; }
.record-movement-status { margin: 11px 0; line-height: 1.65; }
.record-movement-status.has-issues { padding: 10px 12px; background: var(--amber-soft); border-radius: 6px; color: var(--amber); font-size: 12px; }
.record-movement-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(145px, 190px); gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); align-items: start; }
.record-movement-product { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.record-movement-product strong { font-size: 13px; font-weight: 600; }
.record-product-codes { color: var(--muted); font-variant-numeric: tabular-nums; }
.record-movement-line .record-field label { font-size: 12px; }
.record-movement-read-row { display: flex; flex-wrap: wrap; gap: 8px 15px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.record-file-field { margin: 22px 0; }
.record-file-field input { padding: 11px; background: var(--paper); font-size: 12px; }
.record-vouchers { border-top: 1px solid var(--line); padding: 18px 0 0; margin: 22px 0; }
.record-vouchers h3 { font-size: 14px; }
.record-vouchers > .button-link { margin: 0 8px 10px 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
.voucher-form { display: flex; align-items: flex-end; gap: 12px; margin-top: 18px; }
.voucher-form > .record-field { flex: 1; }
.voucher-form input { font-size: 12px; }
.record-voucher-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.record-voucher-name { flex: 1 1 180px; min-width: 0; padding: 6px 0; border: 0; text-align: left; color: var(--brand); background: transparent; font-size: 13px; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.record-voucher-drop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 15px; min-height: 56px; border: 1px dashed var(--line-strong); border-radius: var(--radius-small); background: var(--surface); cursor: pointer; }
.record-voucher-drop:hover, .record-voucher-drop.is-dragging { border-color: var(--brand); background: var(--brand-soft); }
.record-voucher-filename { flex: 1 1 150px; min-width: 0; overflow-wrap: anywhere; font-size: 12px; color: var(--muted); }
.record-voucher-source { flex: 1 0 100%; }
.record-shared-vouchers { margin: 18px 0; padding: 12px 15px; border-left: 3px solid #c2afa0; background: #f3eee8; border-radius: 0 var(--radius-small) var(--radius-small) 0; }
.record-shared-vouchers h3, .record-shared-vouchers h4 { font-size: 12px; margin: 0 0 6px; }
.record-shared-vouchers .record-voucher-row { padding: 7px 0; }
.record-shared-local { margin: 5px 0 0; }
.record-preview-dialog { width: min(1120px, calc(100% - 32px)); padding: 0; background: var(--surface); }
.record-preview-dialog .dialog-heading { position: sticky; top: 0; background: var(--paper); z-index: 2; padding: 18px 24px; margin: 0; }
.record-preview-dialog h2 { font-size: 18px; }
.record-preview-content { padding: 20px 24px; min-height: 160px; }
.record-preview-footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 14px 24px; background: var(--paper); }
.record-preview-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.preview-toolbar { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.preview-toolbar > :is(button, .button-link) { min-height: 40px; }
.record-preview-footer > .small { min-width: 0; overflow-wrap: anywhere; }
.record-image-stage { overflow: auto; max-height: 64svh; background: #eeeae6; border-radius: var(--radius-small); }
.record-image-stage img { display: block; width: 100%; height: auto; max-width: 100%; }
.record-preview-content iframe { display: block; width: 100%; height: 64svh; border: 1px solid var(--line); border-radius: var(--radius-small); margin-top: 14px; background: var(--paper); }
.record-sheet-table { overflow: auto; max-height: 58svh; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--paper); }
.record-sheet-table table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12px; }
.record-sheet-table caption { text-align: left; padding: 10px 12px; font-weight: 600; background: #f3eeeb; }
.record-sheet-table td { padding: 8px 12px; border: 1px solid var(--line); white-space: pre-wrap; min-width: 70px; max-width: 340px; overflow-wrap: anywhere; vertical-align: top; }
.record-sheet-summary { margin-top: 12px; }
.finance-status { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.finance-status .small { font-size: 12px; }
.finance-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
.finance-metric { background: var(--surface); border: 0; border-radius: var(--radius-small); padding: 15px; min-width: 0; }
.finance-metric strong { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; font-size: 24px; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.4px; margin: 7px 0; }
.finance-metric .small { font-size: 12px; }
.metric-note { font-size: 12px; line-height: 1.7; color: var(--muted); display: block; }
.finance-metric:nth-child(4), .finance-metric:nth-child(5) { background: #f2ece5; }
.finance-calculation { margin: 20px 0; }
.finance-source-list { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 20px; background: var(--surface); border: 0; padding: 16px; font-size: 13px; border-radius: var(--radius-small); }
.finance-source-list dt { color: var(--muted); }
.finance-source-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.record-section-heading { margin: 28px 0 16px; }
.record-section-heading h4 { margin: 0; font-size: 15px; }
.party-detail-content > h3, .import-review-content > h3 { margin-top: 20px; margin-bottom: 12px; }
.party-detail-content > h3:first-child, .import-review-content > h3:first-child { margin-top: 0; }
.import-review-content > .notice { margin: 16px 0; }

/* Responsive rules are together, after component definitions. */
@media (min-width: 1600px) { main { padding: 32px 40px 60px; } }
@media (max-width: 1180px) {
  .workspace { grid-template-columns: 192px minmax(0,1fr); }
  .brand { width: 166px; }
  main { padding: 26px 24px 48px; }
  .app-header { padding: 0 24px; gap: 20px; }
  .main-nav { padding: 24px 12px; }
  .sales-dropzone { padding: 20px; gap: 16px; }
  .upload-art, .upload-art svg { width: 44px; }
  .upload-copy h2 { font-size: 16px; }
  .upload-action { padding: 11px 16px; }
  th, td { padding: 12px; }
  .report-form { flex-wrap: wrap; }
  .report-form > div { min-width: 140px; }
  .report-form .supplier-field { min-width: 200px; }
  .header-caption { display: none; }
  .filter-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .records-toolbar > div:nth-child(2) { min-width: 145px; }
  .records-toolbar { gap: 8px; }
}
@media (max-width: 900px) {
  .workspace { grid-template-columns: 176px minmax(0,1fr); }
  .nav-button { padding: 12px; gap: 8px; font-size: 12px; }
  .nav-arrow { display: none; }
  .sales-dropzone { flex-wrap: wrap; }
  .upload-copy { flex-basis: calc(100% - 80px); }
  .upload-action { margin-left: 68px; }
  .overview-note { font-size: 12px; }
  .overview-note > span:last-child, .overview-dot { display: none; }
  .login-brand-panel { padding: 36px; }
  .login-card { padding: 48px 36px; }
  .login-brand-copy h2, .login-brand-title { font-size: 30px; }
}
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px; }
  .login-panel { padding: 24px 16px; }
  .login-layout { grid-template-columns: minmax(0,1fr); width: min(480px,100%); min-height: 0; border-radius: 16px; }
  .login-brand-panel { padding: 24px 26px; }
  .login-brand-name .brand-mark { width: 44px; height: auto; }
  .login-brand-panel .brand-mark.large { width: 40px; margin-bottom: 15px; }
  .login-brand-copy { max-width: none; }
  .login-brand-copy h2, .login-brand-title { font-size: 25px; margin: 16px 0 10px; }
  .login-brand-copy p:not(.eyebrow), .login-brand-note, .login-brand-footer, .login-pattern { display: none; }
  .login-card { padding: 30px 26px; max-width: none; }
  .login-card h1 { font-size: 24px; }
  .app-header { height: 64px; padding: 0 16px; gap: 8px; flex-wrap: nowrap; }
  .brand { gap: 9px; width: auto; font-size: 16px; }
  .brand-mark { width: 34px; height: auto; }
  .brand small { font-size: 10px; letter-spacing: .2px; }
  .header-actions { gap: 2px; }
  .user-name, .header-actions .connection, .header-actions #install-button { display: none; }
  .header-actions .compact { font-size: 12px; padding: 7px 9px; }
  .header-new-record { min-height: 44px; padding: 7px 10px; font-size: 12px; margin-left: auto; }
  .workspace { display: block; }
  .main-nav { display: flex; flex-direction: row; justify-content: space-between; gap: 3px; padding: 8px 12px; position: sticky; top: 0; z-index: 5; overflow-x: auto; }
  .nav-label, .nav-note, .nav-arrow { display: none; }
  .main-nav .nav-button { width: auto; flex: 1 1 0; margin: 0; justify-content: center; text-align: center; padding: 10px 6px; gap: 5px; font-size: 12px; min-height: 44px; }
  .main-nav .nav-button svg { display: none; }
  main { padding: 22px 16px 40px; }
  .page-heading { align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .page-heading h1 { font-size: 26px; margin-bottom: 8px; }
  .page-heading .eyebrow { font-size: 9px; margin-bottom: 8px; }
  .page-heading p:last-child { font-size: 12px; }
  .page-index { display: none; }
  .sales-dropzone { padding: 18px; gap: 12px; margin-bottom: 20px; border-radius: var(--radius); }
  .upload-art { width: 38px; }
  .upload-art svg { width: 38px; height: 53px; }
  .upload-copy { flex-basis: calc(100% - 60px); }
  .upload-copy h2 { font-size: 15px; line-height: 1.6; }
  .upload-copy .eyebrow { font-size: 8px; letter-spacing: 1.1px; }
  .upload-status { font-size: 12px; }
  .upload-action { width: 100%; margin: 3px 0 0; min-height: 44px; font-size: 12px; }
  .overview { gap: 10px; margin-bottom: 13px; }
  .list-title h2 { font-size: 15px; }
  .page-items, .overview-note { font-size: 12px; }
  .toolbar { flex-wrap: wrap; gap: 8px; border-radius: var(--radius); margin-bottom: 12px; padding: 10px; }
  .search-field { flex-basis: 100%; }
  .toolbar select { min-width: 0; font-size: 16px; }
  .toolbar > div:nth-child(2) { flex: 1; }
  .toolbar .secondary, .toolbar .quiet { font-size: 12px; padding: 10px 12px; }
  .orders-table { display: none; }
  .order-cards { display: grid; gap: 12px; }
  .order-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px; }
  .order-card .card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .order-card .order-link { font-size: 14px; }
  .order-card .customer { color: var(--muted); font-size: 12px; margin: 2px 0 12px; }
  .order-card .card-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-top: 1px solid var(--line); padding-top: 13px; }
  .order-card .card-bottom strong { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
  .order-card .card-bottom .small { font-size: 12px; }
  .order-card .card-bottom > .small { text-align: right; }
  .order-card > .record-add { width: 100%; min-height: 44px; margin-top: 4px; background: var(--surface); border-color: var(--line); }
  .panel { padding: 20px; }
  .inline-form { flex-wrap: wrap; gap: 14px; }
  .inline-form > div:first-child { flex: 1 0 100%; }
  .inline-form > div:nth-child(2) { flex: 1; width: auto; }
  .report-form { gap: 14px; }
  .report-form > div { min-width: 150px; flex: 1 1 calc(50% - 7px); }
  .report-form .supplier-field { flex: 1 0 100%; min-width: 0; }
  .report-form > button { width: 100%; }
  .report-summary { padding: 20px; flex-wrap: wrap; }
  .report-summary > .primary, .report-summary > .button-link { width: 100%; margin: 0; }
  .report-summary strong { font-size: 28px; }
  .report-note, .report-source-note { font-size: 12px; }
  dialog { padding: 20px; border-radius: 14px; width: calc(100% - 20px); max-height: 94svh; }
  .order-dialog { --detail-header-height: 70px; padding: 0; width: calc(100% - 14px); max-height: 96svh; scroll-padding-top: calc(var(--detail-header-height) + var(--detail-nav-height, 56px) + 12px); }
  .order-dialog > .dialog-heading { padding: 13px 16px; }
  .dialog-heading { gap: 8px; }
  .dialog-heading h2, .order-dialog > .dialog-heading h2 { font-size: 19px; }
  .dialog-heading .eyebrow { font-size: 8px; letter-spacing: 1.1px; }
  .dialog-heading .quiet { padding: 8px 9px; font-size: 12px; }
  .order-content { padding: 0 14px 20px; }
  .detail-nav { padding: 10px 14px; margin: 0 -14px 18px; gap: 0; }
  .detail-nav a { padding: 7px 9px; font-size: 12px; }
  .detail-section { margin: 18px 0; }
  .detail-panel { padding: 16px; }
  .detail-panel > h3 { font-size: 14px; margin-bottom: 16px; padding-bottom: 12px; }
  .status-line { gap: 7px; }
  .status-line > strong { flex: 1 0 100%; font-size: 13px; }
  .order-context { gap: 8px; font-size: 12px; flex-direction: column; }
  .money-grid { grid-template-columns: 1fr; gap: 8px; margin: 18px 0; }
  .money-grid > div { padding: 12px 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; }
  .money-grid strong { flex: 0 0 auto; min-width: 0; font-size: 20px; margin: 0; }
  .money-grid .small { flex: 1 1 90px; font-size: 12px; }
  .detail-form { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .detail-form button { width: 100%; }
  .detail-columns { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .shipment-box { padding: 17px; }
  .file-list li { align-items: flex-start; flex-direction: column; gap: 6px; }
  .file-list .file-info::before { width: 26px; height: 28px; }
  .file-list .file-info { gap: 6px; }
  .file-list li > .small { margin-left: 32px; font-size: 12px; }
  .purchase-dropzone { padding: 17px; flex-wrap: wrap; gap: 15px; }
  .purchase-dropzone .purchase-upload { width: 100%; }
  .purchase-dropzone h4 { font-size: 13px; }
  .purchase-heading { flex-wrap: wrap; gap: 10px; }
  .purchase-card { padding: 16px; }
  .purchase-heading > strong { font-size: 18px; }
  .cash-placeholder { padding: 18px; gap: 12px; flex-wrap: wrap; }
  .cash-placeholder > div { flex: 1; min-width: 160px; }
  .cash-placeholder p { font-size: 12px; }
  .cash-placeholder .pill { margin-left: 35px; }
  .toast { top: 12px; right: 16px; font-size: 12px; }
  .pagination { flex-wrap: wrap; }
  .pagination > div { margin-left: auto; }
  .section-heading h2 { font-size: 17px; }
  th, td { padding: 12px; }
  .detail-section table { min-width: 540px; }
  #parties-content table { min-width: 350px; }
  #report-content table, #exports-content table { min-width: 660px; }
  .view-bar { gap: 2px; margin: 16px 0 12px; flex-wrap: wrap; }
  .view-selector { flex: 1 0 100%; gap: 8px; margin-bottom: 4px; }
  .view-selector select { width: 100%; min-width: 0; font-size: 16px; padding: 10px; flex: 1 1 150px; }
  .view-selector > #new-order-view { flex: 0 0 auto; font-size: 12px; }
  .view-personal { display: none; }
  .column-picker > summary, .view-save > summary { padding: 9px 8px; font-size: 12px; }
  .column-popover, #view-form { width: 100%; padding: 18px; }
  .column-popover { max-height: 60svh; }
  .view-save-actions .compact { white-space: normal; }
  #orders-page .page-heading { margin-bottom: 12px; }
  #orders-page[data-has-orders="true"] .page-heading h1 { margin-bottom: 0; }
  #orders-page[data-has-orders="true"] .page-heading p { display: none; }
  #orders-page[data-has-orders="true"] .sales-dropzone { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 12px; margin-bottom: 12px; }
  #orders-page[data-has-orders="true"] .sales-dropzone .upload-art,
  #orders-page[data-has-orders="true"] .sales-dropzone .eyebrow { display: none; }
  #orders-page[data-has-orders="true"] .sales-dropzone h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  #orders-page[data-has-orders="true"] .upload-action { width: auto; margin: 0; padding: 10px 12px; }
  #orders-page .overview { flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
  #orders-page .view-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; margin: 8px 0; }
  #orders-page .view-selector { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-column: 1/-1; gap: 8px; margin: 0; }
  #orders-page .view-selector select { width: 100%; min-width: 0; }
  #orders-page #new-order-view { min-height: 44px; font-size: 12px; }
  #orders-page .column-picker > summary, #orders-page .view-save > summary { min-height: 44px; padding: 10px 8px; }
  #orders-page #order-search { gap: 6px; padding: 8px; margin-bottom: 10px; }
  #orders-page #order-search .search-field input { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  #orders-page .advanced-filters { margin-top: 0; padding-top: 0; }
  #orders-page .advanced-filters > summary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  #orders-page .card-preview { gap: 5px 10px; margin: 10px 0; }
  #orders-page .order-card .order-link { min-height: 44px; }
  #order-filter-state { gap: 8px; padding: 10px; margin: 0 0 10px; }
  #clear-active-order-filters { padding-right: 8px; padding-left: 8px; font-size: 12px; }
  .filter-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; padding: 12px 0; }
  .filter-grid input, .filter-grid select { font-size: 16px; }
  .filter-grid label { font-size: 12px; }
  .filter-actions { flex-wrap: wrap; gap: 8px; }
  .filter-actions > span { flex: 1 0 100%; }
  .filter-actions .compact { flex: 1; }
  .records-intro { padding: 0 0 14px; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
  .records-intro > div { gap: 10px; }
  .records-intro-mark { font-size: 22px; }
  .records-intro p { font-size: 13px; }
  .records-intro p span { font-size: 12px; }
  .records-intro > .small { padding-left: 0; font-size: 12px; }
  #records-page .page-heading { flex-wrap: wrap; }
  #records-page .page-heading > button { margin-left: auto; font-size: 12px; min-height: 44px; }
  #records-page .overview { flex-wrap: wrap; }
  #records-page .overview > .small { font-size: 12px; }
  .records-toolbar .search-field { flex-basis: 100%; }
  .records-toolbar > div:nth-child(2) { flex: 1 0 100%; }
  .records-toolbar > .record-filter-date { flex: 1 1 calc(50% - 4px); min-width: 150px; }
  .records-toolbar input[type=date] { width: 100%; max-width: none; font-size: 16px; padding: 9px; }
  .records-toolbar > button { flex: 1; }
  .record-card, .compact-records .record-card { padding: 11px 13px 10px; }
  .record-card-heading { align-items: start; gap: 10px; flex-wrap: wrap; }
  .record-title-button, .compact-records .record-title-button { font-size: 13px; }
  .record-money, .compact-records .record-money { font-size: 18px; }
  .record-card-footer { gap: 6px; flex-wrap: wrap; }
  .record-card-footer > .small { flex: 1 0 100%; }
  .record-actions { margin-left: auto; }
  .record-actions .compact { min-height: 44px; padding: 6px 9px; font-size: 12px; }
  .record-dialog { width: calc(100% - 14px); max-height: 96svh; padding: 0; }
  .record-dialog > .dialog-heading { padding: 18px 20px; }
  .record-dialog > .dialog-heading h2 { font-size: 19px; }
  #record-detail { padding: 20px 16px; }
  .record-form-intro { flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
  .record-form-grid { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .record-field input, .record-field select, .record-field textarea { font-size: 16px; }
  .record-type-hint { font-size: 12px; padding: 13px; }
  .record-money-fields { padding: 0; }
  .allocation-heading { flex-wrap: wrap; gap: 4px; }
  .allocation-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; padding-bottom: 15px; border-bottom: 1px dashed var(--line); }
  .allocation-row > .record-field:first-child, .allocation-row > .record-field:nth-child(2) { grid-column: 1/-1; }
  .allocation-row input, .allocation-row select { font-size: 16px; }
  .allocation-row > button { min-height: 44px; }
  .allocation-preview { font-size: 12px; }
  /* The dialog header stays outside the form scrollport; its footer sticks within it. */
  .record-dialog[open]:has(.record-form) { position: fixed; top: calc(var(--record-viewport-top, 0px) + 8px); bottom: auto; left: 0; right: 0; display: flex; flex-direction: column; height: calc(var(--record-viewport-height, 100dvh) - 16px); max-height: calc(var(--record-viewport-height, 100dvh) - 16px); margin: 0 auto; overflow: hidden; }
  .record-dialog:has(.record-form) > .dialog-heading { position: relative; flex-shrink: 0; padding-top: 14px; padding-bottom: 14px; }
  .record-dialog:has(.record-form) #record-detail { flex: 1; min-height: 0; padding-bottom: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--record-savebar-height, 110px) + 16px); }
  .record-dialog:has(.record-form) :where(input, select, textarea, summary, .record-purchase-guidance, #record-form-error, .record-submission-recovery) { scroll-margin-top: 16px; scroll-margin-bottom: calc(var(--record-savebar-height, 110px) + 16px); }
  .record-form-footer { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; margin: 20px -16px 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--paper); box-shadow: 0 -8px 24px #34231b0a; }
  .record-form-footer > button { width: auto; min-width: 92px; min-height: 44px; margin: 0; padding: 10px 14px; }
  .record-save-summary-value { font-size: 14px; }
  .record-submission-recovery { margin-bottom: 20px; }
  .record-read-actions > button { flex: 1 0 calc(50% - 10px); font-size: 12px; }
  .voucher-form { flex-wrap: wrap; }
  .voucher-form > .record-field { flex: 1 0 100%; }
  .voucher-form > button, .record-void form > button { width: 100%; }
  .finance-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 9px; }
  .finance-metric { padding: 12px; }
  .finance-metric strong { font-size: 20px; margin: 8px 0; }
  .finance-metric .small, .metric-note { font-size: 12px; }
  .finance-source-list { gap: 9px 12px; padding: 14px; font-size: 12px; }
  .record-section-heading h4 { font-size: 13px; }
  .record-section-heading .record-add { min-height: 44px; font-size: 12px; padding: 8px 10px; }
}
@media (max-width: 600px) {
  .file-list li { align-items: start; flex-wrap: wrap; }
  .file-list .file-info { flex: 1 0 100%; }
  .file-preview-name { min-height: 44px; }
  .file-actions { width: 100%; justify-content: space-between; }
  .file-actions .button-link { min-height: 44px; }
  .record-read .record-card { padding: 13px 14px 15px; }
  .acceptance-tools a { min-height: 44px; display: inline-flex; align-items: center; }
  .record-category-group { gap: 7px; margin-bottom: 21px; }
  .record-category-button { min-height: 47px; padding: 8px 5px; font-size: 12px; }
  .record-category-button[aria-checked=true] { padding: 7px 4px; }
  .record-category-button[aria-checked=true]::after { margin-left: 3px; }
  .record-form-basics > .record-field:last-child { max-width: none; }
  .record-form[data-record-kind=event] .record-form-basics:not(.record-payment-basics) { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .record-form[data-record-kind=event] .record-form-basics:not(.record-payment-basics) > .record-field:first-child { grid-column: auto; }
  .record-form[data-record-kind=cash] .record-form-basics:not(.record-payment-basics) > .record-field:has(input[type=date]) { max-width: none; }
  .record-subtype-group { gap: 6px; }
  .record-subtype-button { min-height: 44px; padding: 8px 10px; font-size: 12px; }
  .record-money-fields { padding: 0; }
  .allocation-row.simple-allocation { grid-template-columns: minmax(0,1fr); }
  .record-preview-dialog { width: calc(100% - 14px); max-height: 96svh; }
  .record-preview-dialog .dialog-heading { padding: 16px; }
  .record-preview-content { padding: 16px; }
  .record-preview-footer { padding: 12px 16px; flex-wrap: wrap; }
  .record-preview-controls { gap: 6px; }
  .record-preview-controls button { padding: 9px; font-size: 12px; }
  .record-voucher-row .button-link { font-size: 12px; }
  .record-movement { padding: 12px 0; }
  .record-movement-line { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .record-payment-heading { padding: 10px 13px; }
  .record-payment-editor { padding: 14px; }
  .record-settlement { padding: 13px; }
  .record-event-payments > button { width: 100%; }
}
@media (max-width: 360px) {
  #orders-page[data-has-orders="true"] .page-heading { margin-top: 0; margin-bottom: 8px; }
  #orders-page .order-card { padding: 14px; }
  #orders-page .order-card .customer { margin-bottom: 8px; }
  #orders-page .order-card .card-bottom { padding-top: 11px; }
  main { padding-right: 14px; padding-left: 14px; }
  .main-nav { padding-right: 10px; padding-left: 10px; }
  .main-nav .nav-button { font-size: 12px; padding-right: 4px; padding-left: 4px; gap: 5px; }
  .overview-note, .connection, .upload-art { display: none; }
  .records-toolbar > .record-filter-date { flex: 1 0 100%; min-width: 0; }
  .report-form > div { flex: 1 0 100%; min-width: 0; }
  .finance-grid { grid-template-columns: minmax(0,1fr); }
  .app-header { padding-right: 12px; padding-left: 12px; }
  .brand { font-size: 15px; gap: 7px; }
  .brand-mark { width: 30px; }
  .header-new-record { padding: 7px 8px; font-size: 12px; }
  .header-actions .compact { padding: 7px; font-size: 12px; }
  .filter-grid > div:has(input[type=date]) { grid-column: 1/-1; }
  .login-panel { padding: 16px 12px; }
  .login-brand-panel, .login-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shared native dates: override WebKit intrinsic appearance, retain the native picker. */
input[type=date], .records-toolbar input[type=date], .filter-grid input[type=date], .report-form input[type=date], .record-form input[type=date], .detail-form input[type=date], .purchase-filters input[type=date], .import-confirm-form input[type=date] { -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0; min-inline-size: 0; inline-size: 100%; max-inline-size: 100%; -webkit-min-logical-width: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
input[type=date]::-webkit-date-and-time-value { display: block; text-align: left; min-width: 0; min-height: 1.6em; line-height: 1.6; }
input[type=date]::-webkit-datetime-edit { padding: 0; min-width: 0; }
:where(.detail-form, .record-form-grid, .record-form-basics, .filter-grid, .report-form, .records-toolbar, .purchase-filters) > div { min-width: 0; max-width: 100%; }
.record-field { min-width: 0; }
.order-heading-actions { display: flex; align-items: center; margin-left: auto; flex-shrink: 0; }
.order-heading-actions .record-add { min-height: 44px; }
.purchase-section-total { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
#order-purchases > h3 { flex-wrap: wrap; }
.document-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 5px; }
.document-identity h4 { margin: 0; }
#order-files > h3 .file-update { margin-left: auto; }
.import-document-facts { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px 16px; margin: 0 0 20px; font-size: 13px; }
.import-document-facts dt { color: var(--muted); }
.import-document-facts dd { margin: 0; overflow-wrap: anywhere; }
.import-confirm-form { margin-top: 20px; }
.import-confirm-form > div:has(input[type=date]) { max-width: 320px; min-width: 0; }
.import-confirm-form > .small { margin-top: 8px; }
.import-confirm-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 18px; }
.import-confirm-actions > .quiet { margin-right: auto; }
.purchase-filters { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: end; margin-bottom: 16px; }
.purchase-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.purchase-advanced { grid-column: 1/-1; min-width: 0; }
.purchase-advanced > summary { padding: 4px 0; color: var(--muted); font-size: 12px; cursor: pointer; }
.purchase-filter-fields { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; align-items: start; margin-top: 14px; }
.purchase-filter-fields > div { min-width: 0; }
.purchase-filters .record-picker-status { min-height: 0; }
.purchase-filters .record-picker-status:empty { display: none; }
.purchase-summary { margin: 0 0 20px; }
.purchase-summary-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.purchase-summary-metrics > div { min-width: 0; }
.purchase-summary-metrics strong { display: block; font-size: 21px; font-weight: 600; margin-top: 5px; white-space: nowrap; overflow-x: auto; max-width: 100%; font-variant-numeric: tabular-nums; }
.purchase-summary-note { margin: 10px 0 0; }
.purchases-table table { min-width: 1120px; }
.purchase-table-identity { min-width: 110px; }
.purchase-row-dates { font-size: 12px; color: var(--muted); white-space: nowrap; }
.purchase-row-dates .pill { margin-top: 4px; }
.purchase-row-actions { display: flex; gap: 4px 8px; flex-wrap: wrap; }
.purchase-row-actions .file-preview-name { font-size: 12px; }
.purchases-table .purchase-row-actions { display: grid; grid-template-columns: repeat(2,max-content); min-width: 145px; gap: 4px; }
.purchases-table .purchase-row-actions .file-preview-name { grid-column: 1/-1; min-height: 26px; }
.purchase-cards { display: none; }
.record-local-voucher-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.record-payment-title { min-width: 0; margin-bottom: 14px; }
.record-payment-title summary { color: var(--muted); font-size: 12px; cursor: pointer; padding: 6px 0; }
.record-payment-title input { margin-top: 8px; }
.record-settlement-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.record-settlement-reasons button { min-height: 40px; }
.record-settlement-reasons button[aria-pressed=true] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
@media (max-width: 1000px) {
  .purchase-filter-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .main-nav { flex-wrap: nowrap; justify-content: space-between; }
  .main-nav .nav-button { flex: 1 0 auto; min-width: 44px; }
  .order-dialog > .dialog-heading { gap: 6px; }
  .order-dialog > .dialog-heading .dialog-heading-content { flex: 1 1 auto; }
  .order-heading-actions { margin-left: 0; }
  .order-heading-actions .record-add { font-size: 12px; padding: 8px; }
  .order-dialog > .dialog-heading > .close-dialog { padding: 8px 6px; }
  .purchase-section-total { flex: 1 0 100%; margin-left: 0; text-align: left; }
  .import-document-facts { grid-template-columns: minmax(0,1fr); gap: 3px; }
  .import-document-facts dd { margin-bottom: 10px; }
  .import-confirm-actions { gap: 8px; }
  .import-confirm-actions > .quiet { flex: 1 0 100%; margin-right: 0; }
  .purchase-filters { gap: 14px; padding: 16px; }
  .purchase-search, #purchase-order-field, .purchase-filter-actions, .purchase-filter-fields > .date-range-field { grid-column: 1/-1; }
  .purchase-advanced > summary { min-height: 44px; padding: 10px 0; }
  .purchase-filter-actions > button { flex: 1; min-height: 44px; padding: 10px 8px; font-size: 12px; }
  .purchase-summary-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .purchase-summary-metrics strong { font-size: 19px; }
  .purchases-table { display: none; }
  .purchase-cards { display: grid; gap: 12px; }
  .purchase-list-card .card-top { align-items: start; }
  .purchase-row-actions { padding-top: 10px; border-top: 1px solid var(--line); }
  .purchase-row-actions > button { min-height: 44px; }
  .records-toolbar > .record-filter-date, .report-form > div:not(.supplier-field) { flex: 1 0 100%; min-width: 0; }
  .filter-grid > div:has(input[type=date]) { grid-column: 1/-1; }
  .record-form-basics > .record-field:has(input[type=date]) { width: 100%; max-width: 100%; }
}

@media (max-width: 360px) {
  .main-nav { padding-right: 8px; padding-left: 8px; gap: 2px; }
  .main-nav .nav-button { padding-right: 3px; padding-left: 3px; }
}

/* UI-010: complete document lines, bounded DOM, precise native field alignment. */
:where(.record-field, .record-form-basics, .record-form-grid, .record-payment-editor, .detail-form, .filter-grid, .purchase-filter-fields) { min-inline-size: 0; }
:where(.record-field, .record-form-basics, .record-form-grid, .record-payment-editor, .detail-form, .filter-grid, .purchase-filter-fields) > :where(input, select, textarea) { min-inline-size: 0; max-inline-size: 100%; }
.purchase-section-total { display: inline-flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; font-size: 14px; text-align: left; }
.purchase-section-count { color: var(--ink); font-weight: 600; white-space: nowrap; }
.purchase-section-money { display: grid; gap: 2px; min-width: 0; }
.purchase-section-money strong { color: var(--ink); font-size: 22px; line-height: 1.4; font-weight: 650; font-variant-numeric: tabular-nums; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.document-lines { margin: 18px 0; min-width: 0; }
.document-lines-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.document-lines-heading h4 { font-size: 14px; font-weight: 600; margin: 0; }
.document-lines-table { max-height: min(48svh, 480px); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--radius-small); }
.document-lines-table > .table-container { margin-top: 0; overflow: visible; border: 0; border-radius: 0; }
.document-lines-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.document-lines-total { margin: 10px 0 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.document-lines-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); }
.document-lines-status { flex: 1 1 200px; }
.document-lines-size-chooser, .document-lines-page-chooser { display: flex; align-items: center; gap: 6px; }
.document-lines-pagination label { margin: 0; font-size: 12px; white-space: nowrap; }
.document-lines-pagination select { width: 78px; min-height: 38px; padding: 7px; font-size: 13px; }
.document-lines-page-chooser input { width: 66px; min-height: 38px; padding: 7px; font-size: 13px; font-variant-numeric: tabular-nums; }
.document-lines-controls { display: flex; gap: 6px; }
.record-payment-editor > .record-payment-basics { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,200px); align-items: start; gap: 14px; }
.record-payment-basics > .record-field, .record-payment-basics > .record-payment-title { min-width: 0; max-width: none; margin-bottom: 0; }
.record-payment-title-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.record-payment-title-value { min-height: 44px; padding: 10px 12px; margin: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-small); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.record-payment-title summary { padding-top: 7px; }
.record-payment-editor .record-payment-basics > .record-field:has(input[type=date]) { max-width: none; }
.record-local-voucher-list { flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; margin-top: 10px; }
.record-local-voucher-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; padding: 10px 0; }
.record-local-voucher-row .record-voucher-name { flex-basis: 220px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.record-local-voucher-actions { margin-left: auto; }
.record-voucher-picker-controls { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; min-width: 0; }
@media (max-width: 760px) {
  .record-payment-editor > .record-payment-basics { grid-template-columns: minmax(0,1fr); }
  .record-payment-title-value { font-size: 16px; }
  .record-local-voucher-row .record-voucher-name { flex-basis: 100%; min-height: 44px; }
  .record-local-voucher-actions > button, .record-voucher-picker-controls > button { min-height: 44px; }
  .document-lines-pagination { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
  .document-lines-status, .document-lines-controls { grid-column: 1/-1; }
  .document-lines-controls > button { flex: 1; min-height: 44px; }
  .document-lines-pagination select, .document-lines-page-chooser input { font-size: 16px; min-height: 44px; }
  .document-lines-page-chooser > button { min-height: 44px; }
  .document-lines-pagination label { font-size: 12px; }
  .purchase-section-total { gap: 10px 18px; }
  .purchase-section-money strong { font-size: 20px; }
}
@media (max-width: 360px) {
  .document-lines-pagination { grid-template-columns: minmax(0,1fr); }
  .document-lines-size-chooser, .document-lines-page-chooser { justify-content: flex-start; }
}

/* UI-012: one field editor, applied conditions stay beside the result set. */
.order-column-button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 6px 0; color: var(--muted); font: inherit; text-align: inherit; cursor: pointer; white-space: nowrap; }
.order-column-button:hover { color: var(--brand); }
.order-column-button[aria-expanded=true] { color: var(--brand); }
.column-filter-mark { color: var(--brand); font-size: 11px; }
.column-sort-mark { color: var(--ink); }
.orders-table th { padding-block: 8px; }
.order-query-toolbar .order-query-menu { white-space: nowrap; }
.order-filter-chip { display: inline-flex; align-items: center; gap: 7px; }
.order-filter-chip .chip-remove { padding: 2px 3px; min-height: 24px; font-size: 11px; color: var(--brand); }
.order-column-dialog { width: min(440px, calc(100% - 24px)); }
.order-column-dialog .dialog-heading { gap: 12px; }
.order-column-dialog h2 { font-size: 18px; }
.column-menu-section { margin: 20px 0; }
.column-menu-section h3 { margin: 0 0 10px; font-size: 14px; }
.column-menu-sort { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.column-menu-sort button[aria-pressed=true] { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
#column-menu-current-sort { margin-top: 8px; }
.column-filter-inputs { margin-top: 12px; min-width: 0; }
.column-range-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.column-range-inputs > p { grid-column: 1/-1; margin: 0; }
.column-range-inputs > div { min-width: 0; }
.column-status-options { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
.column-status-options label { min-height: 36px; margin: 0; padding: 5px; }
.column-menu-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
@media (max-width: 760px) {
  .order-column-dialog { padding: 20px; }
  .order-column-dialog input, .order-column-dialog select, .order-column-dialog textarea { font-size: 16px; }
  .order-column-dialog button, .column-status-options label { min-height: 44px; }
  .order-query-toolbar .order-query-menu { min-height: 44px; }
  .order-filter-chip .chip-remove { min-height: 32px; font-size: 12px; }
}
@media (max-width: 360px) { .column-range-inputs { grid-template-columns: minmax(0, 1fr); } }

.order-column-dialog::backdrop { background: #211b1720; backdrop-filter: none; }
@media (min-width: 761px) { .order-column-dialog[open][data-header-anchor=true] { position: fixed; margin: 0; left: var(--column-menu-left); top: var(--column-menu-top); max-height: calc(100dvh - var(--column-menu-top, 12px) - 12px); } }

.column-date-preset, #column-menu-date-notice { grid-column: 1/-1; }

/* Keep field actions outside the menu scrollport, including the narrow date form. */
.order-column-dialog[open] { display: flex; flex-direction: column; overflow: hidden; padding: 0; max-height: calc(100dvh - 24px); }
.order-column-dialog > .dialog-heading { margin: 0; padding: 18px 20px; flex-shrink: 0; }
#column-menu-form { display: flex; flex-direction: column; min-height: 0; }
.column-menu-body { padding: 18px 20px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 16px; }
.column-menu-actions { margin: 0; padding: 14px 20px; flex-shrink: 0; background: var(--paper); }
@media (max-width: 760px) { .order-column-dialog { padding: 0; } }

/* UI-013: order identity and its three progress facts share the sticky heading. */
.order-dialog > .dialog-heading { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto auto; gap: 14px; height: auto; align-items: center; }
.order-dialog > .dialog-heading .dialog-heading-content { grid-column: 1; }
#order-heading-progress { grid-column: 2; min-width: 0; }
.order-dialog > .dialog-heading .order-heading-actions { grid-column: 3; }
.order-dialog > .dialog-heading > .close-dialog { grid-column: 4; }
#order-heading-progress .order-tracking { margin: 0; flex-wrap: nowrap; gap: 12px; }
#order-heading-progress .order-progress-item { white-space: nowrap; gap: 6px; }
.order-dialog > .dialog-heading .order-heading-actions { margin-left: 0; }
@media (max-width: 1000px) {
  .order-dialog > .dialog-heading { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 12px; }
  .order-dialog > .dialog-heading .dialog-heading-content { grid-column: 1; grid-row: 1; }
  #order-heading-progress { grid-column: 1/-1; grid-row: 2; }
  .order-dialog > .dialog-heading .order-heading-actions { grid-column: 2; grid-row: 1; }
  .order-dialog > .dialog-heading > .close-dialog { grid-column: 3; grid-row: 1; }
  #order-heading-progress .order-tracking { flex-wrap: wrap; gap: 8px 16px; }
}
@media (max-width: 760px) { .order-dialog > .dialog-heading { min-height: 70px; column-gap: 6px; } }

/* UI-014: the complete mobile view workspace stays below the sticky main menu. */
.finance-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .view-bar { z-index: 4; } }
@media (max-width: 360px) { .finance-outcomes { grid-template-columns: minmax(0, 1fr); } }

/* INSIGHT-001 uses the existing operating workspace, with explicit date sources. */
.insight-range { display: grid; grid-template-columns: minmax(150px, 190px) minmax(150px, 190px) minmax(0, 1fr); gap: 16px; align-items: end; padding: 18px; }
.insight-range > div, .insight-range input { min-width: 0; }
.insight-range-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.insight-range-actions button { white-space: nowrap; }
.insight-result-meta { margin: 12px 0; }
.insight-result-meta p { margin: 3px 0; }
#insight-applied { font-weight: 600; color: var(--ink); }
.insight-query-status { margin: 12px 0; min-height: 20px; }
.insight-query-status[role=alert] { color: var(--danger); }
.insight-section { margin: 0 0 20px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.insight-section > h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 5px; }
.insight-section > p { margin-bottom: 15px; line-height: 1.7; max-width: 85ch; }
.insight-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.insight-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.insight-metric { min-width: 0; }
.insight-metric > strong { display: block; font-size: 25px; font-weight: 650; font-variant-numeric: tabular-nums; margin: 5px 0; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.insight-metric > button { margin-top: 5px; padding-left: 0; text-decoration: underline; text-underline-offset: 3px; }
.insight-unallocated { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.insight-unallocated > span { min-width: 0; overflow-wrap: anywhere; }
.insight-pending { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.insight-pending-button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 74px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--ink); background: var(--surface); font-size: 13px; }
.insight-pending-button:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.insight-pending-button > strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.insight-drill { margin-top: 22px; scroll-margin-top: 80px; }
.insight-drill .section-heading h2 { font-size: 17px; margin: 0; }
.insight-order-row, .insight-cash-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; padding: 15px 0; border-top: 1px solid var(--line); min-width: 0; }
.insight-row-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; min-width: 0; }
.insight-row-heading .order-link { text-align: left; overflow-wrap: anywhere; white-space: normal; }
.insight-row-facts { display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; grid-column: 1; min-width: 0; }
.insight-row-facts span { max-width: 100%; overflow-wrap: anywhere; }
.insight-row-actions { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.insight-order-row > .order-tracking { grid-column: 1 / -1; flex-wrap: wrap; padding: 0; gap: 7px 16px; }
.insight-cash-amount { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 18px; font-variant-numeric: tabular-nums; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.insight-cash-allocations { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px 18px; }
.insight-cash-allocations > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
@media (max-width: 1000px) {
  .insight-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-range-actions { grid-column: 1 / -1; }
  .insight-pending { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .insight-range { padding: 14px; gap: 12px; }
  .insight-range-actions button { flex: 1 1 auto; min-height: 44px; }
  .insight-section { padding: 16px; margin-bottom: 14px; }
  .insight-section > h2, .insight-drill .section-heading h2 { font-size: 16px; }
  .insight-metrics { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .insight-metric { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .insight-metric:last-child { padding-bottom: 0; border-bottom: 0; }
  .insight-metric > strong { font-size: 24px; }
  .insight-metric > button { min-height: 44px; margin-top: 0; }
  .insight-pending { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-pending-button { min-height: 78px; }
  .insight-unallocated { margin-top: 10px; }
  .insight-unallocated button { min-height: 44px; }
  .insight-drill { padding: 16px; }
  .insight-order-row, .insight-cash-row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .insight-row-actions, .insight-cash-amount { grid-column: 1; grid-row: auto; justify-self: start; }
  .insight-row-actions > button, .insight-cash-allocations button { min-height: 44px; }
  .insight-row-facts { font-size: 13px; }
}
@media (max-width: 360px) {
  .insight-range { grid-template-columns: minmax(0, 1fr); }
  .insight-range-actions { grid-column: 1; }
}