:root {
  color-scheme: light;
  --ink: #172334;
  --muted: #475569;
  --line: #e2e8f0;
  --surface: #ffffff;
  --canvas: #f4f7fb;
  --brand: #183d65;
  --brand-dark: #0e2e50;
  --brand-soft: #e9f0f7;
  --danger: #a12525;
  --danger-soft: #fff1f0;
  --success: #047857;
  --success-soft: #e9f7ef;
  --success-action: #047857;
  --success-action-hover: #056344;
  --warning: #8a4b10;
  --warning-soft: #fff3d6;
  --focus: #356b9c;
  --surface-muted: #f8fafc;
  --surface-hover: #f1f5f9;
  --surface-input: #ffffff;
  --line-soft: #edf1f5;
  --text-strong: #10243b;
  --text-body: #26374a;
  --neutral-text: #475569;
  --neutral-surface: #edf2f7;
  --danger-border: #f3cfcc;
  --success-border: #cae7d5;
  --warning-border: #f0d99e;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); min-height: 100vh; }
a { color: var(--brand); text-decoration: none; }
a { text-underline-offset: .18em; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #4676a4; outline-offset: 3px; }
input, textarea { caret-color: var(--brand); }
::selection { color: #fff; background: var(--brand); }
.topbar { min-height: 68px; padding: 0 max(24px, calc((100vw - 1120px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-add[hidden] { display: none !important; }
.brand { color: var(--ink); font-weight: 760; letter-spacing: -.03em; font-size: 19px; }
.brand:hover { text-decoration: none; }
.brand span { margin-left: 10px; color: var(--muted); letter-spacing: .11em; font-size: 11px; font-weight: 700; vertical-align: 2px; }
.section-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; margin-left: 28px; }
.section-nav[hidden], .account-menu[hidden] { display: none !important; }
.nav-link { display: inline-flex; min-height: 44px; align-items: center; padding: 0 13px; border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 650; }
.nav-link:hover { color: var(--brand); background: #f2f5f8; text-decoration: none; }
.nav-link.is-active { color: var(--brand); background: var(--brand-soft); }
.page-shell { max-width: 1120px; margin: 0 auto; padding: 40px 24px 72px; }
.narrow-shell { max-width: 820px; }
.page-heading, .section-heading, .detail-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.page-heading { margin-bottom: 28px; align-items: end; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(28px, 4vw, 36px); line-height: 1.15; letter-spacing: -.04em; }
h2 { font-size: 19px; letter-spacing: -.02em; }
h3 { margin-bottom: 7px; font-size: 16px; }
.muted, .page-heading .muted { color: var(--muted); }
.page-heading p:last-child { margin-bottom: 0; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px; font-weight: 650; font-size: 14px; cursor: pointer; white-space: nowrap; }
.button:hover { text-decoration: none; }
.button-primary { color: #fff; background: var(--brand); }
.button-primary:hover { background: var(--brand-dark); }
.button-secondary { color: var(--ink); background: var(--surface); border-color: var(--line); }
.button-secondary:hover { border-color: #aab7c6; background: #fafbfd; }
.button-danger-outline { color: var(--danger); background: #fff; border-color: #e8c5c2; }
.button-danger-outline:hover { background: var(--danger-soft); border-color: #d8a4a0; }
.mobile-add { display: inline-flex; }
.mobile-add[hidden] { display: none !important; }
.toolbar { display: flex; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 8px #14233908; }
.toolbar input { min-height: 42px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; }
.toolbar input { width: 100%; padding: 0 12px; }
.toolbar select { min-height: 42px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; }
.search-field { flex: 1; }
.filter-field { display: flex; align-items: center; }
.warehouse-toolbar .search-field { min-width: 220px; }
.result-count { padding: 19px 2px 12px; color: var(--muted); font-size: 13px; }
.supplier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.supplier-card { min-width: 0; padding: 19px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.supplier-card:hover { text-decoration: none; border-color: #aab9c9; transform: translateY(-1px); }
.card-topline { display: flex; align-items: center; margin-bottom: 14px; }
.warehouse-card .card-topline { justify-content: space-between; }
.status-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-active { color: var(--success); background: var(--success-soft); }
.status-inactive { color: #5d6672; background: #edf0f3; }
.status-neutral { color: #455468; background: #edf1f5; }
.status-warning { color: #80540e; background: #fff4d9; }
.company-mark, .contact-avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-weight: 750; }
.fabric-image-thumb { width: 56px; height: 56px; overflow: hidden; padding: 0; background: var(--surface-soft, #edf2f7); }
.fabric-image-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fabric-image-panel { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: clamp(20px, 4vw, 34px); align-items: center; margin: 0 0 28px; padding: clamp(18px, 4vw, 28px); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.fabric-image-preview { display: grid; min-width: 0; min-height: 190px; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft, #f3f6fa); }
.fabric-image-preview > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fabric-image-empty { display: grid; justify-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.fabric-image-empty svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fabric-image-content h2 { margin-bottom: 6px; font-size: 20px; }
.fabric-image-content > .muted { margin-bottom: 18px; font-size: 13px; line-height: 1.5; }
.fabric-image-form { display: grid; gap: 12px; }
.fabric-image-form input[type="file"] { padding: 7px; font-size: 12px; }
.fabric-image-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.variant-title-group { display: flex; align-items: center; gap: 14px; }
.variant-image-thumb { display: grid; width: 64px; height: 64px; flex: 0 0 64px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft, #f3f6fa); color: var(--muted); font-size: 10px; text-align: center; }
.variant-image-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.variant-image-tools { margin: 12px 0 4px; border-top: 1px solid var(--line); color: var(--brand-dark); }
.variant-image-tools summary { width: fit-content; min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 13px; font-weight: 650; }
.variant-image-panel { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 0 8px; }
.variant-image-panel.is-compact { grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); padding: 4px 0 14px; }
.variant-image-preview { display: grid; min-width: 0; min-height: 150px; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft, #f3f6fa); }
.variant-image-panel.is-compact .variant-image-preview { min-height: 110px; }
.variant-image-preview > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.variant-image-content { min-width: 0; }
.variant-image-content > .muted { margin: 0 0 12px; font-size: 12px; line-height: 1.5; }
.variant-image-form { display: grid; gap: 11px; }
.variant-image-form input[type="file"] { padding: 7px; font-size: 12px; }
.variant-image-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.stock-roll-cell { display: flex; align-items: center; gap: 10px; }
.stock-roll-cell > img { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--line); border-radius: 7px; object-fit: cover; }
.stock-roll-cell > span { display: grid; gap: 3px; }
.roll-variant-photo { width: min(100%, 440px); aspect-ratio: 4 / 3; margin: 18px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft, #f3f6fa); }
.roll-variant-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fabric-code { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .07em; }
.supplier-card h2 { margin-bottom: 7px; overflow-wrap: anywhere; }
.card-address { min-height: 36px; margin-bottom: 14px; color: #465365; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.card-meta { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid #edf0f3; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 58px 24px; text-align: center; background: var(--surface); border: 1px dashed #cbd4de; border-radius: 12px; }
.empty-state h2 { margin: 12px 0 6px; }
.empty-state p { margin-bottom: 18px; color: var(--muted); }
.empty-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: var(--brand); background: var(--brand-soft); font-size: 24px; }
.back-link { display: inline-flex; margin: 1px 0 22px; color: var(--muted); font-size: 14px; font-weight: 600; }
.form-panel, .detail-panel { padding: clamp(22px, 5vw, 36px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 18px #14233908; }
.form-panel h1 { font-size: 28px; }
.form-panel > .muted { margin-bottom: 26px; line-height: 1.55; }
.stack-form { display: flex; flex-direction: column; gap: 19px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 13px; font-weight: 650; }
.field b { color: var(--danger); }
.field small { color: var(--muted); font-size: 12px; font-weight: 450; }
.field input, .field textarea { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); background: #fff; border: 1px solid #cfd7e1; border-radius: 8px; outline: none; }
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .toolbar input:focus, .toolbar select:focus { border-color: #4676a4; box-shadow: 0 0 0 3px #4676a41a; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 7px; }
.form-actions form { margin: 0; }
.alert { margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; font-size: 14px; }
.alert-error { color: #872c2c; background: var(--danger-soft); border: 1px solid #f3cfcc; }
.alert-success { color: var(--success); background: var(--success-soft); border: 1px solid #cae7d5; }
.detail-panel { margin-bottom: 28px; }
.detail-heading { align-items: start; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.warehouse-detail-status { margin-bottom: 10px; }
.warehouse-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.variant-panel { margin: 0 0 13px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.variant-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.variant-heading h3 { margin: 7px 0 4px; }
.variant-heading small, .roll-row small, .movement-row small, .sale-detail-line small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.card-meta-inline { display: inline-flex; }
.roll-list, .movement-list { display: flex; flex-direction: column; }
.roll-row, .movement-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 1px solid #edf0f3; color: var(--ink); }
.roll-row:last-child, .movement-row:last-child { border-bottom: 0; }
.roll-row strong, .movement-row strong { font-size: 13px; }
.roll-row:hover { text-decoration: none; color: var(--brand); }
.roll-cost { flex: 0 0 auto; color: var(--muted); font-size: 12px; text-align: right; }
.roll-actions-panel { margin-bottom: 28px; }
.compact-form { gap: 14px; }
.transfer-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.transfer-form h3 { margin-bottom: 0; }
.movement-section { margin-top: 30px; }
.movement-row > span:last-child { flex: 0 0 auto; text-align: right; }
.sale-form-panel { max-width: 100%; }
.sale-lines-heading { margin: 6px 0 0; }
.sale-lines-heading .muted { margin: 5px 0 0; font-size: 13px; }
.sale-lines { display: flex; flex-direction: column; gap: 12px; }
.sale-line { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.sale-roll-select select, .field select { width: 100%; min-height: 44px; padding: 9px 12px; color: var(--ink); background: #fff; border: 1px solid #cfd7e1; border-radius: 8px; }
.sale-line-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sale-line-fields input { width: 100%; min-height: 44px; padding: 9px 12px; color: var(--ink); background: #fff; border: 1px solid #cfd7e1; border-radius: 8px; }
.remove-sale-line { align-self: flex-end; min-height: 30px; }
.sale-detail-lines { margin-top: 20px; }
.sale-detail-line { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sale-line-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
.sale-line-price small { text-align: right; }
.purchase-toolbar { align-items: flex-end; flex-wrap: wrap; }
.purchase-toolbar .search-field { min-width: 220px; }
.purchase-toolbar .filter-field { min-width: 190px; }
.purchase-card-status { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.purchase-status-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.purchase-status-stack .fabric-code, .purchase-status-stack h1, .purchase-status-stack > .muted { flex-basis: 100%; }
.purchase-detail-lines { margin-top: 12px; }
.purchase-detail-line { display: grid; grid-template-columns: minmax(190px, 1.2fr) minmax(250px, 1fr) auto; align-items: center; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.purchase-detail-line > div:first-child { min-width: 0; }
.purchase-detail-line > div:first-child strong { display: block; overflow-wrap: anywhere; }
.purchase-detail-line small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.purchase-line-quantities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.purchase-line-quantities dt { color: var(--muted); font-size: 11px; }
.purchase-line-quantities dd { margin: 3px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.purchase-line-form { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.remove-purchase-line { align-self: flex-end; min-height: 32px; }
.purchase-lines { display: flex; flex-direction: column; gap: 12px; }
.purchase-lines-heading { margin: 4px 0 0; }

.quote-heading-actions { display: flex; gap: 8px; }
.quote-card .card-topline { justify-content: space-between; }
.quote-form-panel { max-width: 100%; }
.quote-lines-heading { margin: 8px 0 0; }
.quote-lines-heading .muted { margin: 5px 0 0; font-size: 13px; }
.quote-lines, .quote-allocation-lines { display: flex; flex-direction: column; gap: 12px; }
.quote-line { display: grid; grid-template-columns: minmax(250px, 2fr) minmax(120px, .8fr) minmax(150px, 1fr) auto; align-items: end; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.quote-line .field input, .quote-line .field select, .quote-allocation-row .field input, .quote-allocation-row .field select { min-height: 44px; padding: 9px 12px; color: var(--ink); background: #fff; border: 1px solid #cfd7e1; border-radius: 8px; }
.quote-line .text-button { align-self: center; }
.quote-stock { grid-column: 1 / -1; min-width: 0; padding-top: 11px; border-top: 1px solid var(--line); }
.quote-stock-message { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--neutral-text); background: var(--neutral-surface); font-size: 13px; line-height: 1.5; }
.quote-stock-message.is-ok { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.quote-stock-message.is-shortage { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); }
.quote-stock-message.is-unknown { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--line); }
.quote-stock-icon { flex: 0 0 auto; min-width: 18px; font-weight: 800; text-align: center; }
.quote-stock-details { margin-top: 7px; color: var(--muted); font-size: 12px; }
.quote-stock-details summary { width: fit-content; min-height: 40px; display: flex; align-items: center; cursor: pointer; font-weight: 650; }
.quote-stock-details > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 20px; margin: 0; padding: 10px 14px 12px 30px; border-radius: 8px; background: var(--surface-muted); }
.quote-stock-details li { padding: 2px 0; }
.quote-stock-details li strong { color: var(--ink); }
.quote-stock-details li ul { margin: 4px 0 0; padding-left: 18px; }
.quote-stock-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quote-stock-meta p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.quote-stock-meta button[hidden] { display: none !important; }
.quote-calculation { padding: 17px 19px; border: 1px solid var(--line); border-radius: 11px; background: #f8fafc; }
.quote-calculation h2 { margin-bottom: 12px; }
.quote-total-row { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; color: var(--muted); font-size: 13px; }
.quote-total-row strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.quote-grand-total { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 700; }
.quote-grand-total strong { color: var(--brand); font-size: 18px; }
.quote-actions { max-width: 610px; }
.quote-info-grid { margin: 20px 0 0; }
.quote-info-grid div:first-child { grid-column: auto; }
.quote-conversion { margin-bottom: 28px; }
.quote-conversion h2 { margin-bottom: 7px; }
.quote-allocation-line { padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.quote-allocation-line > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.quote-allocation-line > div:first-child small { color: var(--muted); }
.quote-allocation-row { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(120px, .45fr) auto; align-items: end; gap: 12px; margin: 9px 0; }
.quote-allocation-row .text-button { min-height: 42px; }
.quote-allocation-total { margin: 11px 0 0; color: var(--muted); font-size: 13px; font-weight: 650; text-align: right; }
.allocation-mismatch .quote-allocation-total { color: var(--danger); }
.quote-logo-panel { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.quote-logo-panel h2 { margin-bottom: 5px; }
.quote-logo-panel .muted { margin-bottom: 6px; font-size: 13px; }
.quote-logo-actions { display: flex; align-items: center; gap: 8px; }
.company-logo-preview { max-width: 210px; max-height: 100px; object-fit: contain; }
.settings-page-heading { margin-bottom: 20px; }
.settings-page-heading .muted { max-width: 72ch; }
.settings-profile-summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.settings-profile-identity { display: flex; align-items: center; gap: 17px; min-width: 0; }
.settings-profile-logo, .settings-profile-mark { display: grid; width: 68px; height: 68px; flex: 0 0 68px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--brand-soft); color: var(--brand); object-fit: contain; font-size: 25px; font-weight: 750; }
.settings-profile-identity .eyebrow { margin-bottom: 5px; }
.settings-profile-identity h2 { margin-bottom: 4px; overflow-wrap: anywhere; }
.settings-profile-identity p:not(.eyebrow) { margin-bottom: 3px; color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.settings-form-stack { display: grid; gap: 16px; }
.settings-section { margin: 0; }
.settings-section-heading { align-items: flex-start; margin-bottom: 20px; }
.settings-section-heading h2 { margin-bottom: 4px; }
.settings-section-heading p { margin-bottom: 0; font-size: 13px; line-height: 1.5; }
.settings-section-fields { display: grid; gap: 17px; }
.settings-field-group { padding-top: 21px; border-top: 1px solid var(--line); }
.settings-field-group h3 { margin-bottom: 4px; }
.settings-field-group > .muted { margin-bottom: 15px; font-size: 13px; }
.settings-tax-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.settings-logo-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.settings-logo-content .company-logo-preview { display: block; width: min(100%, 240px); height: 112px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.settings-logo-content .empty-inline { margin: 0; color: var(--muted); }
.settings-logo-hint { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.print-document { max-width: 900px; margin: 0 auto; padding: clamp(22px, 5vw, 42px); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 4px 18px #14233908; }
.print-toolbar { display: flex; gap: 9px; justify-content: flex-end; margin-bottom: 35px; }
.print-document-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .65fr); gap: 20px; padding-bottom: 24px; border-bottom: 2px solid var(--brand); }
.print-document-header > img { max-width: 150px; max-height: 75px; object-fit: contain; grid-column: 1 / -1; }
.print-document-header h1 { margin-bottom: 6px; color: var(--brand); font-size: 25px; }
.print-document-header p, .print-customer p { margin: 3px 0; color: var(--muted); font-size: 13px; }
.print-document-meta { text-align: right; }
.print-document-meta strong, .print-customer > strong { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.print-customer { margin: 25px 0; padding: 17px; background: #f3f6f9; border-radius: 9px; }
.print-customer h2 { margin: 8px 0; }
.print-lines { width: 100%; border-collapse: collapse; }
.print-lines th, .print-lines td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.print-lines th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.print-lines th:not(:first-child), .print-lines td:not(:first-child) { text-align: right; white-space: nowrap; }
.print-totals { width: min(100%, 410px); margin: 20px 0 0 auto; }
.print-totals div { display: flex; justify-content: space-between; gap: 18px; padding: 6px 0; }
.print-totals dt { color: var(--muted); }
.print-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.print-grand-total { margin-top: 8px; padding-top: 12px !important; border-top: 1px solid var(--brand); font-size: 17px; font-weight: 750; }
.print-grand-total dd { color: var(--brand); }
.print-notes { margin-top: 26px; padding-top: 15px; border-top: 1px solid var(--line); }
.print-notes p { margin-top: 7px; white-space: pre-wrap; }

@media print {
  body { color: #111; background: #fff; }
  .topbar, .back-link, .print-toolbar { display: none !important; }
  .page-shell { max-width: none; margin: 0; padding: 0; }
  .print-document { max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  a { color: inherit; }
  @page { size: A4; margin: 15mm; }
}
.purchase-lines-heading .muted { margin: 5px 0 0; font-size: 13px; }
.purchase-workflow-panel > .section-heading { margin-bottom: 20px; }
.workflow-disclosure { margin: 17px 0; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.workflow-disclosure > summary { color: var(--brand); font-weight: 700; cursor: pointer; }
.workflow-disclosure[open] > summary { margin-bottom: 20px; }
.purchase-receipt-lines { display: flex; flex-direction: column; gap: 13px; }
.purchase-receipt-line { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.purchase-receipt-line legend { padding: 0 7px; color: var(--ink); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.purchase-receipt-line > .muted { margin: 0 0 14px; font-size: 12px; }
.purchase-receipt-line > .field { margin-top: 13px; }
.receipt-rolls-heading, .purchase-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.receipt-rolls-heading { margin: 17px 0 9px; }
.receipt-rolls-heading h3 { margin: 0; }
.receipt-roll-row { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: end; gap: 10px; padding: 10px 0; border-top: 1px solid #edf0f3; }
.receipt-roll-row .text-button { min-height: 42px; }
.purchase-history { margin-top: 24px; }
.purchase-history > h3 { margin-bottom: 12px; }
.purchase-history-item { padding: 16px 0; border-top: 1px solid var(--line); }
.purchase-history-heading { margin-bottom: 12px; }
.purchase-history-heading h3 { margin: 0; }
.purchase-history-heading small, .purchase-history-heading > span { color: var(--muted); font-size: 12px; }
.purchase-receipt-history-line { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid #edf0f3; }
.purchase-receipt-history-line > div:first-child strong { display: block; overflow-wrap: anywhere; }
.purchase-receipt-history-line small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.receipt-roll-history { display: flex; flex-wrap: wrap; gap: 8px; }
.receipt-roll-link { display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font-size: 12px; }
.receipt-roll-link span { color: var(--muted); }
.purchase-note { margin: 11px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.sale-total { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 0 4px; font-size: 16px; }
.sale-notes { margin: 20px 0 0; padding: 14px; border-radius: 8px; background: var(--canvas); color: var(--muted); }
.sale-toolbar { align-items: flex-end; flex-wrap: wrap; }
.sale-toolbar .filter-field { min-width: 190px; }
.sale-card-status { margin: -7px 0 13px; }
.sale-card-status .status-pill + .status-pill { margin-left: 5px; }
.sale-status-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.sale-status-stack .fabric-code, .sale-status-stack h1, .sale-status-stack > .muted { flex-basis: 100%; }
.payment-summary { margin-top: 24px; }
.payment-summary .section-heading { align-items: center; }
.payment-summary .info-grid { margin-bottom: 8px; }
.payment-entry-form { margin: 20px 0; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.payment-entry-form h3, .payment-history h3 { margin: 0 0 14px; }
.payment-history { margin-top: 24px; }
.payment-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf0f3; }
.payment-row:last-child { border-bottom: 0; }
.payment-row > strong { flex: 0 0 auto; }
.payment-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.eyebrow { margin: 0 0 7px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.note-scope-tabs { display: inline-flex; width: max-content; max-width: 100%; gap: 3px; margin: 0 0 14px; padding: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-muted); }
.note-scope-tabs .report-tab { min-height: 40px; padding-inline: 16px; border: 0; border-radius: 8px; }
.note-scope-tabs .report-tab.is-active { color: var(--brand-dark); background: var(--surface); box-shadow: 0 1px 3px #17233412; }
.notes-search-toolbar { align-items: end; padding: 13px; gap: 9px; }
.notes-search-toolbar .search-field { min-width: 0; }
.notes-search-toolbar input { min-height: 46px; color: var(--ink); background: var(--surface-input); border-color: var(--line); border-radius: 9px; }
.notes-search-toolbar > .button { min-height: 46px; }
.notes-result-count { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 5px; padding: 10px 0; color: var(--muted); font-size: 13px; }
.notes-result-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.notes-query-label { max-width: 60%; padding: 5px 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); text-overflow: ellipsis; white-space: nowrap; }
.notes-grid { gap: 15px; }
.note-card { display: flex; min-width: 0; min-height: 224px; flex-direction: column; padding: 19px 20px 17px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.note-card:hover { border-color: #aab9c9; background: var(--surface-hover); box-shadow: 0 5px 16px #1723340b; text-decoration: none; transform: translateY(-1px); }
.note-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.note-card-meta time { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.note-scope-pill { display: inline-flex; min-height: 27px; align-items: center; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--neutral-text); background: var(--neutral-surface); font-size: 12px; font-weight: 700; }
.note-card .note-scope-pill { max-width: min(68%, 250px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-scope-pill.is-shared { color: var(--brand-dark); border-color: var(--line); background: var(--brand-soft); }
.note-card h2 { margin: 0 0 8px; color: var(--ink); font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.note-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.note-card-open { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; margin-top: auto; padding-top: 12px; color: var(--brand); font-size: 13px; font-weight: 720; }
.note-card-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.note-card:hover .note-card-open svg { transform: translateX(3px); }
.notes-empty-state { margin-top: 4px; }
.note-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.note-detail-copy { min-width: 0; flex: 1 1 auto; }
.note-detail-heading h1 { overflow-wrap: anywhere; }
.note-detail-copy h1 { margin: 13px 0 8px; }
.note-detail-heading .muted { max-width: 70ch; margin-bottom: 0; font-size: 14px; line-height: 1.6; }
.note-detail-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin-top: 15px; color: var(--muted); font-size: 12px; }
.note-detail-meta time { color: var(--ink); font-variant-numeric: tabular-nums; }
.note-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
.note-content-wrap { padding-top: 27px; }
.note-content { max-width: 74ch; margin: 0; color: var(--ink); font-size: 16px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-empty-content { margin: 22px 0 0; color: var(--muted); }
.note-form-panel { max-width: 900px; margin-inline: auto; }
.note-form-heading { margin-bottom: 23px; }
.note-form-heading h1 { margin-bottom: 8px; }
.note-form-heading .muted { max-width: 68ch; margin: 0; line-height: 1.6; }
.note-edit-form { gap: 22px; }
.note-meta-fields { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr); align-items: start; gap: 16px; }
.note-meta-fields .field small { color: var(--muted); font-size: 12px; font-weight: 450; line-height: 1.45; }
.note-sharing-panel { display: grid; min-width: 0; gap: 12px; margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.note-sharing-panel[hidden] { display: none; }
.note-sharing-panel legend { padding: 0 7px; color: var(--ink); font-size: 14px; font-weight: 750; }
.note-sharing-panel > p { max-width: 68ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.note-share-search { max-width: 430px; }
.note-user-list { display: grid; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.note-user-option { display: grid; min-height: 61px; grid-template-columns: 22px 36px minmax(0, 1fr); align-items: center; gap: 11px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.note-user-option:last-child { border-bottom: 0; }
.note-user-option:hover { background: var(--surface-hover); }
.note-user-option[hidden] { display: none; }
.note-user-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--success-action); }
.note-person-avatar { display: inline-grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--brand-dark); background: var(--brand-soft); font-size: 13px; font-weight: 800; }
.note-user-option-copy { display: grid; min-width: 0; gap: 3px; }
.note-user-option-copy strong, .note-user-option-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-user-option-copy strong { color: var(--ink); font-size: 13px; }
.note-user-option-copy small { color: var(--muted); font-size: 12px; font-weight: 450; }
.note-share-empty { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: 13px; }
.note-visibility-readonly { margin: 0; color: var(--muted); font-size: 14px; font-weight: 500; }
.note-sharing-summary { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); align-items: start; gap: 16px; margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--line); }
.note-sharing-summary > div > strong { color: var(--ink); font-size: 14px; }
.note-sharing-summary p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.note-sharing-summary ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.note-sharing-summary li { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-muted); }
.note-sharing-summary li .note-person-avatar { width: 29px; height: 29px; font-size: 12px; }
.note-sharing-summary li > span:last-child { display: grid; min-width: 0; gap: 1px; }
.note-sharing-summary li strong { max-width: 180px; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.note-sharing-summary li small { color: var(--muted); font-size: 11px; }
.note-collaboration-hint { margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface-muted); font-size: 13px; line-height: 1.55; }
.note-collaboration-hint strong { color: var(--ink); }
.note-content-field > span { font-size: 14px; }
.note-editor { min-height: min(55vh, 520px); padding: 14px; color: var(--ink); background: var(--surface-input); border-color: var(--line); border-radius: 10px; font-size: 15px; line-height: 1.75; }
.note-hint { color: var(--muted); font-size: 12px; font-weight: 450; }
.status-history { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.status-history li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #edf0f3; }
.status-history li:last-child { border-bottom: 0; }
.status-history time { color: var(--muted); font-size: 12px; text-align: right; }
.drive-page { display: flex; flex-direction: column; gap: 22px; }
.drive-page-heading { margin-bottom: 0; align-items: center; }
.drive-page-heading h1 { margin-bottom: 7px; }
.drive-page-heading .muted { max-width: 66ch; line-height: 1.5; }
.drive-heading-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; }
.drive-heading-actions .button { min-height: 44px; }
.drive-heading-actions .drive-action-button { width: 44px; min-width: 44px; height: 44px; flex-basis: 44px; }
.drive-scope-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.drive-scope-nav .button { min-height: 42px; }
.button-icon { display: inline-grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; margin-right: 8px; }
.button-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drive-control-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 2px 8px #17233408; }
.drive-location { display: flex; min-width: 0; align-items: center; gap: 11px; }
.drive-location-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--brand); background: var(--brand-soft); }
.drive-location-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drive-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.drive-breadcrumbs a { color: var(--brand); font-weight: 650; }
.drive-breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }
.drive-search { display: flex; flex: 0 1 620px; align-items: center; gap: 8px; min-width: 0; }
.drive-search-field { position: relative; display: flex; flex: 1 1 260px; align-items: center; min-width: 120px; }
.drive-search-field input { width: 100%; min-height: 44px; padding: 0 12px 0 40px; color: var(--ink); background: var(--surface-input); border: 1px solid var(--line); border-radius: 9px; }
.drive-search-icon { position: absolute; left: 12px; display: inline-grid; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.drive-search-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.drive-search .button { min-height: 44px; }
.drive-action-button { display: inline-grid; width: 42px; min-width: 42px; height: 42px; min-height: 42px; flex: 0 0 42px; place-items: center; padding: 0; }
.drive-action-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drive-action-button:hover { transform: translateY(-1px); }
.drive-search .drive-action-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; }
.drive-trash-link { margin-left: 1px; }
.drive-results-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
.drive-results-summary .result-count, .drive-trash-count { padding: 0; margin: 0; color: var(--muted); font-size: 13px; }
.drive-result-stat, .drive-query-label { display: inline-flex; align-items: center; gap: 6px; }
.drive-result-stat svg, .drive-query-label svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drive-result-stat { margin-right: 13px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 650; }
.drive-query-label { max-width: min(32vw, 300px); color: var(--brand); }
.drive-query-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-query-clear { color: var(--muted); }
.drive-content { display: flex; flex-direction: column; gap: 25px; }
.drive-section { min-width: 0; }
.drive-section-heading { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; }
.drive-section-heading h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.drive-section-icon { display: inline-grid; width: 21px; height: 21px; place-items: center; color: var(--brand); }
.drive-section-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drive-count-pill { display: inline-grid; min-width: 24px; height: 24px; place-items: center; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 700; }
.drive-folder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.drive-folder-card { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .16s ease, box-shadow .16s ease; }
.drive-folder-card:hover { border-color: #aab9c9; box-shadow: 0 3px 10px #1723340c; }
.drive-folder-card-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.drive-file-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; color: var(--brand); background: var(--brand-soft); }
.drive-file-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drive-folder-open { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; color: var(--ink); }
.drive-folder-open:hover { color: var(--brand); text-decoration: none; }
.drive-folder-open strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-folder-open small { display: flex; min-width: 0; align-items: center; gap: 6px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.drive-access-badge { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-muted); font-size: 11px; font-weight: 700; line-height: 1; }
.drive-access-badge.is-owned { color: var(--brand); border-color: #c9d8e7; background: var(--brand-soft); }
.drive-access-badge.is-shared { color: var(--success); border-color: var(--success-border); background: var(--success-soft); }
.drive-folder-card-actions { display: flex; justify-content: flex-end; gap: 7px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.drive-list { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.drive-row { display: flex; align-items: center; gap: 13px; min-height: 72px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.drive-row:last-child { border-bottom: 0; }
.drive-row-main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; color: var(--ink); }
.drive-row-main strong { overflow-wrap: anywhere; }
.drive-row-main small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.drive-row-main small .drive-access-badge { margin-right: 3px; vertical-align: 1px; }
.drive-row-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.drive-row-actions .button { min-height: 40px; padding: 0 10px; font-size: 12px; }
.drive-empty-state { margin-top: 4px; padding: 48px 24px; }
.drive-empty-state .empty-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drive-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.drive-trash-count { margin: -7px 0 -10px; }
.drive-upload-progress { margin: 14px 0 2px; padding: 12px 14px; border: 1px solid #c6d7e7; border-radius: 9px; color: var(--brand-dark); background: var(--brand-soft); font-size: 13px; overflow-wrap: anywhere; }
.drive-upload-progress.is-error { color: var(--danger); border-color: #e8c5c2; background: var(--danger-soft); }
.drive-dialog { width: min(540px, calc(100vw - 28px)); max-width: none; padding: 25px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: var(--surface); box-shadow: 0 20px 60px #0b1b2d33; }
.drive-dialog::backdrop { background: #13223680; backdrop-filter: blur(2px); }
.drive-dialog h2 { margin: 0 0 22px; }
.drive-dialog form { display: flex; flex-direction: column; gap: 17px; }
.drive-dialog .field select { min-height: 44px; padding: 9px 12px; color: var(--ink); background: #fff; border: 1px solid #cfd7e1; border-radius: 8px; }
.drive-dialog .form-error[hidden] { display: none; }
.fabric-card-language-dialog { max-height: min(560px, calc(100dvh - 32px)); overflow: auto; }
.fabric-card-language-form { gap: 14px !important; }
.fabric-card-language-form h2, .fabric-card-language-form p { margin: 0; }
.fabric-card-language-form .muted { color: var(--muted); font-size: 14px; line-height: 1.5; }
.fabric-card-language-options { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
.fabric-card-language-option { display: flex; min-height: 58px; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); cursor: pointer; }
.fabric-card-language-option:hover { background: var(--surface-hover); }
.fabric-card-language-option input { width: 19px; height: 19px; flex: 0 0 auto; margin: 0; accent-color: var(--success-action); }
.fabric-card-language-option span { display: grid; gap: 3px; }
.fabric-card-language-option strong { font-size: 14px; }
.fabric-card-language-option small { color: var(--muted); font-size: 12px; }
.fabric-card-language-form .form-actions { justify-content: flex-end; margin-top: 3px; }
.fiber-type-list { display: grid; gap: 10px; }
.fiber-type-row { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fiber-type-edit-form, .fiber-type-create-form { display: grid; gap: 12px; }
.fiber-type-edit-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.fiber-type-create-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.fiber-type-edit-fields { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.fiber-type-edit-fields .field { min-width: 0; gap: 6px; }
.fiber-type-edit-fields .field input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface-input); }
.fiber-type-edit-fields .field small { display: block; color: var(--muted); font-size: 12px; font-weight: 450; line-height: 1.4; }
.fiber-type-edit-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.fiber-type-edit-actions .button { min-height: 40px; padding-inline: 11px; font-size: 12px; }
.fiber-type-edit-form .form-error, .fiber-type-create-form .form-error { grid-column: 1 / -1; }
.drive-share-dialog { max-height: min(760px, calc(100dvh - 32px)); overflow: auto; }
.drive-share-dialog form { gap: 13px; }
.drive-share-heading-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--brand); background: var(--brand-soft); }
.drive-share-heading-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drive-share-dialog h2 { margin: 0; }
.drive-share-dialog [data-drive-share-item] { margin: -5px 0 0; color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.drive-share-help { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.drive-share-users { display: flex; max-height: min(380px, 42dvh); flex-direction: column; gap: 7px; overflow: auto; padding: 2px; }
.drive-share-user { display: grid; grid-template-columns: 20px 34px minmax(0, 1fr) minmax(128px, auto); align-items: center; gap: 10px; min-height: 60px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-muted); cursor: pointer; }
.drive-share-user > input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }
.drive-share-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: 13px; font-weight: 750; }
.drive-share-user-name { display: grid; min-width: 0; gap: 2px; }
.drive-share-user-name strong, .drive-share-user-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-share-user-name strong { color: var(--ink); font-size: 13px; }
.drive-share-user-name small { color: var(--muted); font-size: 11px; }
.drive-share-user select { width: 100%; min-height: 40px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface-input); font-size: 12px; }
.detail-heading h1 { overflow-wrap: anywhere; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin: 22px 0; }
.info-grid div:first-child { grid-column: 1 / -1; }
.info-grid dt { margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 650; }
.info-grid dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.text-button { display: inline-flex; align-items: center; min-height: 44px; padding: 3px 4px; border: 0; background: transparent; color: var(--brand); font-size: 13px; font-weight: 650; cursor: pointer; }
.text-danger { color: var(--danger); }
.contacts-section { padding: 4px 0; }
.section-heading { margin-bottom: 14px; }
.section-heading h2 { margin-bottom: 0; }
.contact-list { display: flex; flex-direction: column; gap: 10px; }
.contact-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; }
.contact-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.contact-avatar { flex: 0 0 auto; border-radius: 50%; }
.contact-main h3 { overflow-wrap: anywhere; }
.contact-main a, .contact-main .muted { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.contact-actions { display: flex; align-items: center; gap: 15px; flex: 0 0 auto; }
.delete-contact-form { display: flex; align-items: center; gap: 5px; }
.delete-contact-form label { color: var(--muted); font-size: 12px; }
.empty-inline { padding: 18px; background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); }
.empty-inline p { margin-bottom: 8px; }
.loading-state { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 260px; color: var(--muted); }
.loading-spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }
.form-error { padding: 12px 14px; border: 1px solid #f3cfcc; border-radius: 8px; color: #872c2c; background: var(--danger-soft); font-size: 14px; }
button:disabled { cursor: wait; opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1100px) {
  .notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .supplier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 700px) {
  .fiber-type-edit-form, .fiber-type-create-form { grid-template-columns: minmax(0, 1fr); }
  .fiber-type-edit-fields { grid-template-columns: minmax(0, 1fr); }
  .fiber-type-edit-actions { justify-content: flex-start; }
  .fiber-type-edit-form .form-error, .fiber-type-create-form .form-error { grid-column: auto; }
  .fabric-card-language-form .form-actions { flex-wrap: wrap; }
  .fabric-card-language-form .form-actions .button { flex: 1 1 120px; }
}
@media (max-width: 600px) {
  .topbar { min-height: 60px; padding: 7px 17px; flex-wrap: wrap; }
  .topbar > .button { display: none; }
  .section-nav { flex: 1 1 100%; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .section-nav::-webkit-scrollbar { display: none; }
  .nav-link { padding: 0 7px; font-size: 12px; }
  .page-shell { padding: 29px 16px 54px; }
  .page-heading { align-items: start; }
  .mobile-add { display: inline-flex; }
  .toolbar { flex-wrap: wrap; }
  .search-field { flex-basis: 100%; }
  .filter-field { flex: 1; }
  .filter-field select { width: 100%; }
  .supplier-grid { grid-template-columns: 1fr; }
  .notes-grid { grid-template-columns: 1fr; }
  .supplier-card { padding: 16px; }
  .form-row, .info-grid { grid-template-columns: 1fr; }
  .info-grid div:first-child { grid-column: auto; }
  .detail-heading { flex-direction: column; }
  .note-detail-heading { flex-direction: column; }
  .note-sharing-summary { grid-template-columns: 1fr; gap: 12px; }
  .note-actions { width: 100%; }
  .note-actions .button { flex: 1 1 auto; }
  .note-meta-fields { grid-template-columns: 1fr; gap: 17px; }
  .notes-search-toolbar .search-field { flex: 1 1 100%; }
  .notes-search-toolbar > .button { flex: 0 1 auto; }
  .warehouse-actions { width: 100%; justify-content: flex-start; }
  .variant-heading { align-items: flex-start; flex-direction: column; }
  .variant-heading .contact-actions { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
  .sale-line-fields { grid-template-columns: 1fr 1fr; }
  .sale-toolbar { align-items: stretch; }
  .sale-toolbar .filter-field { flex: 1 1 100%; }
  .sale-detail-line { align-items: flex-start; flex-direction: column; }
  .sale-line-price { align-items: flex-start; }
  .sale-line-price small { text-align: left; }
  .purchase-toolbar { align-items: stretch; }
  .purchase-toolbar .search-field, .purchase-toolbar .filter-field { flex: 1 1 100%; }
  .purchase-detail-line { grid-template-columns: 1fr; align-items: start; gap: 10px; }
  .purchase-line-quantities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .purchase-detail-line > strong { text-align: right; }
  .receipt-roll-row { grid-template-columns: 1fr 1fr; }
  .receipt-roll-row .text-button { grid-column: 1 / -1; justify-self: end; }
  .purchase-history-heading { align-items: flex-start; flex-direction: column; }
  .contact-card { align-items: flex-start; flex-direction: column; }
  .contact-actions { width: 100%; justify-content: flex-end; }
  .section-heading { align-items: flex-end; }
  .drive-page { gap: 17px; }
  .drive-page-heading { align-items: flex-start; }
  .drive-heading-actions { width: 100%; justify-content: stretch; }
  .drive-heading-actions .button { flex: 1 1 145px; }
  .drive-scope-nav .button { flex: 1 1 150px; }
  .drive-control-panel { align-items: stretch; flex-direction: column; gap: 13px; padding: 13px; }
  .drive-location { align-items: flex-start; }
  .drive-breadcrumbs { padding-top: 9px; }
  .drive-search { flex-wrap: wrap; }
  .drive-search-field { flex: 1 1 100%; }
  .drive-search .button:not(.drive-action-button) { flex: 1 1 calc(50% - 5px); }
  .drive-search .drive-action-button { flex-basis: 44px; }
  .drive-folder-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .drive-folder-card { padding: 12px; }
  .drive-folder-card-actions .drive-action-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; }
  .drive-row { align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 13px; }
  .drive-row-main { flex: 1 1 calc(100% - 55px); padding-top: 2px; }
  .drive-row-actions { flex: 1 1 100%; justify-content: flex-start; padding-left: 52px; }
  .drive-row-actions .button { min-height: 44px; flex: 1 1 auto; }
  .drive-row-actions .drive-action-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; }
  .drive-share-user { grid-template-columns: 20px 32px minmax(0, 1fr); gap: 8px; padding: 8px; }
  .drive-share-user select { grid-column: 2 / 4; }
  .drive-results-summary { align-items: flex-start; }
  .drive-result-stat { margin-right: 9px; }
  .drive-query-label { max-width: min(38vw, 220px); }
  .drive-trash-count { justify-content: flex-start; }
  .drive-empty-state { padding: 38px 17px; }
  .drive-empty-actions { width: 100%; }
  .drive-empty-actions .button { flex: 1 1 150px; }
  .drive-dialog { padding: 21px 17px; }
}

@media (min-width: 601px) and (max-width: 980px) {
  .drive-control-panel { align-items: stretch; flex-direction: column; }
  .drive-search { flex: 1 1 auto; }
  .drive-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.account-menu { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 650; white-space: nowrap; }
.auth-card { width: min(100%, 480px); margin: clamp(10px, 7vh, 64px) auto 0; padding: clamp(22px, 5vw, 36px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 24px #1423390b; }
.auth-card h1 { margin-bottom: 9px; }
.auth-card > .muted { margin-bottom: 26px; line-height: 1.55; }
.auth-card .form-actions { margin-top: 4px; }
.auth-card .form-actions .button { min-width: 150px; }
.user-page-heading { align-items: end; }
.user-summary { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: -10px 0 16px; color: var(--muted); font-size: 13px; }
.user-summary strong { margin-right: 5px; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.user-list-filters { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(150px, .48fr) minmax(150px, .42fr) auto; align-items: end; gap: 12px; margin-bottom: 22px; }
.user-list-filters .field { min-width: 0; gap: 6px; }
.user-list-filters input, .user-list-filters select { width: 100%; min-height: 44px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface-input, var(--surface)); }
.user-filter-actions { display: flex; align-items: center; gap: 4px; }
.user-results-heading { align-items: baseline; margin-bottom: 11px; }
.user-results-heading h2 { margin: 0; }
.user-results-heading .muted { margin: 0; font-size: 12px; }
.user-table { min-width: 0; }
.user-table th:last-child, .user-table td:last-child { width: 120px; text-align: right; }
.user-list-identity { display: flex; min-width: 0; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.user-list-identity strong { color: var(--ink); font-size: 14px; }
.user-list-identity small, .user-list-note { color: var(--muted); font-size: 12px; }
.user-list-note { display: block; margin-top: 5px; }
.user-edit-link { min-height: 40px; }
.user-card-list { display: none; }
.user-card { display: grid; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); }
.user-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.user-card-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.user-card-details div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.user-card-details dt { color: var(--muted); font-size: 11px; }
.user-card-details dd { margin: 0; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.user-empty-state { text-align: center; }
.user-empty-state p { color: var(--muted); }
.user-breadcrumb { margin: -8px 0 18px; }
.user-editor-stack { display: grid; gap: 17px; }
.user-editor-panel, .user-security-panel { padding: clamp(20px, 3vw, 30px); }
.user-section-heading { margin-bottom: 21px; }
.user-section-heading h2 { margin-bottom: 5px; }
.user-section-heading p { margin-bottom: 0; }
.user-editor-form { display: grid; gap: 17px; }
.user-editor-form .field { min-width: 0; }
.user-editor-form .field input, .user-editor-form .field select { width: 100%; min-height: 47px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface-input, var(--surface)); }
.user-editor-form .field input[readonly] { color: var(--muted); }
.user-editor-form .field small { color: var(--muted); font-size: 12px; }
.user-editor-form .field .field-error { color: var(--danger); }
.user-editor-form .field .field-error[hidden] { display: none; }
.user-active-control { display: flex; align-items: center; gap: 10px; min-height: 46px; width: fit-content; color: var(--ink); font-size: 14px; font-weight: 650; }
.user-active-control input { width: 20px; height: 20px; accent-color: var(--brand); }
.user-account-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.user-account-meta span { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.user-account-meta strong { color: var(--ink); font-size: 12px; }
.user-editor-form .form-error { margin: 0; }
.user-editor-form .form-actions { justify-content: flex-start; margin-top: 0; }
.user-reset-actions { display: grid; justify-items: start; gap: 10px; }
.user-reset-actions .form-error { margin: 0; }
.temporary-password-result { display: grid; gap: 13px; margin-top: 18px; padding: 17px; border-radius: 12px; }
.temporary-password-result h2 { margin-bottom: 5px; font-size: 17px; }
.temporary-password-result p { margin-bottom: 0; }
.temporary-password-result .field { gap: 6px; }
.temporary-password-result input { width: 100%; min-height: 46px; padding: 9px 12px; border: 1px solid var(--success-border, #cae7d5); border-radius: 9px; color: var(--ink); background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; letter-spacing: .02em; user-select: all; }
.temporary-password-result .button { justify-self: start; }
.temporary-password-copy-status { min-height: 1.4em; color: var(--success); font-size: 13px; }
.temporary-password-copy-status.is-error { color: var(--danger); }
.user-success-actions { justify-content: flex-start; margin-top: 18px; }
.audit-table { min-width: 760px; }
.audit-table td small { display: block; max-width: 210px; margin-top: 3px; color: var(--muted); overflow-wrap: anywhere; }
.audit-changes { display: flex; flex-direction: column; gap: 7px; }
.audit-change { display: flex; flex-direction: column; gap: 2px; }
.audit-change small { color: var(--muted); font-variant-numeric: tabular-nums; }
.audit-action { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.audit-update { background: #fff4d9; color: #80540e; }
.audit-delete { background: var(--danger-soft); color: var(--danger); }
.audit-page-heading { align-items: center; }
.audit-page-heading > div:first-child { min-width: 0; }
.audit-page-heading h1 { margin-bottom: 6px; }
.audit-total-count { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--brand-dark); background: var(--brand-soft); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.audit-filter-panel { display: grid; gap: 0; margin-bottom: 28px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 8px #17233408; }
.audit-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 10px; padding: 18px; }
.audit-filter-panel .field { gap: 6px; }
.audit-filter-panel input, .audit-filter-panel select { width: 100%; min-height: 46px; padding: 9px 12px; color: var(--ink); background: var(--surface-input); border: 1px solid var(--line); border-radius: 9px; }
.audit-search-field { min-width: 0; }
.audit-search-row > .button { min-height: 46px; }
.audit-advanced-filters { margin: 0 18px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.audit-advanced-filters summary { position: relative; display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 40px 0 14px; color: var(--ink); font-size: 13px; font-weight: 720; cursor: pointer; list-style: none; }
.audit-advanced-filters summary::-webkit-details-marker { display: none; }
.audit-advanced-filters summary::after { position: absolute; top: calc(50% - 6px); right: 17px; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: rotate(45deg); transition: transform .16s ease; }
.audit-advanced-filters[open] summary::after { transform: rotate(225deg); }
.audit-advanced-filters summary small { color: var(--muted); font-size: 12px; font-weight: 500; text-align: right; }
.audit-advanced-filters[open] summary { border-bottom: 1px solid var(--line); }
.audit-advanced-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 13px; padding: 15px; }
.audit-advanced-grid .field { min-width: 0; }
.audit-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.audit-results-heading h2 { margin: 0 0 3px; color: var(--ink); font-size: 18px; }
.audit-results-heading p { margin: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.audit-operation-list { display: flex; flex-direction: column; gap: 9px; }
.audit-operation-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); min-width: 0; gap: 18px; padding: 17px 19px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.audit-operation-card:hover { border-color: #b9c8d8; box-shadow: 0 4px 14px #1723340b; }
.audit-operation-time { display: flex; flex-direction: column; gap: 5px; padding-right: 16px; border-right: 1px solid var(--line); }
.audit-operation-time > span { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.audit-operation-time time { display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.audit-operation-time time strong { color: var(--ink); font-size: 15px; font-weight: 750; }
.audit-operation-time time small { color: var(--muted); font-size: 12px; }
.audit-operation-body, .audit-operation-copy { min-width: 0; }
.audit-operation-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.audit-operation-title { display: inline-block; color: var(--ink); font-size: 15px; font-weight: 740; line-height: 1.4; letter-spacing: -.01em; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.audit-operation-title:hover { color: var(--brand); text-decoration-color: currentColor; }
.audit-operation-actor { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.audit-operation-actor > span:first-child { margin-right: 2px; }
.audit-operation-actor .muted { color: var(--muted); }
.audit-event-count { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-muted); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.audit-more-entities { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.audit-entity-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; }
.audit-entity-link { display: inline-flex; min-height: 30px; align-items: center; max-width: 100%; padding: 4px 9px; color: var(--brand-dark); background: var(--brand-soft); border-radius: 7px; font-size: 12px; overflow-wrap: anywhere; }
.audit-entity-link:hover { text-decoration: underline; }
.audit-entity-plain { color: #455468; background: #edf1f5; }
.audit-unknown-actor { color: #754e12; }
.audit-legacy-note { display: block; margin-top: 10px; color: #754e12; font-size: 12px; }
.audit-empty-state { margin-top: 2px; }
.audit-pagination { margin: 20px 0; }
.audit-detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.audit-detail-heading .muted { margin-bottom: 0; }
.audit-operation-count { flex: 0 0 auto; color: var(--muted); font-size: 13px; }
.audit-detail-entities, .audit-detail-events { margin-top: 22px; }
.audit-detail-entities h2, .audit-detail-events h2 { margin-bottom: 10px; }
.audit-event-detail { padding: 16px 0; border-top: 1px solid var(--line); }
.audit-event-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.audit-event-heading > div { min-width: 0; overflow-wrap: anywhere; }
.audit-event-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.audit-event-heading time { color: var(--muted); font-size: 12px; text-align: right; }
.audit-field-changes { margin: 13px 0 0; }
.audit-field-changes > div { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.7fr); gap: 15px; padding: 9px 0; border-top: 1px solid #edf0f3; }
.audit-field-changes dt { color: var(--muted); font-size: 12px; }
.audit-field-changes dd { display: flex; align-items: baseline; gap: 9px; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.audit-field-changes dd span { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.audit-field-changes dd b { color: #738195; font-weight: 500; }
.audit-timeline-panel { margin-top: 0; }
.audit-timeline-panel .section-heading { align-items: start; }
.audit-timeline-panel .section-heading h2 { margin-bottom: 5px; }
.audit-timeline-panel .section-heading p { margin-bottom: 0; }
.audit-timeline-list { margin: 0; padding: 0; list-style: none; }
.audit-timeline-list li { padding: 12px 0; border-top: 1px solid #edf0f3; }
.audit-timeline-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; color: var(--ink); }
.audit-timeline-list small { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.text-link { color: var(--brand); font-size: 13px; font-weight: 680; text-underline-offset: 3px; }
.return-history-card > .text-link { display: inline-flex; margin: 0 0 14px; }

@media (max-width: 900px) {
  .user-list-filters { grid-template-columns: minmax(200px, 1fr) repeat(2, minmax(130px, .5fr)); }
  .user-filter-actions { grid-column: 1 / -1; }
  .user-table-wrap { display: none; }
  .user-card-list { display: grid; gap: 10px; }
  .audit-advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .account-menu { margin-left: 0; }
  .account-menu [data-user-name] { display: none; }
  .auth-card { margin-top: 22px; }
  .user-page-heading { align-items: stretch; }
  .user-page-heading > .button { width: 100%; }
  .user-list-filters { grid-template-columns: 1fr; padding: 13px; }
  .user-filter-actions { grid-column: auto; }
  .user-filter-actions .button { flex: 1; }
  .user-card .user-edit-link { width: 100%; }
  .user-editor-panel, .user-security-panel { padding: 18px 16px; }
  .user-editor-form { gap: 15px; }
  .user-editor-form .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .user-success-actions { flex-direction: column; align-items: stretch; }
  .user-editor-form .form-actions .button, .user-success-actions .button { width: 100%; }
  .user-account-meta { grid-template-columns: 1fr; }
  .temporary-password-result { padding: 14px; }
  .temporary-password-result .button { width: 100%; }
  .user-filter-actions { flex-wrap: wrap; }
  .audit-page-heading { align-items: flex-start; }
  .audit-total-count { margin-top: 2px; }
  .audit-search-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 14px; }
  .audit-search-field { grid-column: 1 / -1; }
  .audit-search-row > .button { width: 100%; padding-inline: 9px; white-space: normal; }
  .audit-advanced-filters { margin: 0 14px 14px; }
  .audit-advanced-filters summary { align-items: flex-start; flex-direction: column; justify-content: center; gap: 1px; padding-block: 9px; }
  .audit-advanced-filters summary small { text-align: left; }
  .audit-advanced-grid { grid-template-columns: 1fr; gap: 12px; padding: 13px; }
  .audit-operation-card { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 15px; }
  .audit-operation-time { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0; border-right: 0; }
  .audit-operation-time time { display: flex; align-items: baseline; gap: 7px; }
  .audit-operation-time time strong { font-size: 13px; }
  .audit-operation-main { align-items: flex-start; gap: 8px; }
  .audit-operation-title { font-size: 14px; }
  .audit-event-count { white-space: nowrap; }
  .audit-event-heading { grid-template-columns: minmax(0, 1fr) auto; }
  .audit-event-heading time { grid-column: 1 / -1; text-align: left; }
  .audit-field-changes > div { grid-template-columns: 1fr; gap: 5px; }
  .audit-timeline-list a { align-items: flex-start; flex-direction: column; gap: 4px; }
  .audit-pagination { flex-wrap: wrap; gap: 9px; }
}

.report-tabs { display: flex; gap: 6px; margin: -7px 0 22px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.report-tabs::-webkit-scrollbar { display: none; }
.report-tab { display: inline-flex; min-height: 43px; align-items: center; padding: 0 14px; color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; border-bottom: 2px solid transparent; }
.report-tab.is-active { color: var(--brand); box-shadow: inset 0 -2px var(--brand); }
.report-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 22px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.report-filters .field { gap: 6px; }
.report-filters .field input, .report-filters .field select, .stocktake-start-form .field input, .stocktake-start-form .field select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #cfd7e1; border-radius: 8px; color: var(--ink); background: #fff; }
.report-search { grid-column: span 2; }
.report-check { display: flex; align-items: center; align-self: end; gap: 8px; min-height: 42px; color: var(--muted); font-size: 13px; }
.report-check input { width: 17px; height: 17px; accent-color: var(--brand); }
.report-filter-actions { display: flex; align-items: end; gap: 8px; }
.report-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 23px; }
.report-metrics article { display: flex; flex-direction: column; gap: 6px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.report-metrics article span { color: var(--muted); font-size: 12px; }
.report-metrics article strong { color: var(--brand-dark); font-size: 22px; font-variant-numeric: tabular-nums; }
.report-section { margin: 0 0 25px; padding: 21px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 8px #14233908; }
.report-section .section-heading { align-items: center; margin-bottom: 15px; }
.report-section .section-heading h2 { margin: 0 0 5px; }
.report-section .section-heading .muted { margin: 0; font-size: 13px; }
.profitability-table { min-width: 1050px; }
.profitability-note { max-width: 75ch; margin: 8px auto 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.profitability-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.profitability-detail-grid > div { display: flex; flex-direction: column; gap: 6px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 9px; }
.profitability-detail-grid span { color: var(--muted); font-size: 12px; }
.profitability-detail-grid strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 8px 0 23px; }
.dashboard-heading h1 { margin: 0 0 5px; font-size: clamp(28px, 4vw, 36px); letter-spacing: -.035em; }
.dashboard-heading .muted { margin: 0; }
.dashboard-summary-line { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 22px; padding: 13px 16px; border: 1px solid var(--line); color: var(--muted); background: #f4f7fa; border-radius: 9px; font-size: 13px; }
.dashboard-summary-line strong { margin-right: 4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 17px; }
.dashboard-section { min-width: 0; padding: 19px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 8px #14233908; }
.dashboard-section h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.015em; }
.dashboard-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.dashboard-section-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.dashboard-section-heading .text-link { flex: 0 0 auto; color: var(--brand); font-size: 12px; font-weight: 700; }
.dashboard-list { display: flex; flex-direction: column; }
.dashboard-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-width: 0; padding: 12px 2px; border-top: 1px solid #edf0f3; color: var(--ink); text-decoration: none; }
.dashboard-row:hover { color: var(--brand); text-decoration: none; }
.dashboard-row-main, .dashboard-row-meta, .dashboard-activity-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dashboard-row-main strong, .dashboard-row-meta strong, .dashboard-activity-copy strong { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.dashboard-row-main strong small { margin-left: 5px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.dashboard-row-main > span, .dashboard-row-meta small, .dashboard-activity-copy > span { color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.dashboard-row-meta { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.dashboard-late { color: var(--danger) !important; }
.dashboard-more { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.dashboard-empty { margin: 0; padding: 13px 2px 2px; border-top: 1px solid #edf0f3; color: var(--muted); font-size: 13px; }
.dashboard-currency-totals { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dashboard-currency-total { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 8px 10px; border-radius: 7px; background: #f4f7fa; color: #465365; font-size: 11px; font-variant-numeric: tabular-nums; }
.dashboard-currency-total strong { color: var(--brand-dark); }
.dashboard-activity-section { grid-column: 1 / -1; }
.dashboard-activity-row { align-items: center; }
.dashboard-activity-copy { flex: 1; }
.document-dates-panel { padding-top: 19px; padding-bottom: 19px; }
.compact-date-form { display: flex; align-items: flex-end; gap: 11px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf0f3; }
.compact-date-form:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.compact-date-form .field { flex: 1; }
.compact-date-form input { min-height: 42px; padding: 8px 10px; border: 1px solid #cfd7e1; border-radius: 8px; color: var(--ink); background: #fff; }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.data-table th { padding: 11px 12px; color: var(--muted); background: #f7f9fb; font-size: 11px; font-weight: 750; white-space: nowrap; }
.data-table td { padding: 12px; border-top: 1px solid #edf0f3; vertical-align: middle; }
.data-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.data-table a { color: var(--brand); }
.number-cell { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-empty { padding: 27px !important; color: var(--muted); text-align: center; }
.status-neutral { color: #455468; background: #edf1f5; }
.status-warning { color: #80540e; background: #fff4d9; }
.text-success { color: var(--success); font-weight: 700; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; color: var(--muted); font-size: 13px; }
.pagination [aria-disabled="true"] { pointer-events: none; opacity: .45; }
.stocktake-start-panel { background: linear-gradient(135deg, #fff 0%, #f8fbfd 100%); }
.stocktake-start-form { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(200px, 1.3fr) auto; align-items: end; gap: 13px; }
.stocktake-history-list { display: flex; flex-direction: column; gap: 8px; }
.stocktake-history-card { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 14px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; }
.stocktake-history-card:hover { text-decoration: none; border-color: #aab9c9; }
.stocktake-history-card > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stocktake-history-card small { color: var(--muted); font-size: 12px; }
.stocktake-detail { padding: clamp(18px, 4vw, 30px); }
.stocktake-detail .detail-heading { margin-bottom: 17px; }
.stocktake-detail .detail-heading .muted { margin: 5px 0 0; font-size: 13px; }
.stocktake-note { margin: 16px 0; padding: 12px 14px; border-radius: 8px; background: #f7f9fb; color: var(--muted); font-size: 13px; }
.blind-count-note { margin: 0 0 17px; padding: 12px 14px; border: 1px solid #cbd9e7; border-radius: 9px; color: var(--brand-dark); background: var(--brand-soft); font-size: 13px; }
.stocktake-count-form, .stocktake-readonly { gap: 18px; }

.account-tabs { margin-top: -7px; }
.account-totals, .account-summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px; margin: 0 0 20px; }
.account-totals article, .account-summary-cards article { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.account-totals article > span, .account-summary-cards article > span { color: var(--muted); font-size: 12px; }
.account-totals article strong, .account-summary-cards article strong { color: var(--brand-dark); font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.account-totals article small, .account-summary-cards article small { color: var(--muted); font-size: 11px; }
.account-toolbar { align-items: end; flex-wrap: wrap; }
.account-toolbar .search-field { min-width: 240px; }
.account-toolbar .filter-field { min-width: 145px; }
.account-toolbar .account-asof-field { min-width: 150px; }
.account-toolbar .field input, .account-toolbar .field select, .account-currency-toolbar select, .account-statement-filter input { min-height: 42px; padding: 8px 10px; border: 1px solid #cfd7e1; border-radius: 8px; color: var(--ink); background: #fff; }
.account-toolbar .field input { width: 100%; }
.account-table-balances { display: flex; flex-wrap: wrap; gap: 9px 16px; }
.account-table-balance { display: inline-flex; flex-direction: column; gap: 2px; min-width: 120px; }
.account-table-balance strong { font-variant-numeric: tabular-nums; }
.account-table-balance small { color: var(--muted); }
.account-company-summary { margin-bottom: 26px; }
.account-company-summary .section-heading { margin-bottom: 14px; }
.account-company-summary .section-heading h2 { margin-bottom: 0; }
.account-balance-list { display: flex; flex-direction: column; gap: 8px; }
.account-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; }
.account-balance-row:hover { border-color: #aab9c9; text-decoration: none; }
.account-balance-row > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.account-balance-row strong { font-variant-numeric: tabular-nums; }
.account-balance-row small, .account-balance-open { color: var(--muted); font-size: 12px; }
.account-balance-open { flex: 0 0 auto; color: var(--brand); font-weight: 700; }
.account-empty-balance { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 13px; border: 1px dashed var(--line); border-radius: 9px; }
.account-currency-toolbar { display: flex; justify-content: flex-end; margin: -10px 0 15px; }
.account-currency-toolbar .field { min-width: 150px; }
.account-currency-toolbar select { width: 100%; }
.account-opening-panel { margin-bottom: 20px; }
.account-opening-panel .section-heading { margin-bottom: 16px; }
.account-opening-panel .section-heading h2 { margin-bottom: 4px; }
.account-statement-section { padding: clamp(15px, 3vw, 22px); }
.account-statement-filter { align-items: end; flex-wrap: wrap; margin-bottom: 16px; box-shadow: none; }
.account-statement-filter .field { flex: 1 1 160px; }
.account-statement-filter .field input { width: 100%; }
.account-positive { color: var(--success); font-weight: 700; }
.account-negative { color: var(--danger); font-weight: 700; }
.account-statement-table { min-width: 790px; }

@media (max-width: 760px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-activity-section { grid-column: auto; }
  .dashboard-section { padding: 17px; }
  .accounts-table { min-width: 690px; }
}

@media (max-width: 600px) {
  .account-toolbar .search-field, .account-toolbar .filter-field, .account-toolbar .account-asof-field { flex: 1 1 100%; min-width: 0; }
  .account-summary-cards { grid-template-columns: 1fr; }
  .account-currency-toolbar { justify-content: stretch; margin-top: 0; }
  .account-currency-toolbar .field { width: 100%; }
  .account-statement-filter { align-items: stretch; }
  .account-statement-filter .field { flex: 1 1 100%; }
  .account-company-summary .section-heading { align-items: flex-start; }
  .account-company-summary .section-heading .button { flex: 0 0 auto; }
  .account-totals { grid-template-columns: 1fr; }
}
.stocktake-table input { width: 130px; min-height: 40px; padding: 7px 9px; border: 1px solid #cfd7e1; border-radius: 7px; text-align: right; font-variant-numeric: tabular-nums; }
.stocktake-count-form .form-actions, .stocktake-readonly .form-actions { flex-wrap: wrap; align-items: center; }
.stocktake-count-form .text-button { margin-left: auto; }

.return-lines { display: flex; flex-direction: column; gap: 13px; }
.return-line { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.return-line legend { padding: 0 6px; color: var(--brand-dark); font-weight: 750; }
.return-line > .muted { margin: 0 0 14px; font-size: 13px; }
.return-line .form-row { margin-bottom: 12px; }
.waste-line { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(110px, .5fr) minmax(180px, 1fr) auto; align-items: end; gap: 12px; }
.waste-line .text-button { min-height: 44px; }
.purchase-return-line { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(120px, .45fr) minmax(180px, 1fr); align-items: end; gap: 12px; }
.purchase-return-line[hidden] { display: none; }
.return-roll-choice { display: flex; align-items: center; align-self: center; gap: 10px; min-height: 44px; cursor: pointer; }
.return-roll-choice input { width: 18px; height: 18px; flex: none; accent-color: var(--brand); }
.return-roll-choice span { display: flex; flex-direction: column; gap: 3px; }
.return-roll-choice small { color: var(--muted); line-height: 1.4; }
.return-history-card { margin-top: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.return-history-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.return-history-heading > div { display: flex; flex-direction: column; gap: 4px; }
.return-history-heading small { color: var(--muted); font-size: 12px; }
.return-history-heading > strong { text-align: right; white-space: nowrap; }
.return-line-summary { margin: 13px 0; padding-left: 21px; color: #465365; font-size: 13px; line-height: 1.6; }
.return-refund-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid #edf0f3; }
.eyebrow { margin-bottom: 7px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .1em; }

@media (max-width: 760px) {
  .report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-search { grid-column: span 2; }
  .stocktake-start-form { grid-template-columns: 1fr 1fr; }
  .stocktake-start-form > button { grid-column: 1 / -1; justify-self: start; }
  .report-section { padding: 16px; }
  .data-table { min-width: 720px; }
  .profitability-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .waste-line { grid-template-columns: 1fr 1fr; }
  .waste-line .field:nth-child(3) { grid-column: 1 / -1; }
  .waste-line .text-button { grid-column: 1 / -1; justify-self: end; }
  .purchase-return-line { grid-template-columns: 1fr 1fr; }
  .purchase-return-line .return-roll-choice { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .dashboard-heading { align-items: flex-start; }
  .dashboard-heading > .button { flex: 0 0 auto; min-height: 40px; padding: 0 12px; }
  .dashboard-summary-line { gap: 8px 14px; padding: 11px 12px; }
  .dashboard-section { padding: 14px; }
  .dashboard-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .dashboard-row { align-items: flex-start; gap: 8px; }
  .dashboard-row-main { flex: 1; }
  .dashboard-row-meta { max-width: 38%; }
  .compact-date-form { align-items: stretch; flex-direction: column; }
  .compact-date-form .button { width: 100%; }
  .report-filters { grid-template-columns: 1fr; padding: 14px; }
  .report-search { grid-column: auto; }
  .report-filter-actions { grid-column: auto; }
  .report-filter-actions .button { flex: 1; }
  .report-metrics { gap: 8px; }
  .report-metrics article { padding: 14px; }
  .report-metrics article strong { font-size: 18px; }
  .report-section .section-heading { align-items: flex-start; flex-direction: column; }
  .report-section .section-heading > .button { width: 100%; }
  .profitability-detail-grid { grid-template-columns: 1fr; }
  .stocktake-start-form { grid-template-columns: 1fr; }
  .stocktake-start-form > button { grid-column: auto; width: 100%; }
  .stocktake-history-card { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .stocktake-history-card > span:last-child { display: none; }
  .pagination { gap: 8px; }
  .pagination .button { padding: 0 10px; font-size: 12px; }
  .return-line { padding: 13px; }
  .return-history-heading { flex-direction: column; }
  .return-history-heading > strong { text-align: left; }
  .waste-line, .purchase-return-line { grid-template-columns: 1fr; }
  .waste-line .field:nth-child(3), .waste-line .text-button, .purchase-return-line .return-roll-choice { grid-column: auto; }
  .waste-line .text-button { justify-self: end; }
  .stocktake-count-form .form-actions > .button { flex: 1; }
  .stocktake-count-form .text-button { margin-left: 0; }
}

/* Immutable partner profit distributions */
.profit-distribution-filters { display: grid; grid-template-columns: minmax(190px, 1.4fr) repeat(3, minmax(150px, 1fr)) auto; align-items: end; gap: 11px; }
.profit-distribution-filters .field { min-width: 0; }
.profit-share-list { display: grid; gap: 10px; }
.profit-share-list-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: 13px; min-width: 0; padding: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.profit-share-list-card:hover { text-decoration: none; border-color: var(--brand); box-shadow: 0 3px 13px #14233910; }
.profit-share-avatar { display: grid; width: 42px; height: 42px; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 50%; font-weight: 750; }
.profit-share-list-main { display: grid; min-width: 0; gap: 5px; }
.profit-share-list-main > small, .profit-share-list-amounts { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.profit-share-list-title { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.profit-share-list-title strong { color: var(--text-strong); }
.profit-share-list-amounts { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.profit-share-list-amounts b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.profit-withdrawal-summary { margin: 0 0 20px; }
.profit-withdrawal-summary > .section-heading { margin-bottom: 12px; }
.profit-withdrawal-summary .financial-summary-grid { margin-bottom: 0; }
.profit-withdrawal-card .eyebrow { margin-bottom: -2px; }
.profit-withdrawal-card > small { overflow-wrap: anywhere; }
.profit-distribution-form-panel { max-width: 860px; margin-inline: auto; }
.profit-share-entry-section { display: grid; gap: 10px; margin-top: 10px; }
.profit-share-entry-section > .section-heading { margin-bottom: 2px; }
.profit-share-entry { display: grid; gap: 13px; padding: 15px; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 11px; }
.profit-share-entry-toggle { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.profit-share-entry-toggle input { width: 19px; height: 19px; margin: 0; accent-color: var(--brand); }
.profit-share-entry-toggle span { display: grid; gap: 3px; min-width: 0; }
.profit-share-entry-toggle strong { color: var(--text-strong); }
.profit-share-entry-toggle small, .profit-share-net-preview { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.profit-share-net-preview { min-height: 18px; }
.profit-share-detail-card { margin-bottom: 14px; }
.profit-share-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.profit-share-detail-heading h2 { margin: 0 0 3px; }
.profit-share-detail-heading p { margin: 0; }
.profit-share-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 9px; padding: 15px 0; }
.profit-share-metrics article { display: grid; gap: 5px; min-width: 0; padding: 12px; background: var(--surface-muted); border-radius: 9px; }
.profit-share-metrics article span { color: var(--muted); font-size: 12px; }
.profit-share-metrics article strong { color: var(--text-strong); font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.profit-settlement-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; padding: 2px 0 15px; }
.profit-settlement-form, .profit-settled-note { display: grid; align-content: start; gap: 11px; min-width: 0; padding: 14px; background: var(--surface-muted); border: 1px solid var(--line-soft); border-radius: 10px; }
.profit-settlement-form h3, .profit-settled-note strong { margin: 0; color: var(--text-strong); font-size: 15px; }
.profit-settlement-form > .muted { margin: -7px 0 0; font-size: 12px; }
.profit-settlement-form .form-row { margin: 0; }
.profit-settlement-form .field { min-width: 0; }
.profit-settlement-form .field > span { font-size: 12px; }
.profit-settlement-form .form-error { margin: 0; }
.profit-settled-note { min-height: 84px; }
.profit-settled-note span { color: var(--muted); font-size: 12px; }
.profit-settlement-history { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.profit-settlement-history h3 { margin: 0; font-size: 15px; }
.profit-settlement-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: start; gap: 11px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.profit-settlement-main { display: grid; min-width: 0; gap: 4px; }
.profit-settlement-main strong { overflow-wrap: anywhere; }
.profit-settlement-main small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
html[data-theme="dark"] :is(.profit-share-list-card, .profit-settlement-row) { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] :is(.profit-share-entry, .profit-share-metrics article, .profit-settlement-form, .profit-settled-note) { color: var(--ink); background: var(--surface-muted); border-color: var(--line); }
@media (max-width: 820px) {
  .profit-distribution-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profit-distribution-filters > .button { align-self: end; }
}
@media (max-width: 600px) {
  .profit-distribution-filters, .profit-settlement-forms { grid-template-columns: 1fr; }
  .profit-share-list-card { grid-template-columns: 36px minmax(0, 1fr) 15px; gap: 9px; padding: 12px; }
  .profit-share-avatar { width: 36px; height: 36px; }
  .profit-share-detail-heading { align-items: flex-start; flex-direction: column; }
  .profit-share-detail-card { padding: 14px; }
  .profit-settlement-row { grid-template-columns: 32px minmax(0, 1fr); }
  .profit-settlement-row > .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 600px) {
  .quote-heading-actions { align-items: stretch; flex-direction: column; }
  .quote-heading-actions .button { width: 100%; }
  .quote-line { grid-template-columns: 1fr 1fr; }
  .quote-line .quote-variant { grid-column: 1 / -1; }
  .quote-line .text-button { grid-column: 1 / -1; justify-self: end; }
  .quote-stock-meta { align-items: flex-start; flex-direction: column; }
  .quote-stock-meta .button { width: 100%; }
  .quote-allocation-row { grid-template-columns: 1fr 1fr; }
  .quote-allocation-row .field:first-child { grid-column: 1 / -1; }
  .quote-allocation-row .text-button { grid-column: 1 / -1; justify-self: end; }
  .quote-logo-panel { align-items: flex-start; flex-direction: column; }
  .quote-logo-actions { flex-wrap: wrap; }
  .settings-profile-summary { align-items: flex-start; flex-direction: column; padding: 17px; }
  .settings-profile-identity { align-items: flex-start; }
  .settings-profile-logo, .settings-profile-mark { width: 54px; height: 54px; flex-basis: 54px; }
  .settings-tax-fields { grid-template-columns: 1fr; }
  .settings-logo-content { align-items: flex-start; flex-direction: column; }
  .settings-logo-content .quote-logo-actions { width: 100%; }
  .settings-logo-content .quote-logo-actions .button { flex: 1 1 44%; min-height: 46px; }
  .quote-actions { justify-content: stretch; }
  .quote-actions .button { flex: 1 1 auto; }
  .print-document-header { grid-template-columns: 1fr; }
  .print-document-meta { text-align: left; }
  .print-lines { font-size: 11px; }
  .print-lines th, .print-lines td { padding: 8px 4px; white-space: normal !important; }
}
.alert-info { color: #254b70; background: #edf5fc; border: 1px solid #c9dced; }
.label-toolbar, .roll-quick-actions, .scan-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.label-toolbar { justify-content: flex-end; margin: 0 0 12px; }
.label-toolbar > span { margin-right: auto; color: var(--muted); font-size: 13px; font-weight: 650; }
.label-toolbar input[type="checkbox"], .data-table input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }
.roll-quick-actions { margin: 20px 0 23px; }
.scan-panel { max-width: 720px; margin: 0 auto; padding: clamp(16px, 4vw, 28px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 3px 12px #1423390a; }
.scan-camera-frame { display: grid; min-height: 240px; aspect-ratio: 4 / 3; max-height: min(62vh, 520px); place-items: center; overflow: hidden; border-radius: 12px; background: #111a24; }
.scan-camera-frame video { width: 100%; height: 100%; object-fit: cover; }
.scan-controls { margin: 14px 0; }
.scan-controls .button { min-height: 46px; }
.scan-panel > .alert { padding: 12px 14px; border-radius: 9px; line-height: 1.5; }
.scan-manual-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 22px; }
.scan-manual-form .form-error { grid-column: 1 / -1; }
.scan-focus-row { background: #fff8db; scroll-margin-top: 24px; }
@media (max-width: 680px) {
  .label-toolbar { align-items: stretch; }
  .label-toolbar > span { width: 100%; }
  .scan-panel { padding: 14px; }
  .scan-camera-frame { min-height: 210px; }
  .scan-manual-form { grid-template-columns: 1fr; }
  .scan-manual-form button { width: 100%; }
  .roll-quick-actions .button { flex: 1 1 100%; white-space: normal; }
}

/* Shared Svetrosa application shell */
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-160%); padding: 12px 16px; color: #fff; background: var(--brand-dark); border-radius: 8px; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
body { color: var(--ink); background: var(--canvas); line-height: 1.5; }
button, input, textarea, select { color: inherit; }
:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 3px !important; }
.topbar[hidden], .app-layout[hidden], .mobile-nav[hidden] { display: none !important; }
.topbar { position: sticky; z-index: 30; top: 0; min-height: 72px; padding: 0 clamp(18px, 3vw, 44px); justify-content: flex-start; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px #17233408; backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--brand); text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #fff; background: var(--brand); }
.brand-mark svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark.has-company-logo { display: flex; width: auto; min-width: 38px; max-width: min(160px, 35vw); height: 44px; padding: 0; overflow: hidden; border-radius: 0; color: inherit; background: transparent; }
.brand-mark.has-company-logo svg { display: none; }
.company-brand-image { display: block; width: auto; max-width: 100%; max-height: 44px; object-fit: contain; }
.company-brand-image[hidden] { display: none !important; }
.brand-copy { display: flex; flex-direction: column; gap: 0; line-height: 1.1; }
.brand-copy strong { font-size: 17px; font-weight: 780; letter-spacing: -.035em; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .13em; }
.topbar-add { margin-left: auto; min-height: 42px; }
.topbar-add[hidden] { display: none !important; }
.account-menu { gap: 10px; margin-left: 0; color: var(--ink); }
.theme-toggle { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; margin-left: auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.theme-toggle:hover { background: var(--surface-hover); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.user-avatar { display: grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 50%; font-size: 14px; font-weight: 800; }
.account-identity { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; }
.account-identity strong { max-width: 190px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-identity small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.account-menu .button { min-height: 40px; }
.app-layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); width: 100%; min-height: calc(100vh - 72px); margin: 0; }
body:not(.has-session) .app-layout { display: block; min-height: calc(100vh - 72px); }
body:not(.has-session) .desktop-sidebar { display: none; }
body:not(.has-session) #app { width: min(100% - 32px, 520px); min-height: 0; margin: clamp(20px, 7vh, 72px) auto; padding: 0; }
.desktop-sidebar { position: sticky; top: 72px; display: flex; height: calc(100vh - 72px); min-height: 500px; flex-direction: column; padding: 25px 13px 16px; background: #fff; border-right: 1px solid var(--line); }
.sidebar-label { margin: 0 12px 12px; color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.sidebar-nav { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.nav-group { margin: 0 0 19px; }
.nav-group h2 { margin: 0 11px 6px; color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nav-group > div { display: flex; flex-direction: column; gap: 2px; }
.nav-link { display: flex; min-height: 42px; gap: 11px; padding: 0 11px; border-radius: 8px; color: #475569; font-size: 13px; font-weight: 620; transition: background-color .15s ease, color .15s ease; }
.nav-link:hover { color: var(--brand-dark); background: #f1f5f9; text-decoration: none; }
.nav-link.is-active { color: var(--brand-dark); background: #e8eff7; box-shadow: inset 3px 0 0 var(--brand); font-weight: 750; }
.nav-link[aria-current="page"]:focus-visible { outline-offset: 1px !important; }
.nav-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 15px 10px 2px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.sidebar-status { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.page-shell { width: 100%; min-width: 0; max-width: 1440px; margin: 0 auto; padding: 36px clamp(24px, 3.6vw, 58px) 72px; }
.page-shell.narrow-shell { max-width: 1060px; }
.page-heading { align-items: flex-end; margin: 0 0 25px; }
.page-heading h1, .dashboard-heading h1 { margin-bottom: 6px; color: #10243b; font-size: clamp(27px, 3vw, 34px); line-height: 1.16; letter-spacing: -.035em; }
.page-heading .muted, .dashboard-heading .muted { max-width: 70ch; color: var(--muted); font-size: 14px; line-height: 1.6; }
.eyebrow { color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
h2 { color: #1d2d40; }
.button { min-height: 44px; border-radius: 9px; font-weight: 700; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--success-action); }
.button-primary:hover { background: var(--success-action-hover); }
.button-secondary { border-color: #cbd5e1; color: #26374a; background: #fff; }
.button-secondary:hover { border-color: #94a3b8; background: #f8fafc; }
.button-quiet { min-height: 40px; padding: 0 11px; color: #475569; background: transparent; }
.button-quiet:hover { color: var(--brand-dark); background: #f1f5f9; }
.button-danger-outline { border-color: #e6b8b4; color: var(--danger); }
.button-danger-outline:hover { border-color: #d7948e; background: var(--danger-soft); }
.mobile-add { display: inline-flex; }
.toolbar, .audit-filter-panel, .report-filters { border-color: var(--line); border-radius: 12px; box-shadow: 0 1px 3px #17233408; }
.toolbar { background: #fff; }
.toolbar input, .toolbar select, .field input, .field textarea, .field select, .audit-filter-panel input, .audit-filter-panel select { border-color: #cbd5e1; border-radius: 9px; }
.field input, .field textarea, .field select { min-height: 46px; }
.field { gap: 8px; color: #26374a; font-size: 13px; }
.field small { line-height: 1.45; }
.form-panel, .detail-panel, .dashboard-section, .report-section, .scan-panel, .supplier-card, .note-card, .audit-operation-card { border-color: var(--line); border-radius: 14px; box-shadow: 0 2px 8px #17233408; }
.form-panel, .detail-panel { box-shadow: 0 2px 10px #1723340a; }
.variant-panel, .sale-line, .purchase-line-form, .quote-line, .quote-allocation-line, .return-line, .workflow-disclosure { border-color: var(--line); border-radius: 12px; background: #f8fafc; }
.status-pill { min-height: 27px; padding: 0 10px; border-radius: 7px; font-size: 11px; }
.status-warning, .audit-update { color: var(--warning); background: var(--warning-soft); }
.status-active { color: #056344; background: #e7f6ed; }
.status-neutral, .status-inactive { color: #475569; background: #edf2f7; }
.alert { border-radius: 10px; line-height: 1.5; }
.empty-state { border-color: #cbd5e1; border-radius: 14px; background: #fff; }
.loading-state { color: var(--muted); }
.loading-spinner { border-color: #cbd5e1; border-top-color: var(--brand); }
.table-wrap { max-width: 100%; border-color: var(--line); border-radius: 11px; background: #fff; -webkit-overflow-scrolling: touch; }
.data-table { font-variant-numeric: tabular-nums; }
.data-table th { color: #475569; background: #f1f5f9; letter-spacing: .025em; }
.data-table td { border-color: #edf1f5; }
.data-table tbody tr:hover { background: #f8fafc; }
.report-tabs { border-color: var(--line); }
.report-tab.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.dashboard-summary-line { background: #fff; border-color: var(--line); border-radius: 11px; }
.dashboard-section { background: #fff; }
.dashboard-row, .roll-row, .movement-row { border-color: #edf1f5; }
.drive-file-icon { color: var(--brand); background: #eaf0f7; }
.drive-file-icon-image { color: #176b63; background: #e5f3ef; }
.drive-file-icon-pdf { color: #a12525; background: #fff1f0; }
.drive-file-icon svg, .empty-icon svg { width: 21px; height: 21px; }
.report-metrics article { border-color: var(--line); border-radius: 12px; background: #fff; }
.report-metrics article strong { color: var(--brand-dark); }
.fabric-image-panel { border-color: var(--line); background: var(--surface); }
.fabric-image-preview { border-color: var(--line); background: var(--surface-muted); }
.fabric-image-thumb { background: var(--surface-muted); }
 .variant-image-thumb, .variant-image-preview, .roll-variant-photo, .stock-roll-cell > img { border-color: var(--line); background: var(--surface-muted); }
.pagination .button { min-width: 44px; }
.mobile-nav { display: none; }
.more-menu-dialog { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 760px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 20px 80px #0f172a36; }
.more-menu-dialog::backdrop { background: #0f172a78; backdrop-filter: blur(2px); }
.more-menu-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.more-menu-header .eyebrow { margin-bottom: 2px; }
.more-menu-header h2 { margin: 0; font-size: 21px; }
.icon-button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #475569; background: #fff; cursor: pointer; }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.more-menu-nav { max-height: calc(80vh - 88px); padding: 16px 22px 22px; overflow-y: auto; }
.more-nav-group { margin-bottom: 18px; }
.more-nav-group:last-child { margin-bottom: 0; }
.more-nav-group h3 { margin: 0 0 7px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.more-nav-group .more-nav-link { min-height: 46px; padding: 0 11px; color: #334155; }
.more-nav-group .more-nav-link.is-active { color: var(--brand-dark); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1100px) {
  .app-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .desktop-sidebar { padding-inline: 10px; }
  .page-shell { padding-inline: 30px; }
}
@media (max-width: 820px) {
  .app-layout { display: block; min-height: calc(100vh - 64px); }
  .desktop-sidebar { display: none; }
  .page-shell, .page-shell.narrow-shell { max-width: 900px; padding: 27px 22px calc(108px + env(safe-area-inset-bottom)); }
  .mobile-nav { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: calc(66px + env(safe-area-inset-bottom)); padding: 5px 7px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 -5px 20px #1723340b; backdrop-filter: blur(14px); }
  .mobile-nav-link, .mobile-nav-more { display: flex; min-width: 0; min-height: 54px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 3px 1px; border: 0; border-radius: 10px; color: #64748b; background: transparent; text-decoration: none; font-size: 10px; font-weight: 650; line-height: 1.2; cursor: pointer; }
  .mobile-nav-link .nav-icon, .mobile-nav-more .nav-icon { width: 21px; height: 21px; }
  .mobile-nav-link > span, .mobile-nav-more > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav-link.is-active { color: var(--brand-dark); background: #eaf0f7; font-weight: 800; }
  .mobile-nav-more:hover { color: var(--brand-dark); background: #f1f5f9; }
  .mobile-add { display: inline-flex; }
  .fabric-image-panel { grid-template-columns: minmax(0, 1fr); }
  .fabric-image-preview { width: min(100%, 420px); min-height: 190px; }
  .variant-image-panel, .variant-image-panel.is-compact { grid-template-columns: minmax(0, 1fr); }
  .variant-image-preview, .variant-image-panel.is-compact .variant-image-preview { width: min(100%, 360px); min-height: 170px; }
  .variant-title-group { align-items: flex-start; }
  .topbar { min-height: 64px; padding: 0 20px; }
  .topbar-add { display: none !important; }
  .account-menu { margin-left: 0; }
  .account-identity { display: none; }
  .button { min-height: 46px; }
  .page-heading { align-items: flex-start; flex-wrap: wrap; }
  .page-heading > div:first-child { min-width: min(100%, 320px); flex: 1 1 100%; }
  .page-heading > .mobile-add { width: auto; }
  .toolbar { flex-wrap: wrap; }
  .search-field { flex: 1 1 100%; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-activity-section { grid-column: auto; }
  .table-wrap { max-width: 100%; }
  .form-actions { flex-wrap: wrap; }
  .form-actions > .button { min-width: 116px; }
}
@media (max-width: 520px) {
  .topbar { min-height: 60px; padding: 0 15px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand-mark svg { width: 23px; height: 23px; }
  .brand-mark.has-company-logo { max-width: min(110px, 30vw); height: 36px; }
  .company-brand-image { max-height: 36px; }
  .brand-copy strong { font-size: 16px; }
  .brand-copy small { font-size: 8px; }
  .account-menu { gap: 8px; }
  .user-avatar { width: 32px; height: 32px; }
  .account-menu .button { min-height: 40px; padding-inline: 10px; }
  .page-shell, .page-shell.narrow-shell { padding: 23px 16px calc(104px + env(safe-area-inset-bottom)); }
  body:not(.has-session) #app { width: min(100% - 28px, 480px); margin: 24px auto; }
  .page-heading { gap: 12px; margin-bottom: 20px; }
  .page-heading h1, .dashboard-heading h1 { font-size: 28px; }
  .page-heading .muted, .dashboard-heading .muted { font-size: 13px; }
  .page-heading > .mobile-add { width: 100%; }
  .form-panel, .detail-panel { padding: 19px 16px; }
  .toolbar { padding: 12px; gap: 8px; }
  .toolbar > .button { flex: 0 0 auto; }
  .toolbar input, .toolbar select { min-height: 46px; }
  .supplier-grid, .notes-grid { grid-template-columns: 1fr; }
  .supplier-card, .note-card { padding: 17px; }
  .dashboard-section { padding: 15px; }
  .dashboard-row { align-items: flex-start; }
  .dashboard-row-meta { max-width: 42%; }
  .data-table { min-width: 680px; }
  .stocktake-table { min-width: 560px; }
  .stocktake-table input { width: 120px; min-height: 44px; }
  .more-menu-dialog { width: 100vw; max-width: none; max-height: min(84dvh, 760px); margin: auto 0 0; border-radius: 19px 19px 0 0; border-bottom: 0; }
  .more-menu-nav { max-height: calc(84dvh - 88px); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .more-menu-header { padding: 17px 17px 13px; }
  .report-metrics { grid-template-columns: 1fr 1fr; }
  .report-metrics article { min-width: 0; padding: 13px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  .mobile-nav { min-height: calc(56px + env(safe-area-inset-bottom)); }
  .mobile-nav-link, .mobile-nav-more { min-height: 46px; flex-direction: row; gap: 7px; font-size: 11px; }
  .mobile-nav-link .nav-icon, .mobile-nav-more .nav-icon { width: 19px; height: 19px; }
  .page-shell, .page-shell.narrow-shell { padding-top: 19px; }
}

/* Dark theme. The root tokens recolor shared UI; explicit surfaces cover legacy fixed colors. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7edf5;
  --muted: #a7b5c7;
  --line: #2e3d52;
  --surface: #111c2b;
  --canvas: #0a1220;
  --brand: #9bc3eb;
  --brand-dark: #d0e1f2;
  --brand-soft: #1b3049;
  --danger: #ff958c;
  --danger-soft: #3b2429;
  --success: #78ddb1;
  --success-soft: #15382b;
  --success-action: #17694d;
  --success-action-hover: #1d7b5b;
  --warning: #f4cc75;
  --warning-soft: #3b2d16;
  --focus: #86bdf4;
  --surface-muted: #172436;
  --surface-hover: #203147;
  --surface-input: #0e1928;
  --line-soft: #29394e;
  --text-strong: #f2f6fb;
  --text-body: #d1dae6;
  --neutral-text: #c4cfdd;
  --neutral-surface: #27374b;
  --danger-border: #76434a;
  --success-border: #2c614b;
  --warning-border: #735c32;
}

html[data-theme="dark"] body { color: var(--ink); background: var(--canvas); }
html[data-theme="dark"] :is(.topbar, .desktop-sidebar, .mobile-nav) { background: rgba(17, 28, 43, .97); border-color: var(--line); }
html[data-theme="dark"] :is(.auth-card, .form-panel, .detail-panel, .settings-profile-summary, .toolbar, .supplier-card, .empty-state, .contact-card, .note-card, .note-detail, .drive-list, .drive-dialog, .audit-filter-panel, .audit-operation-card, .report-filters, .report-section, .dashboard-section, .report-metrics article, .table-wrap, .stocktake-history-card, .account-totals article, .account-summary-cards article, .account-balance-row, .return-history-card, .payment-entry-form, .user-card, .more-menu-dialog, .more-menu-header, .icon-button, .scan-panel) {
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] :is(.variant-panel, .sale-line, .purchase-line-form, .quote-line, .quote-calculation, .quote-allocation-line, .return-line, .workflow-disclosure, .stocktake-note, .dashboard-summary-line, .dashboard-currency-total, .data-table th) {
  color: var(--ink);
  background: var(--surface-muted);
  border-color: var(--line);
}
html[data-theme="dark"] .quote-stock-message.is-unknown { color: #b8d7f5; background: #172b41; border-color: #355573; }
html[data-theme="dark"] :is(.toolbar, .report-filters, .audit-filter-panel, .table-wrap, .more-menu-dialog, .drive-dialog) { box-shadow: 0 8px 24px #0005; }
html[data-theme="dark"] .topbar { background: rgba(17, 28, 43, .97); }
html[data-theme="dark"] .mobile-nav { box-shadow: 0 -5px 20px #0005; }
html[data-theme="dark"] .brand-mark { color: #fff; background: #183d65; }
html[data-theme="dark"] .brand-mark.has-company-logo { background: transparent; }
html[data-theme="dark"] .theme-toggle { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .theme-toggle:hover { background: var(--surface-hover); }
html[data-theme="dark"] :is(.page-heading h1, .dashboard-heading h1, h2, h3, .field, .card-address, .return-line-summary, .dashboard-currency-total, .more-nav-group .more-nav-link, .audit-entity-plain) { color: var(--ink); }
html[data-theme="dark"] :is(.sidebar-label, .nav-group h2, .nav-link, .mobile-nav-link, .mobile-nav-more, .more-nav-group h3) { color: var(--muted); }
html[data-theme="dark"] :is(.nav-link:hover, .mobile-nav-more:hover) { color: var(--ink); background: var(--surface-hover); }
html[data-theme="dark"] :is(.nav-link.is-active, .mobile-nav-link.is-active) { color: var(--text-strong); background: #203a56; }
html[data-theme="dark"] .sidebar-footer { border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .user-avatar { color: #d7eaff; background: #203a56; }
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  color: var(--ink);
  color-scheme: dark;
  background-color: var(--surface-input);
  border-color: #40516a;
}
html[data-theme="dark"] :is(input, textarea, select)::placeholder { color: #8797aa; opacity: 1; }
html[data-theme="dark"] :is(input, textarea, select):focus { border-color: var(--focus); box-shadow: 0 0 0 3px #86bdf433; }
html[data-theme="dark"] :is(.button-secondary, .button-danger-outline, .icon-button) { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] :is(.button-secondary, .button-danger-outline, .icon-button):hover { background: var(--surface-hover); border-color: #50647e; }
html[data-theme="dark"] .button-primary { color: #fff; background: var(--success-action); }
html[data-theme="dark"] .button-primary:hover { background: var(--success-action-hover); }
html[data-theme="dark"] .button-quiet { color: var(--muted); }
html[data-theme="dark"] .button-quiet:hover { color: var(--ink); background: var(--surface-hover); }
html[data-theme="dark"] .button-danger-outline { color: var(--danger); border-color: var(--danger-border); }
html[data-theme="dark"] .button-danger-outline:hover { background: var(--danger-soft); border-color: var(--danger); }
html[data-theme="dark"] :is(.status-active, .alert-success) { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
html[data-theme="dark"] :is(.status-neutral, .status-inactive, .audit-entity-plain) { color: var(--neutral-text); background: var(--neutral-surface); }
html[data-theme="dark"] :is(.status-warning, .audit-update) { color: var(--warning); background: var(--warning-soft); }
html[data-theme="dark"] :is(.audit-unknown-actor, .audit-legacy-note) { color: var(--warning); }
html[data-theme="dark"] :is(.alert-error, .form-error) { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
html[data-theme="dark"] .alert-info { color: #b8d7f5; background: #172b41; border-color: #355573; }
html[data-theme="dark"] .alert-success { border-color: var(--success-border); }
html[data-theme="dark"] .audit-action { color: var(--brand); background: var(--brand-soft); }
html[data-theme="dark"] .drive-file-icon { color: var(--brand); background: var(--brand-soft); }
html[data-theme="dark"] .drive-file-icon-image { color: #9cded3; background: #183c3b; }
html[data-theme="dark"] .drive-file-icon-pdf { color: #f0a7a1; background: #49272b; }
html[data-theme="dark"] .drive-folder-card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .drive-folder-card:hover { border-color: #50647e; }
html[data-theme="dark"] .drive-control-panel { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .drive-search-field input { background: var(--surface-input); border-color: var(--line); }
html[data-theme="dark"] .drive-count-pill { color: var(--muted); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .drive-upload-progress { color: var(--brand); border-color: #355573; background: var(--brand-soft); }
html[data-theme="dark"] .drive-upload-progress.is-error { color: var(--danger); border-color: var(--danger-border); background: var(--danger-soft); }
html[data-theme="dark"] .drive-dialog .field select { color: var(--ink); background: var(--surface-input); border-color: var(--line); }
html[data-theme="dark"] .drive-share-user { background: var(--surface-muted); border-color: var(--line); }
html[data-theme="dark"] .drive-access-badge.is-owned { color: var(--brand); border-color: #355573; background: var(--brand-soft); }
html[data-theme="dark"] .drive-access-badge.is-shared { color: var(--success); border-color: var(--success-border); background: var(--success-soft); }
html[data-theme="dark"] .scan-focus-row { background: #3a2e17; box-shadow: inset 0 0 0 1px #735c32; }
html[data-theme="dark"] .stocktake-start-panel { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-muted) 100%); }
html[data-theme="dark"] .empty-state { border-style: dashed; }
html[data-theme="dark"] .settings-field-group { border-color: var(--line); }
html[data-theme="dark"] :is(.card-meta, .roll-row, .movement-row, .dashboard-row, .dashboard-empty, .receipt-roll-row, .purchase-receipt-history-line, .payment-row, .status-history li, .drive-row, .audit-field-changes > div, .audit-timeline-list li, .return-refund-form, .compact-date-form) { border-color: var(--line-soft); }
html[data-theme="dark"] :is(.data-table td, .data-table th) { border-color: var(--line-soft); }
html[data-theme="dark"] .data-table tbody tr:hover { background: var(--surface-hover); }
html[data-theme="dark"] .dashboard-row:hover { color: var(--brand); }
html[data-theme="dark"] .dashboard-currency-total strong { color: var(--text-strong); }
html[data-theme="dark"] .page-heading h1, html[data-theme="dark"] .dashboard-heading h1 { color: var(--text-strong); }
html[data-theme="dark"] .report-metrics article strong, html[data-theme="dark"] .account-totals article strong, html[data-theme="dark"] .account-summary-cards article strong { color: var(--text-strong); }
html[data-theme="dark"] .report-tab.is-active { color: var(--text-strong); }
html[data-theme="dark"] .more-menu-header { border-color: var(--line); }
html[data-theme="dark"] .more-menu-dialog::backdrop, html[data-theme="dark"] .drive-dialog::backdrop { background: #020812b8; }
html[data-theme="dark"] .icon-button { color: var(--muted); }
html[data-theme="dark"] .brand-copy small { color: var(--muted); }
html[data-theme="dark"] button:focus-visible, html[data-theme="dark"] a:focus-visible, html[data-theme="dark"] input:focus-visible, html[data-theme="dark"] textarea:focus-visible, html[data-theme="dark"] select:focus-visible { outline-color: var(--focus) !important; }
html[data-theme="dark"] ::selection { color: #fff; background: #31577b; }
html[data-theme="dark"] .loading-spinner { border-color: #3b4d64; border-top-color: var(--brand); }
html[data-theme="dark"] .print-document { color: #172334; background: #fff; }

@media (max-width: 520px) {
  .theme-toggle { width: 44px; padding: 0; }
  .theme-toggle span { display: none; }
}

@media print {
  html[data-theme="dark"] body { color: #111; background: #fff; }
  html[data-theme="dark"] .print-document { color: #172334; background: #fff; }
}
@media print {
  .topbar, .desktop-sidebar, .mobile-nav, .more-menu-dialog, .back-link, .print-toolbar { display: none !important; }
  .app-layout { display: block !important; width: 100%; min-height: 0; }
  .page-shell { max-width: none; padding: 0; }
}

/* Calendar planning */
.calendar-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; margin-bottom: 25px; }
.calendar-heading h1 { margin-bottom: 8px; }
.calendar-heading .muted { max-width: 60ch; margin: 0; line-height: 1.55; }
.calendar-create-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.calendar-board { min-width: 0; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 15px; }
.calendar-period-controls { display: flex; min-width: 0; align-items: center; gap: 8px; }
.calendar-period-controls h2 { min-width: 190px; margin: 0 0 0 6px; font-size: 17px; text-align: center; }
.calendar-view-switch { display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-muted); }
.calendar-view-switch a { display: inline-flex; min-width: 62px; min-height: 38px; align-items: center; justify-content: center; padding: 0 11px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.calendar-view-switch a:hover { color: var(--ink); background: var(--surface-hover); text-decoration: none; }
.calendar-view-switch a.is-active { color: var(--brand-dark); background: var(--surface); box-shadow: 0 1px 3px #17233414; }
.calendar-filters { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)) minmax(170px, 1.4fr) auto; align-items: end; gap: 10px; margin-bottom: 10px; }
.calendar-filters .field { gap: 6px; }
.calendar-filters .field select, .calendar-filters .field input { min-height: 44px; }
.calendar-filters > .button { min-height: 44px; }
.calendar-result-count { margin: 11px 2px 14px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.calendar-flow-list { display: flex; flex-direction: column; gap: 18px; }
.calendar-day-group { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 2px 8px #14233908; }
.calendar-day-group > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink); background: var(--surface-muted); }
.calendar-day-group > header time { font-size: 14px; font-weight: 750; text-transform: capitalize; }
.calendar-day-group > header span { color: var(--muted); font-size: 12px; }
.calendar-day-group.is-past > header { color: var(--warning); }
.calendar-day-events { display: flex; flex-direction: column; padding: 0 16px; }
.calendar-event { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.calendar-event:last-child { border-bottom: 0; }
.calendar-event-mark { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--brand); background: var(--brand-soft); }
.calendar-event-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.calendar-event-overdue .calendar-event-mark { color: var(--warning); border-color: var(--warning-border); background: var(--warning-soft); }
.calendar-kind-task .calendar-event-mark { color: var(--success); border-color: var(--success-border); background: var(--success-soft); }
.calendar-event-copy { min-width: 0; }
.calendar-event-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 5px; }
.calendar-kind-label { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .025em; }
.calendar-event-copy h3, .calendar-event-title { display: inline-block; margin: 0 0 5px; color: var(--ink); font-size: 15px; font-weight: 760; line-height: 1.35; overflow-wrap: anywhere; }
.calendar-event-title:hover { color: var(--brand); }
.calendar-event-detail, .calendar-event-context { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.calendar-record-link { display: inline-flex; min-height: 38px; align-items: center; margin-top: 5px; font-size: 12px; font-weight: 700; }
.calendar-event-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.calendar-event-amount { color: var(--text-strong); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calendar-event-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.calendar-event-actions .button { min-height: 38px; padding-inline: 10px; font-size: 12px; }
.calendar-empty { margin-top: 10px; }
.calendar-empty .empty-icon { width: 52px; height: 52px; }
.calendar-empty .empty-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 2px 8px #14233908; }
.calendar-weekday { display: flex; min-height: 38px; align-items: center; justify-content: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); background: var(--surface-muted); font-size: 11px; font-weight: 750; }
.calendar-grid-day { min-width: 0; min-height: 106px; padding: 7px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.calendar-grid-day:nth-child(7n) { border-right: 0; }
.calendar-grid-day time { display: inline-grid; min-width: 28px; min-height: 28px; place-items: center; border-radius: 9px; color: var(--ink); font-size: 12px; font-weight: 720; font-variant-numeric: tabular-nums; }
.calendar-grid-day.is-today time { color: #fff; background: var(--brand); }
.calendar-grid-day.is-outside { color: var(--muted); background: var(--surface-muted); opacity: .72; }
.calendar-grid-count { float: right; padding-top: 7px; color: var(--muted); font-size: 10px; }
.calendar-grid-events { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.calendar-grid-event { display: flex; min-width: 0; align-items: flex-start; gap: 5px; color: var(--ink); font-size: 10px; line-height: 1.3; }
.calendar-grid-event > span:first-child { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 3px; border-radius: 50%; background: var(--brand); }
.calendar-grid-event-overdue > span:first-child { background: var(--warning); }
.calendar-grid-event-completed > span:first-child { background: var(--success); }
.calendar-grid-event-cancelled > span:first-child { background: var(--muted); }
.calendar-grid-event a, .calendar-grid-event > span:last-child { display: -webkit-box; min-width: 0; overflow: hidden; color: inherit; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.calendar-grid-more { color: var(--muted); font-size: 10px; font-weight: 700; }
.calendar-pagination { justify-content: flex-end; margin-top: 16px; }
.calendar-pagination > span { margin-right: auto; color: var(--muted); font-size: 12px; }
.calendar-entry-form-panel { max-width: 820px; }
.calendar-entry-detail .calendar-detail-top { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.calendar-entry-detail .calendar-event-mark { width: 44px; height: 44px; }
.calendar-entry-detail .eyebrow { margin-bottom: 6px; }
.calendar-detail-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 21px 0; }
.calendar-detail-meta > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.calendar-detail-meta dt { color: var(--muted); font-size: 11px; }
.calendar-detail-meta dd { margin: 5px 0 0; color: var(--ink); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.calendar-entry-description { max-width: 68ch; margin: 24px 0; }
.calendar-entry-description h2 { margin-bottom: 7px; font-size: 15px; }
.calendar-entry-description p { margin: 0; color: var(--muted); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.calendar-entry-detail .form-actions { justify-content: flex-start; margin-top: 22px; }
.calendar-entry-detail .button-quiet { color: var(--danger); }

html[data-theme="dark"] :is(.calendar-day-group, .calendar-grid) { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] :is(.calendar-day-group > header, .calendar-weekday, .calendar-detail-meta > div) { color: var(--ink); background: var(--surface-muted); border-color: var(--line); }
html[data-theme="dark"] :is(.calendar-event, .calendar-grid-day, .calendar-detail-meta > div) { border-color: var(--line-soft); }
html[data-theme="dark"] .calendar-view-switch a.is-active { color: var(--text-strong); background: var(--surface); }
html[data-theme="dark"] .calendar-event-title, html[data-theme="dark"] .calendar-event-copy h3 { color: var(--ink); }
html[data-theme="dark"] .calendar-grid-day.is-today time { color: #101b2a; background: var(--brand); }

@media (max-width: 900px) {
  .calendar-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-search-field { grid-column: span 2; }
  .calendar-filters > .button { min-height: 46px; }
}
@media (max-width: 640px) {
  .calendar-heading { align-items: flex-start; flex-direction: column; }
  .calendar-create-actions { width: 100%; }
  .calendar-create-actions .button { flex: 1 1 auto; }
  .calendar-toolbar { align-items: flex-start; flex-direction: column; }
  .calendar-period-controls { width: 100%; justify-content: space-between; }
  .calendar-period-controls h2 { min-width: 0; flex: 1 1 auto; font-size: 15px; }
  .calendar-view-switch { width: 100%; }
  .calendar-view-switch a { flex: 1 1 0; }
  .calendar-filters { grid-template-columns: 1fr 1fr; padding: 10px; }
  .calendar-filters > .field { min-width: 0; }
  .calendar-filters .calendar-search-field { grid-column: 1 / -1; }
  .calendar-filters > .button { width: 100%; grid-column: 1 / -1; }
  .calendar-day-events { padding-inline: 11px; }
  .calendar-event { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 13px 0; }
  .calendar-event-mark { width: 32px; height: 32px; border-radius: 9px; }
  .calendar-event-side { grid-column: 2; align-items: flex-start; }
  .calendar-event-actions { justify-content: flex-start; }
  .calendar-grid-day { min-height: 85px; padding: 4px; }
  .calendar-weekday { min-height: 34px; font-size: 10px; }
  .calendar-grid-day time { min-width: 25px; min-height: 25px; font-size: 11px; }
  .calendar-grid-count { padding-top: 7px; font-size: 9px; }
  .calendar-grid-event { gap: 3px; font-size: 9px; }
  .calendar-detail-meta { grid-template-columns: 1fr 1fr; }
  .calendar-entry-detail .form-actions { align-items: stretch; }
  .calendar-entry-detail .form-actions > * { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 380px) {
  .calendar-grid-day { min-height: 70px; padding: 2px; }
  .calendar-grid-count { display: none; }
  .calendar-grid-event { font-size: 8px; }
  .calendar-grid-more { font-size: 8px; }
}

/* Company expense tracking */
.expense-heading { align-items: flex-end; }
.expense-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.expense-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0 0 18px; }
.expense-totals article { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: var(--surface); font-size: 12px; }
.expense-totals article strong { color: var(--brand); font-size: 15px; }
.expense-filters { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(125px, 1fr)) auto; align-items: end; gap: 10px; }
.expense-filters .field, .expense-report-filters .field { gap: 5px; }
.expense-filters input, .expense-filters select, .expense-report-filters input { min-height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface-input); }
.expense-filters .button { min-height: 42px; }
.expense-list { display: grid; gap: 8px; }
.expense-row { display: grid; grid-template-columns: minmax(190px, 1.5fr) minmax(150px, .9fr) minmax(140px, .8fr) auto; align-items: center; gap: 16px; min-width: 0; padding: 15px 17px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); }
a.expense-row:hover { border-color: #9aafc2; text-decoration: none; box-shadow: 0 3px 12px #1423390d; }
.expense-row-main, .expense-row-dates, .expense-row-money { display: grid; min-width: 0; gap: 5px; }
.expense-row-main strong, .expense-row-money strong { overflow-wrap: anywhere; }
.expense-row small, .expense-row-dates { color: var(--muted); font-size: 12px; }
.expense-row-money { text-align: right; font-variant-numeric: tabular-nums; }
.expense-row-dates small { font-size: 11px; }
.expense-late { color: var(--danger); font-weight: 700; }
.expense-detail-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.expense-detail-heading .eyebrow { margin-bottom: 6px; }
.expense-balance-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.expense-balance-cards article { display: grid; gap: 7px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.expense-balance-cards span { color: var(--muted); font-size: 12px; }
.expense-balance-cards strong { color: var(--text-strong); font-size: clamp(15px, 2vw, 20px); overflow-wrap: anywhere; }
.expense-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.expense-note { max-width: 70ch; margin: 20px 0; }
.expense-note h2 { font-size: 16px; }
.expense-note p { white-space: pre-wrap; color: var(--muted); line-height: 1.6; }
.expense-pay-panel { margin: 20px 0; }
.expense-payment-list { display: grid; }
.expense-payment-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.expense-payment-row:last-child { border-bottom: 0; }
.expense-payment-mark { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--brand); background: var(--brand-soft); }
.expense-payment-mark svg { width: 18px; height: 18px; }
.expense-payment-row > span:last-child { display: grid; gap: 4px; min-width: 0; }
.expense-payment-row small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.expense-repeat-toggle { display: flex; gap: 11px; align-items: flex-start; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); cursor: pointer; }
.expense-repeat-toggle input, .expense-category-active input { width: 19px; height: 19px; accent-color: var(--brand); }
.expense-repeat-toggle span { display: grid; gap: 4px; }
.expense-repeat-toggle small { color: var(--muted); font-size: 12px; font-weight: 400; }
.expense-repeat-fields[hidden] { display: none; }
.expense-category-section { display: grid; gap: 14px; }
.expense-category-create { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.expense-category-create .form-error { grid-column: 1 / -1; margin: 0; }
.expense-category-list { display: grid; gap: 8px; }
.expense-category-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; align-items: end; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.expense-category-row .field { gap: 5px; }
.expense-category-row .field input { min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface-input); }
.expense-category-active { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.expense-report-filters { align-items: end; margin-bottom: 16px; }
.expense-report-table { margin-top: 18px; }
.expense-report-table table { min-width: 690px; }
.expense-recurrence-row { grid-template-columns: minmax(180px, 1.3fr) minmax(180px, 1fr) minmax(130px, .7fr) auto; }
html[data-theme="dark"] :is(.expense-row, .expense-totals article, .expense-category-row, .expense-repeat-toggle, .expense-balance-cards article) { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] :is(.expense-filters input, .expense-filters select, .expense-report-filters input, .expense-category-row .field input) { color: var(--ink); background: var(--surface-input); border-color: var(--line); }
@media (max-width: 960px) {
  .expense-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expense-search { grid-column: span 2; }
  .expense-recurrence-row { grid-template-columns: minmax(150px, 1fr) minmax(160px, 1fr) auto; }
}
@media (max-width: 640px) {
  .expense-heading { align-items: flex-start; flex-direction: column; }
  .expense-heading-actions { width: 100%; justify-content: flex-start; }
  .expense-heading-actions .button { flex: 1 1 auto; }
  .expense-filters { grid-template-columns: 1fr 1fr; padding: 10px; }
  .expense-search { grid-column: 1 / -1; }
  .expense-filters > .button { grid-column: 1 / -1; }
  .expense-row, .expense-recurrence-row { grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; padding: 13px; }
  .expense-row-main { grid-column: 1 / -1; }
  .expense-row-dates { grid-column: 1; grid-row: 2; }
  .expense-row-money { grid-column: 2; grid-row: 2; text-align: right; }
  .expense-row > .status-pill, .expense-row > .button { grid-column: 1 / -1; justify-self: start; }
  .expense-row .status-pill { grid-row: 3; }
  .expense-balance-cards { grid-template-columns: 1fr; }
  .expense-meta { grid-template-columns: 1fr 1fr; }
  .expense-category-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .expense-category-row .field { grid-column: 1 / -1; }
  .expense-category-row .button { grid-column: 2; grid-row: 2; }
  .expense-category-active { grid-column: 1; grid-row: 2; }
  .expense-category-create { grid-template-columns: 1fr; }
  .expense-category-create .button { width: 100%; }
  .expense-report-filters { flex-direction: column; align-items: stretch; }
  .expense-report-filters .field { width: 100%; }
}

/* Partner reimbursements and expense receipts */
.partner-balance-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.partner-balance-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 13px; min-width: 0; padding: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 2px 8px #14233908; }
.partner-balance-card:hover { text-decoration: none; border-color: var(--brand); box-shadow: 0 4px 14px #14233912; }
.partner-avatar { display: grid; width: 44px; height: 44px; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 12px; font-size: 18px; font-weight: 750; }
.partner-balance-card-main { display: grid; min-width: 0; gap: 4px; }
.partner-balance-card-main strong { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.partner-balance-card-main small, .partner-balance-card-main > span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.partner-history-tag { padding: 2px 7px; color: var(--muted); background: var(--surface-muted); border-radius: 999px; font-size: 10px; font-weight: 650; }
.partner-balance-arrow { color: var(--muted); }
.partner-balance-arrow svg { width: 18px; height: 18px; }
.partner-currency-section { display: grid; gap: 15px; }
.partner-currency-due { color: var(--brand); font-variant-numeric: tabular-nums; text-align: right; }
.partner-debt-list, .partner-transfer-list { display: grid; gap: 8px; }
.partner-debt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(115px, .4fr); align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); }
.partner-debt-readonly .partner-debt-row { grid-template-columns: minmax(0, 1fr) auto; }
.partner-debt-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); }
.partner-debt-main { display: grid; min-width: 0; gap: 4px; }
.partner-debt-main strong, .partner-debt-main small { overflow-wrap: anywhere; }
.partner-debt-main small { color: var(--muted); font-size: 12px; }
.partner-debt-balance { color: var(--text-strong); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.partner-allocation-amount { width: 100%; min-height: 40px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface-input); }
.partner-transfer-form { display: grid; gap: 13px; padding-top: 15px; border-top: 1px solid var(--line); }
.partner-transfer-form h3 { margin: 0; font-size: 16px; }
.partner-transfer-form > .muted { margin: -6px 0 0; }
.partner-transfer-total { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; color: var(--muted); background: var(--surface-muted); border-radius: 9px; }
.partner-transfer-total strong { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.partner-transfer-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.partner-transfer-icon { display: grid; width: 36px; height: 36px; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 10px; }
.partner-transfer-icon svg { width: 18px; height: 18px; }
.partner-transfer-main { display: grid; min-width: 0; gap: 5px; }
.partner-transfer-main strong { overflow-wrap: anywhere; }
.partner-transfer-main small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.expense-attachment-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 11px; padding: 14px; margin-bottom: 14px; background: var(--surface-muted); border: 1px dashed var(--line); border-radius: 11px; }
.expense-attachment-upload .field { gap: 5px; }
.expense-attachment-upload input[type="file"] { min-height: 42px; max-width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface-input); }
.expense-attachment-upload small { color: var(--muted); font-size: 11px; }
.expense-attachment-upload .form-error { grid-column: 1 / -1; margin: 0; }
.expense-attachment-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.expense-attachment-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.expense-attachment-preview { display: grid; width: 76px; height: 68px; place-items: center; overflow: hidden; color: var(--brand); background: var(--surface-muted); border-radius: 7px; text-decoration: none; font-size: 13px; font-weight: 750; }
.expense-attachment-preview img { width: 100%; height: 100%; object-fit: cover; }
.expense-attachment-info { display: grid; min-width: 0; gap: 4px; }
.expense-attachment-info a { overflow-wrap: anywhere; font-size: 13px; font-weight: 650; }
.expense-attachment-info small { color: var(--muted); font-size: 11px; }
html[data-theme="dark"] :is(.partner-balance-card, .partner-transfer-row, .expense-attachment-card) { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] :is(.partner-debt-row, .partner-transfer-total, .expense-attachment-preview, .expense-attachment-upload) { color: var(--ink); background: var(--surface-muted); border-color: var(--line); }
html[data-theme="dark"] .partner-allocation-amount, html[data-theme="dark"] .expense-attachment-upload input[type="file"] { color: var(--ink); background: var(--surface-input); border-color: var(--line); }
@media (max-width: 640px) {
  .partner-debt-row { grid-template-columns: auto minmax(0, 1fr); gap: 9px 10px; }
  .partner-debt-row > .partner-debt-main { grid-column: 2; }
  .partner-debt-row > .partner-debt-balance { grid-column: 2; }
  .partner-debt-row > .partner-allocation-amount { grid-column: 2; }
  .partner-transfer-row { grid-template-columns: 34px minmax(0, 1fr); }
  .partner-transfer-row > .button { grid-column: 2; justify-self: start; }
  .expense-attachment-upload { grid-template-columns: 1fr; }
  .expense-attachment-upload > .button { width: 100%; }
  .expense-attachment-card { grid-template-columns: 60px minmax(0, 1fr); }
  .expense-attachment-preview { width: 60px; height: 60px; }
  .expense-attachment-card > .button { grid-column: 2; justify-self: start; }
}

/* Company cash, bank, POS and card ledgers */
.financial-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: 13px; margin: 0 0 22px; }
.financial-summary-card { display: grid; gap: 7px; min-width: 0; padding: 18px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 2px 8px #14233908; }
.financial-summary-card > strong { color: var(--text-strong); font-size: clamp(23px, 3vw, 29px); letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.financial-summary-card > small { color: var(--muted); }
.financial-summary-card > div { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 10px; margin-top: 3px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.financial-summary-card > div span { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.financial-summary-card > div b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.financial-account-list, .financial-movement-list { display: grid; gap: 9px; }
.financial-account-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(125px, auto); align-items: center; gap: 13px; min-width: 0; padding: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.financial-account-card:hover { border-color: var(--brand); box-shadow: 0 3px 13px #14233910; text-decoration: none; }
.financial-account-mark { display: grid; width: 44px; height: 44px; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 11px; }
.financial-account-mark svg { width: 21px; height: 21px; }
.financial-account-copy, .financial-account-balance, .financial-movement-main, .financial-movement-value { display: grid; min-width: 0; gap: 4px; }
.financial-account-copy strong, .financial-movement-main strong { overflow-wrap: anywhere; }
.financial-account-copy small, .financial-account-balance small, .financial-movement-main small, .financial-movement-value small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.financial-account-balance { justify-items: end; text-align: right; font-variant-numeric: tabular-nums; }
.financial-account-balance strong { color: var(--text-strong); }
.financial-account-balance.is-negative strong, .financial-balance-hero.is-negative strong, .financial-movement-value .is-negative { color: var(--danger); }
.financial-balance-hero { display: grid; gap: 8px; margin-bottom: 18px; padding: clamp(18px, 4vw, 28px); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 8px #14233908; }
.financial-balance-hero > span { color: var(--muted); font-size: 13px; font-weight: 650; }
.financial-balance-hero > strong { color: var(--text-strong); font-size: clamp(30px, 5vw, 42px); line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.financial-balance-hero > small { color: var(--danger); font-weight: 650; }
.financial-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; margin-bottom: 24px; }
.financial-entry-grid > .report-section { min-width: 0; margin: 0; }
.financial-movement-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(125px, auto) auto; align-items: center; gap: 12px; min-width: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.financial-movement-sign { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; font-size: 18px; font-weight: 750; }
.financial-movement-sign.is-positive { color: var(--success); background: var(--success-soft); }
.financial-movement-sign.is-negative { color: var(--danger); background: var(--danger-soft); }
.financial-movement-value { justify-items: end; text-align: right; font-variant-numeric: tabular-nums; }
.financial-movement-value .is-positive { color: var(--success); }
.financial-movement-group { display: grid; gap: 6px; min-width: 0; }
.financial-movement-group > small { color: var(--muted); font-size: 12px; }
.financial-default-list { display: grid; gap: 8px; }
.financial-default-row { display: grid; grid-template-columns: minmax(160px, .9fr) minmax(220px, 1.3fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.financial-default-row > strong { display: grid; gap: 3px; font-size: 13px; }
.financial-default-row > strong small { color: var(--muted); font-size: 11px; font-weight: 550; }
.financial-default-row select { min-width: 0; min-height: 42px; padding: 0 34px 0 11px; color: var(--ink); background: var(--surface-input); border: 1px solid var(--line); border-radius: 8px; }
.financial-account-picker-wrap[hidden] { display: none !important; }
.financial-fx-help { padding: 10px 12px; margin: 0; color: var(--muted); background: var(--surface-muted); border-left: 3px solid var(--brand); border-radius: 6px; font-size: 13px; line-height: 1.5; }
.financial-fx-rate { display: flex; min-height: 46px; align-items: center; padding: 10px 12px; color: var(--muted); background: var(--surface-muted); border: 1px solid var(--line); border-radius: 9px; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] :is(.financial-summary-card, .financial-account-card, .financial-balance-hero, .financial-movement-row, .financial-default-row) { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .financial-default-row select { color: var(--ink); background: var(--surface-input); border-color: var(--line); }
@media (max-width: 760px) {
  .financial-entry-grid { grid-template-columns: 1fr; }
  .financial-movement-row { grid-template-columns: 31px minmax(0, 1fr) auto; }
  .financial-movement-value { grid-column: 2; justify-items: start; text-align: left; }
  .financial-movement-row > .button { grid-column: 3; grid-row: 1 / span 2; }
  .financial-default-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .financial-default-row > strong, .financial-default-row select { grid-column: 1; }
  .financial-default-row > .button { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 520px) {
  .financial-account-card { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .financial-account-mark { width: 38px; height: 38px; }
  .financial-account-copy { grid-column: 2; grid-row: 1; }
  .financial-account-balance { grid-column: 2; justify-items: start; text-align: left; }
  .financial-movement-row { grid-template-columns: 30px minmax(0, 1fr); gap: 8px 10px; }
  .financial-movement-row > .financial-movement-main, .financial-movement-row > .financial-movement-value { grid-column: 2; }
  .financial-movement-row > .financial-movement-value { grid-row: auto; }
  .financial-movement-row > .button { grid-column: 2; grid-row: auto; justify-self: start; }
  .financial-default-row { grid-template-columns: minmax(0, 1fr); }
  .financial-default-row > strong, .financial-default-row select, .financial-default-row > .button { grid-column: 1; grid-row: auto; width: 100%; }
}

/* Daily-work navigation and progressive disclosure */
[hidden], [data-detail-panel][hidden], [data-admin-menu][hidden] { display: none !important; }
summary { cursor: pointer; }
summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.nav-accordion { margin: 7px 0; }
.nav-accordion > summary { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 8px 11px; color: var(--ink); border-radius: 8px; font-size: 14px; font-weight: 650; list-style: none; }
.nav-accordion > summary::-webkit-details-marker,
.workspace-disclosure > summary::-webkit-details-marker,
.page-actions-menu > summary::-webkit-details-marker,
.management-menu > summary::-webkit-details-marker { display: none; }
.nav-accordion > summary:hover { background: var(--surface-hover); }
.nav-accordion[open] > summary { color: var(--brand); background: var(--brand-soft); }
.nav-accordion .disclosure-chevron { margin-left: auto; }
.disclosure-chevron { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; margin-left: 12px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
details[open] > summary > .disclosure-chevron { transform: rotate(225deg); }
.nav-accordion-links { display: grid; gap: 3px; margin: 7px 0 12px 12px; padding-left: 10px; border-left: 1px solid var(--line); }
.nav-accordion-links .nav-link { min-height: 44px; font-size: 13px; }
.nav-accordion-links .nav-icon { width: 17px; height: 17px; }
.sidebar-nav > .nav-link { margin-bottom: 16px; min-height: 46px; }
.management-menu, .page-actions-menu { position: relative; flex: 0 0 auto; }
.management-menu > summary, .page-actions-menu > summary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; list-style: none; }
.management-links, .page-actions-popover { position: absolute; z-index: 55; top: calc(100% + 7px); right: 0; display: grid; min-width: 220px; max-width: min(330px, calc(100vw - 32px)); padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 38px #0002; }
.management-link, .page-actions-popover > :is(a,button) { display: flex; justify-content: flex-start; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; white-space: normal; font-size: 13px; line-height: 1.4; }
.management-link:hover, .page-actions-popover > :is(a,button):hover { text-decoration: none; background: var(--surface-hover); }
.management-link.is-active { background: var(--brand-soft); color: var(--brand); }
.page-actions-popover > .button-danger-outline { color: var(--danger); }
.page-actions-popover .button-danger-outline:hover { background: var(--danger-soft); }
.record-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 4px 0 24px; margin-bottom: 0; border: 0; }
.record-heading > :first-child { min-width: 0; flex: 1; }
.record-heading h1 { margin: 9px 0; font-size: clamp(25px, 3vw, 34px); line-height: 1.2; overflow-wrap: anywhere; }
.record-heading .form-actions { margin-top: 0; }
.record-heading :is(.warehouse-actions,.page-heading-actions) { align-items: center; flex-shrink: 0; }
.detail-tabs { min-width: 0; }
.detail-tab-list { display: flex; gap: 4px; max-width: 100%; margin: 0 0 24px; padding: 0 2px 2px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.detail-tab-list > button { position: relative; flex: 0 0 auto; min-height: 48px; padding: 12px 17px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; font-size: 14px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.detail-tab-list > button:hover { background: var(--surface-hover); }
.detail-tab-list > button[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
[data-detail-panel] { min-width: 0; }
[data-detail-panel] > :last-child { margin-bottom: 0; }
[data-detail-panel]:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; border-radius: 10px; }
.overview-balances { padding-bottom: 22px; margin-top: 0; border-bottom: 1px solid var(--line); }
.workspace-disclosure { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.workspace-disclosure > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 46px; padding: 12px 16px; color: var(--ink); font-size: 14px; font-weight: 650; list-style: none; }
.workspace-disclosure > summary:hover { background: var(--surface-hover); border-radius: 10px; }
.disclosure-body { padding: 6px 16px 18px; }
.extra-fields { margin: 3px 0; }
.extra-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.extra-fields-grid > .field:has(textarea) { grid-column: 1 / -1; }
.extra-fields-grid .field textarea { min-height: 96px; }
.operation-disclosure { margin: 12px 0 20px; border-color: var(--line); }
.operation-disclosure > summary { color: var(--brand); background: var(--brand-soft); }
.operation-disclosure .disclosure-body > .report-section { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.operation-disclosure .disclosure-body { padding-top: 18px; }
.operation-disclosure .payment-entry-form { margin-top: 0; }
.financial-entry-grid { align-items: start; gap: 12px; }
.financial-entry-grid > .workspace-disclosure { margin-top: 0; }
.form-error, .inline-field-error { overflow-wrap: anywhere; }
.inline-field-error { color: var(--danger) !important; font-weight: 550 !important; }
.field [aria-invalid="true"] { border-color: var(--danger); }
.workspace-filter { display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.workspace-filter > label { flex: 1 1 155px; min-width: 0; }
.workspace-filter > label:has(input[type="search"]), .workspace-filter > .search-field { flex: 2 1 250px; }
.workspace-filter > :is(label,.field) > :is(input,select), .workspace-filter .search-field input { width: 100%; min-height: 44px; }
.filter-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.advanced-filters { flex: 0 0 auto; position: relative; }
.advanced-filters[open] { flex: 1 1 100%; order: 4; }
.advanced-filters > summary { min-height: 44px; font-size: 13px; }
.advanced-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: 14px; }
.workspace-filter > button[type="submit"] { min-height: 44px; margin-bottom: 0; }
.active-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 20px; }
.filter-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; max-width: 100%; padding: 7px 12px; border: 1px solid var(--line); border-radius: 24px; color: var(--brand); background: var(--brand-soft); font-size: 12px; overflow-wrap: anywhere; }
.filter-chip:hover { text-decoration: none; border-color: var(--brand); }
.filter-chip > span { font-size: 19px; }
.clear-filters { display: inline-flex; min-height: 44px; align-items: center; padding: 8px; font-size: 12px; }
.record-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: auto; }
.record-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.record-table th { padding: 14px 18px; background: var(--surface-muted); color: var(--muted); text-align: left; font-size: 12px; font-weight: 600; }
.record-table td { padding: 15px 18px; border-top: 1px solid var(--line); vertical-align: middle; }
.record-table tbody tr:hover { background: var(--surface-hover); }
.record-title { display: flex; flex-direction: column; gap: 5px; min-height: 44px; justify-content: center; }
.record-title strong { font-size: 14px; }
.record-title small { color: var(--muted); font-size: 12px; }
.record-amount { font-weight: 650; white-space: nowrap; }
.record-statuses { display: flex; flex-wrap: wrap; gap: 6px; max-width: 250px; }
.record-statuses .status-pill { margin: 0; }
.dashboard-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.dashboard-shortcut { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 66px; padding: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 11px; font-size: 13px; font-weight: 650; }
.dashboard-shortcut:hover { color: var(--brand); background: var(--brand-soft); border-color: var(--brand); text-decoration: none; }
.dashboard-shortcut .nav-icon { flex: 0 0 20px; color: var(--brand); }
.dashboard-shortcut .nav-icon:last-child { width: 16px; height: 16px; margin-left: auto; }
.dashboard-shortcut > span { overflow-wrap: anywhere; }
.dashboard-today { margin-bottom: 28px; }
.dashboard-alert-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 15px; }
.dashboard-alert-heading h2 { margin: 0; font-size: 18px; }
.dashboard-alert-heading .muted { font-size: 12px; }
.dashboard-alert-section h3 { font-size: 15px; margin: 0; }
.dashboard-section-heading > h3 { display: flex; align-items: center; gap: 9px; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 2px 7px; border-radius: 8px; color: var(--warning); background: var(--warning-soft); font-size: 12px; }
.dashboard-calm-empty { padding: 22px 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.dashboard-all-clear { grid-column: 1 / -1; padding: 24px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.dashboard-secondary { margin-top: 20px; }
.dashboard-secondary > summary { min-height: 56px; padding-inline: 22px; }
.dashboard-secondary .disclosure-body { padding-inline: 22px; }
.dashboard-secondary .section-heading { margin-top: 24px; }
.dashboard-secondary .section-heading:first-child { margin-top: 4px; }
.dashboard-secondary .section-heading h3 { font-size: 15px; }
.dashboard-section-error { padding: 18px; border: 1px solid var(--danger-border); border-radius: 10px; background: var(--danger-soft); color: var(--danger); }
.dashboard-section-error p { margin-top: 0; }
html[data-theme="dark"] .nav-accordion > summary,
html[data-theme="dark"] .workspace-disclosure > summary,
html[data-theme="dark"] .record-table th { color: var(--ink); }
html[data-theme="dark"] .nav-accordion[open] > summary,
html[data-theme="dark"] .detail-tab-list > button[aria-selected="true"] { color: var(--brand); }
@media (max-width: 1100px) {
  .dashboard-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-heading { flex-wrap: wrap; }
}
@media (max-width: 820px) {
  .account-menu { gap: 5px; }
  .account-menu .user-avatar { display: none; }
  .management-menu > summary { min-height: 44px; padding: 8px; font-size: 12px; }
  .account-menu [data-action="logout"] { min-height: 44px; padding-inline: 8px; font-size: 12px; }
  .theme-toggle { min-height: 44px; }
  .theme-toggle [data-theme-label] { display: none; }
  .brand-copy small { display: none; }
  .record-heading { display: block; padding-top: 0; }
  .record-heading :is(.warehouse-actions,.page-heading-actions) { justify-content: flex-start; margin-top: 20px; }
  .detail-tab-list { margin-bottom: 20px; }
  .detail-tab-list > button { padding-inline: 14px; }
  .dashboard-shortcuts { gap: 9px; margin-bottom: 20px; }
  .dashboard-shortcut { gap: 8px; padding: 12px; font-size: 12px; }
  .dashboard-shortcut .nav-icon:last-child { display: none; }
  .dashboard-alert-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .dashboard-row { gap: 14px; }
  .dashboard-row-meta { max-width: 44%; }
  .extra-fields-grid { grid-template-columns: minmax(0, 1fr); }
  .financial-entry-grid { grid-template-columns: minmax(0, 1fr); }
  .workspace-filter > label { flex-basis: 100%; }
  .workspace-filter > .search-field { flex-basis: 100%; }
  .advanced-filters { flex: 1 1 auto; }
  .workspace-filter > button[type="submit"] { flex: 1 1 auto; }
  .workspace-filter .advanced-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .record-table-wrap { border: 0; background: transparent; overflow: visible; }
  table[data-mobile-cards] { display: block; width: 100%; min-width: 0 !important; border: 0; background: transparent; }
  table[data-mobile-cards] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table[data-mobile-cards] tbody { display: grid; gap: 12px; }
  table[data-mobile-cards] tbody tr { display: grid; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
  table[data-mobile-cards] tbody td { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; min-width: 0; max-width: 100%; padding: 9px 0; border: 0; white-space: normal; text-align: right; overflow-wrap: anywhere; }
  table[data-mobile-cards] tbody td::before { content: attr(data-label); flex: 0 0 90px; max-width: 42%; color: var(--muted); text-align: left; font-size: 12px; font-weight: 500; }
  table[data-mobile-cards] tbody td[colspan] { display: block; text-align: center; }
  table[data-mobile-cards] tbody td[colspan]::before { display: none; }
  table[data-mobile-cards] .record-title { align-items: flex-end; min-width: 0; }
  table[data-mobile-cards] .record-statuses { justify-content: flex-end; }
  table[data-mobile-cards].has-header-controls thead { position: static; display: block; width: auto; height: auto; clip-path: none; margin-bottom: 12px; }
  table[data-mobile-cards].has-header-controls thead tr { display: flex; }
  table[data-mobile-cards].has-header-controls thead th { display: none; }
  table[data-mobile-cards].has-header-controls thead th:has(input,button) { display: block; padding: 10px; border: 0; background: var(--surface); }
}
@media (max-width: 390px) {
  .topbar { padding-inline: 10px; gap: 7px; }
  .brand-copy strong { font-size: 15px; }
  .theme-toggle { padding-inline: 9px; }
  .management-menu > summary { font-size: 11px; }
  .page-shell, .page-shell.narrow-shell { padding-inline: 16px; }
}
@media print {
  .nav-accordion, .management-menu, .page-actions-menu, .detail-tab-list { display: none !important; }
}
.button { min-height: 44px; }
:is(.icon-button,.drive-icon-button) { min-height: 44px; min-width: 44px; }
.workspace-filter > label { align-items: stretch; text-align: left; }
.workspace-filter .filter-label { width: 100%; text-align: left; }
.directory-contact { display: grid; gap: 5px; overflow-wrap: anywhere; }
.dashboard-section-heading .text-link, .section-heading > .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.table-selection { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.table-selection input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }

/* Guided daily tasks */
.daily-context-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: -4px 0 22px; }
.daily-entry-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 26px 0; }
.daily-entry-choices .button { min-height: 100px; padding: 20px; text-align: center; white-space: normal; font-size: 16px; }
.daily-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 24px 0; padding: 0; list-style: none; }
.daily-steps li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 12px 0; border-bottom: 2px solid var(--line); color: var(--muted); font-size: 12px; }
.daily-steps li > span { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-muted); font-size: 12px; }
.daily-steps li > strong { overflow-wrap: anywhere; font-weight: 550; }
.daily-steps li.is-current { color: var(--brand); border-bottom-color: var(--brand); }
.daily-steps li.is-current > span { color: var(--surface); background: var(--brand); border-color: var(--brand); }
.daily-steps li.is-complete { color: var(--success); border-bottom-color: var(--success); }
.daily-step-heading { margin: 0; font-size: 20px; line-height: 1.4; }
.daily-part { display: grid; gap: 18px; min-width: 0; }
.daily-part .form-row:has(.daily-select-search) { grid-template-columns: minmax(0, 1fr); }
.daily-select-search { margin-bottom: 2px; }
.daily-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.daily-footer .daily-step-count { margin-right: auto; color: var(--muted); font-size: 12px; }
.daily-footer .button { min-width: 110px; }
.daily-footer [data-daily-draft] { flex-basis: 100%; margin-top: 2px; }
.daily-summary { display: grid; gap: 0; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.daily-summary > div { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr) auto; align-items: center; gap: 12px; min-height: 62px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.daily-summary > div:last-child { border-bottom: 0; }
.daily-summary dt { color: var(--muted); font-size: 13px; }
.daily-summary dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.daily-summary .text-button { min-height: 44px; padding: 8px; font-size: 12px; }
.daily-review-lines { display: grid; gap: 0; margin: 0 0 22px; padding: 0; list-style: none; }
.daily-review-lines li { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.daily-review-lines li > strong { margin-right: auto; }
.daily-review-lines li > span { color: var(--muted); }
.daily-roll-preview { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted); }
.daily-roll-preview > img { width: 58px; height: 58px; flex: 0 0 58px; object-fit: cover; border-radius: 7px; }
.daily-roll-preview > div { display: grid; gap: 5px; min-width: 0; }
.daily-roll-preview strong { font-size: 14px; overflow-wrap: anywhere; }
.daily-roll-preview span, .daily-roll-preview small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.daily-success { margin-top: 14px; }
.daily-success-mark { display: grid; width: 52px; height: 52px; margin-bottom: 24px; place-items: center; border-radius: 16px; background: var(--success-soft); color: var(--success); font-size: 28px; font-weight: 700; }
.daily-success-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.daily-error:not([hidden]) { margin-bottom: 0; }
html[data-theme="dark"] .daily-steps li.is-current > span { color: #0d1826; }
@media (max-width: 600px) {
  .daily-entry-choices { grid-template-columns: minmax(0, 1fr); }
  .daily-entry-choices .button { min-height: 82px; }
  .daily-steps { gap: 6px; margin-block: 20px; }
  .daily-steps li { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 11px; }
  .daily-steps li strong { line-height: 1.45; }
  .daily-summary > div { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 13px; }
  .daily-summary dt { grid-column: 1 / -1; }
  .daily-summary .text-button { grid-column: 2; grid-row: 2; }
  .daily-footer .button { min-width: 92px; }
  .daily-success-actions { display: grid; }
}

/* Fabric cards and their immutable sample history */
.fabric-card-filters { align-items: end; }
.fabric-card-list { display: grid; gap: 9px; }
.fabric-card-list-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.fabric-card-label-choice { display: grid; min-width: 44px; min-height: 44px; place-items: center; cursor: pointer; }
.fabric-card-label-choice input, .fabric-card-variant-choice input { width: 18px; height: 18px; accent-color: var(--brand); }
.fabric-card-list-main { display: grid; gap: 4px; min-width: 0; color: var(--ink); }
.fabric-card-list-main strong { font-size: 15px; }
.fabric-card-list-main small { color: var(--muted); }
.fabric-card-code { margin: 0; color: var(--brand); font: 750 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.fabric-card-label-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.fabric-card-label-toolbar > span { margin-right: auto; color: var(--muted); font-size: 13px; }
.fabric-card-picker { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.fabric-card-picker .section-heading { align-items: start; margin: 0; }
.fabric-card-picker .section-heading h2 { margin: 0 0 5px; }
.fabric-card-picker .section-heading p { margin: 0; }
.fabric-card-variant-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fabric-card-variant-group { display: grid; gap: 8px; }
.fabric-card-variant-group[hidden] { display: none; }
.inline-link-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.inline-link-list a { color: var(--brand); font-weight: 650; }
.fabric-card-variant-choice { display: grid; grid-template-columns: 30px 54px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; min-height: 72px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; }
.fabric-card-variant-choice:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent); }
.fabric-card-variant-photo, .fabric-card-item-photo { display: grid; width: 52px; height: 52px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-muted); color: var(--muted); font-size: 10px; }
.fabric-card-variant-photo img, .fabric-card-item-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fabric-card-variant-copy { display: grid; gap: 4px; min-width: 0; }
.fabric-card-variant-copy strong, .fabric-card-variant-copy small { overflow-wrap: anywhere; }
.fabric-card-variant-copy strong { font-size: 13px; }
.fabric-card-variant-copy small { color: var(--muted); font-size: 11px; }
.fabric-card-detail .detail-heading { align-items: center; }
.fabric-card-detail .detail-heading h1 { margin: 6px 0; }
.fabric-card-detail .detail-heading .muted { margin: 0; }
.fabric-card-items-section { display: grid; gap: 14px; }
.fabric-card-item { min-width: 0; padding: clamp(14px, 3vw, 22px); background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.fabric-card-item-heading { display: grid; grid-template-columns: 42px 64px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fabric-card-item-number { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-weight: 750; font-variant-numeric: tabular-nums; }
.fabric-card-item-photo { width: 62px; height: 62px; }
.fabric-card-item-heading h2 { margin: 2px 0 4px; font-size: 17px; }
.fabric-card-item-heading p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.fabric-card-stock-total { display: grid; justify-items: end; gap: 4px; text-align: right; }
.fabric-card-stock-total strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.fabric-card-stock-total small, .fabric-card-stock-roll small { color: var(--muted); font-size: 12px; }
.fabric-card-stock-breakdown { padding: 15px 0; }
.fabric-card-stock-breakdown h3 { margin-bottom: 5px; font-size: 14px; }
.fabric-card-stock-rolls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.fabric-card-stock-roll { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface-muted); }
.fabric-card-stock-roll > span { display: grid; gap: 3px; min-width: 0; }
.fabric-card-stock-roll strong { overflow-wrap: anywhere; font-size: 13px; }
.fabric-card-stock-roll b { white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }
.fabric-card-cut-history, .fabric-card-cut-form-details { border-top: 1px solid var(--line); }
.fabric-card-cut-history summary, .fabric-card-cut-form-details summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; color: var(--brand); font-size: 13px; font-weight: 680; cursor: pointer; }
.fabric-card-cut-history summary span { color: var(--muted); font-size: 12px; font-weight: 500; text-align: right; }
.fabric-card-cut-form { max-width: 620px; padding: 8px 0 5px; }
.fabric-card-cut-unavailable { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.fabric-card-note { margin: 16px 0 0; white-space: pre-wrap; }
html[data-theme="dark"] .fabric-card-variant-choice:has(input:checked) { box-shadow: 0 0 0 2px #9cc6ee33; }
@media (max-width: 760px) {
  .fabric-card-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .fabric-card-filters .search-field { grid-column: 1 / -1; }
  .fabric-card-filters > button { grid-column: 1 / -1; }
  .fabric-card-variant-picker, .fabric-card-stock-rolls { grid-template-columns: minmax(0, 1fr); }
  .fabric-card-detail .detail-heading { display: grid; }
  .fabric-card-detail .warehouse-actions { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .fabric-card-list-item { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 12px; }
  .fabric-card-list-item > .status-pill { grid-column: 2; justify-self: start; }
  .fabric-card-variant-choice { grid-template-columns: 26px 46px minmax(0, 1fr); padding: 7px; gap: 7px; }
  .fabric-card-variant-photo { width: 44px; height: 44px; }
  .fabric-card-item-heading { grid-template-columns: 34px 52px minmax(0, 1fr); gap: 8px; }
  .fabric-card-item-number { width: 32px; height: 32px; }
  .fabric-card-item-photo { width: 50px; height: 50px; }
  .fabric-card-stock-total { grid-column: 3; justify-items: start; text-align: left; }
  .fabric-card-cut-history summary { align-items: flex-start; flex-direction: column; justify-content: center; }
  .fabric-card-label-toolbar { align-items: stretch; }
  .fabric-card-label-toolbar > span { flex-basis: 100%; }
  .fabric-card-label-toolbar .button { flex: 1 1 100%; }
}
.fabric-composition-editor {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--border, #d7e0e9);
  border-radius: 0.85rem;
  min-width: 0;
}

.fabric-composition-editor legend { padding-inline: 0.35rem; font-weight: 700; }
.fabric-composition-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(8rem, 0.7fr) auto; gap: 0.75rem; align-items: end; }
.fabric-variant-code-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.fabric-variant-code-list span, .fabric-variant-code-list small { padding: 0.2rem 0.45rem; border-radius: 999px; background: var(--surface-muted, #eef3f8); font-size: 0.75rem; }
.fabric-variant-code-list strong { color: var(--brand, #183d65); }

@media (max-width: 600px) {
  .fabric-composition-row { grid-template-columns: minmax(0, 1fr) auto; }
  .fabric-composition-row label:first-child { grid-column: 1 / -1; }
}