/* Warehouse presentation system. Existing form, route and JavaScript contracts
   remain owned by the page templates and their original controllers. */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-muted: #f8f9fb;
  --surface-elevated: #ffffff;
  --ink: #202939;
  --text-secondary: #526077;
  --muted: #657186;
  --line: #e2e6ed;
  --border-strong: #c8d0dc;
  --primary: #4059ce;
  --primary-hover: #344bb8;
  --primary-subtle: #edf1ff;
  --green: var(--primary);
  --green-2: var(--primary-subtle);
  --success: #17764b;
  --success-subtle: #eaf6ef;
  --warning: #94630d;
  --warning-subtle: #fff7e7;
  --danger: #b3343e;
  --danger-subtle: #fff0f1;
  --info: #3066a3;
  --info-subtle: #ecf3fc;
  --wb: #7b42b1;
  --ozon: #2e65cb;
  --focus-ring: 0 0 0 3px #4059ce20;
  --shadow: 0 8px 24px #20293912, 0 1px 3px #2029390a;
  --shadow-dialog: 0 18px 56px #20293926;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-dialog: 12px;
  --font-body: 13px;
  --font-small: 12px;
  --font-title: 25px;
  --control-height: 34px;
  --sidebar-width: 220px;
  --topbar-height: 56px;
  --table-font-size: 13px;
  --table-header-font-size: 11px;
  --table-cell-padding-y: 7px;
  --table-cell-padding-x: 10px;
  --table-header-bg: var(--surface-muted);
  --table-hover-bg: #f6f8fc;
  --table-selected-bg: var(--primary-subtle);
  --table-strong-header-bg: #3b485d;
}

body { color: var(--ink); background: var(--bg); font-size: var(--font-body); line-height: 1.5; }
[hidden] { display: none !important; }
.ui-icon { flex: 0 0 auto; vertical-align: middle; }
a { text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Persistent navigation, with an independent scroll area on short laptops. */
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: var(--sidebar-width); display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); }
.app-sidebar .brand { min-height: 76px; padding: 16px 18px; gap: 10px; color: var(--ink); }
.app-sidebar .brand-mark { width: 34px; height: 34px; border-radius: 9px; color: #fff; background: var(--primary); }
.brand-copy { display: grid; gap: 0; line-height: 1.25; }
.brand-copy strong { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.brand-copy small { font-size: 11px; font-weight: 500; color: var(--muted); }
.app-nav { min-height: 0; overflow-y: auto; padding: 0 10px 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.app-nav-group + .app-nav-group { margin-top: 8px; }
.app-nav-group { border: 0; }
.app-nav-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0; padding: 8px 10px; border-radius: var(--radius-control); color: var(--text-secondary); font-size: 10px; line-height: 20px; font-weight: 650; letter-spacing: .7px; text-transform: uppercase; cursor: pointer; list-style: none; }
.app-nav-label::-webkit-details-marker { display: none; }
.app-nav-label:hover { background: var(--surface-muted); }
.app-nav-label > .ui-icon { color: var(--muted); transition: transform .15s ease; }
.app-nav-group[open] > .app-nav-label > .ui-icon { transform: rotate(180deg); }
.app-nav-group-icon { display: none; }
.app-nav-item { position: relative; display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 6px 10px; border-radius: var(--radius-control); color: var(--text-secondary); text-decoration: none; font-size: 12px; line-height: 20px; font-weight: 500; }
.app-nav-item .ui-icon { color: #7e8899; width: 17px; height: 17px; }
.app-nav-item span { min-width: 0; white-space: normal; }
.app-nav-item:hover { background: var(--surface-muted); color: var(--ink); }
.app-nav-item.is-active { color: var(--primary); background: var(--primary-subtle); font-weight: 650; }
.app-nav-item.is-active .ui-icon { color: var(--primary); }
.app-nav-item.is-active::after { content: ''; position: absolute; right: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }
.app-nav-item.is-planned { color: var(--muted); cursor: default; opacity: .7; }
.app-nav-item.is-planned:hover { background: transparent; color: var(--muted); }
.app-nav-item.is-planned > span { white-space: normal; font-size: 11px; line-height: 16px; }
.app-nav-item.is-planned small { margin-left: auto; color: var(--muted); font-size: 9px; }
.app-sidebar-footer { margin-top: auto; padding: 9px 10px; border-top: 1px solid var(--line); background: var(--surface); }

/* The header carries only existing workspace and session controls. */
body.app-shell .topbar { height: var(--topbar-height); margin-left: var(--sidebar-width); padding: 0 var(--space-6); color: var(--ink); background: var(--surface); border-bottom: 1px solid var(--line); z-index: 10; gap: 16px; }
.topbar-context, .topbar-actions { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-context { font-size: 12px; color: var(--muted); }
.topbar-context strong { color: var(--text-secondary); font-weight: 550; }
.topbar-divider { color: var(--border-strong); }
.topbar-actions { flex: 0 0 auto; gap: 20px; }
.topbar-actions form { margin: 0; }
body.app-shell .version-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-muted); color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; cursor: pointer; }
body.app-shell .version-indicator:hover { background: var(--primary-subtle); border-color: #d4dcf8; color: var(--primary); }
body.app-shell .app-user-action { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 500; padding: 4px 0; }
body.app-shell .app-user-action:hover { color: var(--ink); }
.app-preview-note { margin: 0 0 0 var(--sidebar-width); padding: 8px 24px; color: var(--warning); background: var(--warning-subtle); }
body.app-shell main.page { width: calc(100% - var(--sidebar-width)); margin-left: var(--sidebar-width); max-width: none; padding: 24px 24px 48px; min-width: 0; }
body.app-shell .page-head, body.app-shell .warehouse-page-head { margin: 0 0 20px; align-items: center; gap: 20px; }
body.app-shell .page h1 { font-size: var(--font-title); line-height: 1.25; letter-spacing: -.65px; margin: 3px 0 6px; font-weight: 650; }
body.app-shell .page h2 { font-size: 16px; line-height: 1.4; letter-spacing: -.15px; font-weight: 650; }
body.app-shell .page h3 { font-size: 14px; font-weight: 650; }
body.app-shell .eyebrow { font-size: 10px; line-height: 1.6; letter-spacing: .9px; color: var(--muted); font-weight: 650; }
body.app-shell .warehouse-page-head p:not(.eyebrow), body.app-shell .page-head .muted { max-width: 860px; margin: 4px 0 0; color: var(--muted); font-size: 12px; }
body.app-shell .small { font-size: var(--font-small); }
body.app-shell .actions { flex-wrap: wrap; gap: var(--space-2); }
/* All destinations are present in the sidebar; retain original links in DOM. */
body.app-shell .warehouse-nav-row { margin: -6px 0 14px; border: 0; }
body.app-shell .warehouse-nav-row .warehouse-subnav, body.app-shell nav.warehouse-subnav[aria-label="Продажи"] { display: none; }
body.app-shell .warehouse-back { margin: 0; padding: 0; min-height: 20px; background: transparent; border: 0; color: var(--muted); font-size: 11px; font-weight: 500; }
body.app-shell .warehouse-back:hover { color: var(--primary); }
body.app-shell .warehouse-subnav { margin: 0 0 20px; padding: 0; gap: 6px; border-bottom: 1px solid var(--line); overflow-x: auto; }
body.app-shell .warehouse-subnav a { border-bottom-width: 2px; padding: 8px 10px; font-size: 12px; font-weight: 550; white-space: nowrap; }

/* Fields have one rhythm, including the existing custom details/select menus. */
body.app-shell main.page :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"])) { height: var(--control-height); min-width: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); padding: 6px 9px; font: inherit; font-size: 12px; line-height: 20px; box-shadow: none; }
body.app-shell main.page textarea { height: auto; min-height: 76px; resize: vertical; }
body.app-shell main.page :is(input, select, textarea):hover { border-color: #aeb9cb; }
body.app-shell main.page :is(input, select, textarea):focus-visible { border-color: var(--primary); outline: none; box-shadow: var(--focus-ring); }
body.app-shell main.page :is(input, select, textarea):disabled { color: #8d96a7; background: #f2f4f7; border-color: var(--line); cursor: not-allowed; opacity: 1; }
body.app-shell main.page input[readonly] { background: var(--surface-muted); color: var(--text-secondary); }
body.app-shell main.page :is(input, select, textarea)[aria-invalid="true"], body.app-shell main.page :is(input, select, textarea):user-invalid { border-color: var(--danger); }
body.app-shell main.page input::placeholder { color: #8a95a6; }
body.app-shell main.page input:is([type="checkbox"], [type="radio"]) { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; accent-color: var(--primary); vertical-align: middle; cursor: pointer; }
body.app-shell main.page input:is([type="checkbox"], [type="radio"]):disabled { cursor: not-allowed; }
body.app-shell main.page :is(.warehouse-filter-panel, .sales-filters, .sales-fields, .warehouse-document-fields, .product-create-grid) label { font-size: 11px; font-weight: 550; color: var(--text-secondary); gap: 5px; }
body.app-shell .warehouse-filter-label, body.app-shell .sales-product-filter > span, body.app-shell .sales-period-filter > span, body.app-shell .sales-filters > div > span { font-size: 11px; font-weight: 550; color: var(--text-secondary); }
body.app-shell :is(.warehouse-multiselect, .multi-filter, .warehouse-picker-multi) > summary { display: flex; align-items: center; gap: 6px; height: var(--control-height); min-height: var(--control-height); padding: 6px 28px 6px 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.app-shell :is(.warehouse-multiselect, .multi-filter, .warehouse-picker-multi)[open] > summary { border-color: var(--primary); box-shadow: var(--focus-ring); }
body.app-shell :is(.warehouse-multiselect-menu, .warehouse-stock-column-picker-menu, .multi-filter__menu, .column-picker-menu, .sales-period-popover, .warehouse-picker-multi > div, .sales-sync__accounts) { border-color: var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow); background: var(--surface-elevated); max-width: calc(100vw - 48px); }
body.app-shell :is(.warehouse-multiselect-menu, .multi-filter__menu, .warehouse-stock-column-picker-menu) label { padding: 6px; border-radius: 4px; gap: 8px; font-size: 12px; font-weight: 400; }
body.app-shell :is(.warehouse-multiselect-menu, .multi-filter__menu) label:hover { background: var(--surface-muted); }

/* Existing primary/secondary classes and all original actions are preserved. */
body.app-shell main.page :is(.primary, .secondary, .button) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-height); height: auto; padding: 6px 11px; border-radius: var(--radius-control); font-size: 12px; line-height: 20px; font-weight: 550; white-space: nowrap; box-shadow: 0 1px 2px #20293906; }
body.app-shell main.page .primary { background: var(--primary); color: #fff; border-color: var(--primary); }
body.app-shell main.page .primary:hover:enabled { background: var(--primary-hover); border-color: var(--primary-hover); }
body.app-shell main.page .secondary { background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border-strong); }
body.app-shell main.page .secondary:hover:enabled, body.app-shell main.page a.secondary:hover { background: var(--surface-muted); color: var(--ink); }
body.app-shell main.page button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
body.app-shell main.page .data-table :is(.primary, .secondary, .button) { min-height: 26px; padding: 3px 7px; font-size: 11px; line-height: 18px; box-shadow: none; }
body.app-shell main.page :is(.danger, .danger-lite, [data-document-delete]), body.app-shell main.page form[action$="/archive"] button { color: var(--danger); border-color: #edc7cb; background: var(--surface); }
body.app-shell main.page :is(.danger, .danger-lite, [data-document-delete]):hover:enabled, body.app-shell main.page form[action$="/archive"] button:hover:enabled { background: var(--danger-subtle); border-color: #d99da4; }
body.app-shell .warehouse-view-switch { gap: 0; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: #eef1f6; }
body.app-shell main.page .warehouse-view-switch .button { min-height: 28px; border: 0; background: transparent; padding: 4px 10px; color: var(--muted); box-shadow: none; }
body.app-shell main.page .warehouse-view-switch .button.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px #20293912; }

/* Compact filters, working document forms and existing aggregate values. */
body.app-shell :is(.warehouse-filter-panel, .turnover-filter-panel, .sales-filters) { padding: 14px; margin: 0 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); gap: 10px; }
body.app-shell .warehouse-stocks-filter { display: block; padding: 14px; margin: 0 0 16px; border-radius: var(--radius-panel); background: var(--surface); }
body.app-shell .warehouse-stocks-filter-grid { grid-template-columns: minmax(128px,1fr) minmax(200px,1.6fr) repeat(3,minmax(126px,1fr)) minmax(100px,.8fr) minmax(140px,1fr); gap: 10px; }
body.app-shell .warehouse-filter-footer { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); }
body.app-shell .warehouse-filter-footer .muted { font-size: 11px; }
body.app-shell .warehouse-stocks-summary-row { gap: 12px; margin: 0 0 12px; }
body.app-shell .warehouse-scope-note { color: var(--muted); font-size: 11px; padding: 0; margin: 0; }
body.app-shell .warehouse-scope-note strong { color: var(--text-secondary); font-weight: 550; }
body.app-shell .warehouse-table-toolbar { flex-wrap: wrap; gap: 6px; }
body.app-shell main.page .warehouse-table-toolbar .secondary { min-height: 28px; padding: 3px 9px; font-size: 11px; }
body.app-shell .sales-filters { grid-template-columns: repeat(4,minmax(0,1fr)); }
body.app-shell .sales-filters .sales-search { grid-column: span 2; }
body.app-shell .sales-filters .multi-filter { min-width: 0; }
body.app-shell .sales-filter-actions { flex-direction: row; }
body.app-shell .sales-filter-actions :is(button, a) { width: auto; }
body.app-shell :is(.warehouse-document-fields, .warehouse-document-summary, .sales-fields) { gap: 12px; }
body.app-shell .warehouse-document-fields { padding: 16px; border-radius: var(--radius-panel); grid-template-columns: repeat(4,minmax(0,1fr)); }
body.app-shell .warehouse-document-fields .wide-field { grid-column: span 2; }
body.app-shell .warehouse-document-fields:has([name="source_warehouse_id"]):has([name="destination_warehouse_id"]) label:has([name="source_warehouse_id"]) { border-left: 2px solid var(--info); padding-left: 10px; }
body.app-shell .warehouse-document-fields:has([name="source_warehouse_id"]):has([name="destination_warehouse_id"]) label:has([name="destination_warehouse_id"]) { border-left: 2px solid var(--success); padding-left: 10px; }
body.app-shell .warehouse-document-summary > div { padding: 12px 14px; border-radius: var(--radius-panel); }
body.app-shell .warehouse-document-summary strong { font-size: 13px; font-variant-numeric: tabular-nums; }
body.app-shell .warehouse-document-title-row { gap: 16px; }
body.app-shell .warehouse-document-head-save { padding-left: 16px; border-left: 1px solid var(--line); }
body.app-shell .post-checkbox { font-size: 12px; font-weight: 500; }
body.app-shell :is(.warehouse-comment, .warehouse-add-line, .warehouse-settings-card, .sales-panel, .warehouse-future-card, .mapping-form, .history-list, .crpt-panel, .crpt-disabled) { border-color: var(--line); border-radius: var(--radius-panel); box-shadow: none; }
body.app-shell .warehouse-settings-card { padding: 16px; min-width: 0; }
body.app-shell .warehouse-settings-grid { gap: 16px; }
body.app-shell .warehouse-create-form { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
body.app-shell .warehouse-create-form button { align-self: end; }
body.app-shell .warehouse-empty-lines, body.app-shell .empty-state { border-radius: var(--radius-panel); border-color: var(--line); color: var(--muted); }
body.app-shell .compact-empty { padding: 36px 20px; }
body.app-shell .warehouse-future-card { max-width: 900px; padding: 24px; }
body.app-shell .warehouse-future-card p { max-width: 740px; color: var(--text-secondary); }
body.app-shell .inventory-flow span { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-muted); color: var(--text-secondary); font-size: 12px; font-weight: 500; }
body.app-shell .inventory-flow b { color: var(--muted); font-weight: 400; }
body.app-shell :is(.sales-list-totals, .sales-metrics, .turnover-totals) { background: var(--surface); border-color: var(--line); border-radius: var(--radius-panel); font-size: 12px; padding: 12px 14px; }
body.app-shell .sales-list-totals > strong { font-size: 12px; color: var(--muted); font-weight: 550; }
body.app-shell .sales-list-totals span strong { color: var(--ink); font-weight: 650; }
body.app-shell .sales-pagination { gap: 12px; color: var(--muted); font-size: 11px; }
body.app-shell .sales-pagination label { display: flex; align-items: center; gap: 8px; }
body.app-shell .sales-pagination select { width: auto; min-width: 68px; }

/* A common, restrained status language uses the original status class values. */
body.app-shell .warehouse-status { padding: 2px 7px; gap: 4px; border-radius: 4px; font-size: 11px; line-height: 18px; font-weight: 550; background: #eef1f5; color: var(--text-secondary); }
body.app-shell .warehouse-status:is(.new, .processing, .preparing, .ready, .shipped, .in_transit, .at_pickup_point) { background: var(--info-subtle); color: var(--info); }
body.app-shell .warehouse-status:is(.posted, .completed, .returned, .received, .delivered) { background: var(--success-subtle); color: var(--success); }
body.app-shell .warehouse-status:is(.attention, .returning, .review, .partial) { background: var(--warning-subtle); color: var(--warning); }
body.app-shell .warehouse-status:is(.failed, .error, .cancelled, .deleted, .refused) { background: var(--danger-subtle); color: var(--danger); }
body.app-shell .market-value, body.app-shell .market-badge { padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 650; background: var(--surface-muted); }
body.app-shell :is(.market-value, .market-badge).wb { background: #f3edfa; color: var(--wb); }
body.app-shell :is(.market-value, .market-badge).ozon { background: #edf3fe; color: var(--ozon); }
body.app-shell .flash { padding: 10px 12px; font-size: 12px; border-radius: var(--radius-control); }
body.app-shell .flash:not(.success, .error, .warning) { color: var(--text-secondary); background: var(--surface-muted); border-color: var(--line); }
body.app-shell .flash.success { color: var(--success); background: var(--success-subtle); border-color: #cce7d6; }
body.app-shell .flash.error, body.app-shell .warehouse-stock-warning { color: var(--danger); background: var(--danger-subtle); border-color: #ecc7cd; }
body.app-shell .flash.warning { color: var(--warning); background: var(--warning-subtle); border-color: #ebd9b7; }
body.app-shell .release-state { border-radius: var(--radius-control); font-size: 12px; }
body.app-shell .release-state.ok { background: var(--success-subtle); color: var(--success); }
body.app-shell .release-state.warn { background: var(--warning-subtle); color: var(--warning); }

/* Native dialogs keep their original controls and controllers. */
body.app-shell dialog { max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); border: 1px solid var(--line); border-radius: var(--radius-dialog); box-shadow: var(--shadow-dialog); color: var(--ink); background: var(--surface-elevated); overflow-y: auto; }
body.app-shell dialog::backdrop { background: #20293966; }
body.app-shell :is(.version-dialog, .bulk-dialog, .product-create-dialog, .product-import-dialog) { border-radius: var(--radius-dialog); }
body.app-shell .version-dialog { width: min(600px,calc(100vw - 48px)); padding: 24px; }
body.app-shell .version-dialog form { width: 100%; padding: 0; }
body.app-shell .version-dialog .secondary { min-height: var(--control-height); padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); color: var(--text-secondary); background: var(--surface); font-size: 12px; }
body.app-shell dialog[data-fbs-dialog] { width: 100%; max-width: min(720px,calc(100vw - 48px)); }
body.app-shell .version-dialog h2 { margin: 4px 0 14px; font-size: 23px; font-weight: 650; }
body.app-shell .release-details > div { padding: 10px 0; border-color: var(--line); }
body.app-shell .release-details dt { color: var(--muted); font-size: 11px; }
body.app-shell .release-details dd { color: var(--ink); font-size: 12px; }
body.app-shell .warehouse-picker-dialog { padding: 0; }
body.app-shell :is(.warehouse-picker-head, .warehouse-picker-footer, .bulk-dialog-header, .bulk-dialog-actions) { border-color: var(--line); }
body.app-shell .warehouse-picker-head { padding: 16px 20px 12px; }
body.app-shell .warehouse-picker-filters { padding: 12px 20px; background: var(--surface-muted); }
body.app-shell .warehouse-picker-footer { padding: 12px 20px; }
body.app-shell .dialog-close { border-radius: var(--radius-control); color: var(--muted); background: transparent; }
body.app-shell .dialog-close:hover { background: var(--surface-muted); color: var(--ink); }

/* Sales analytics and FBS remain connected to the original data and jobs. */
body.app-shell .sales-sync { margin: 0 0 18px; padding: 10px 12px; border-radius: var(--radius-panel); font-size: 11px; }
body.app-shell .sales-sync--ok { color: var(--success); }
body.app-shell .sales-sync--stale, body.app-shell .sales-sync--waiting { color: var(--warning); }
body.app-shell .sales-sync--error { color: var(--danger); }
body.app-shell .sales-sync small { font-size: 11px; }
body.app-shell .sales-sync__summary strong { font-weight: 550; }
body.app-shell .sales-analytics { padding: 14px; margin: 0 0 20px; border-radius: var(--radius-panel); }
body.app-shell .sales-analytics__toolbar { gap: 10px 12px; padding-bottom: 12px; }
body.app-shell .sales-analytics__segments { border-color: var(--line); border-radius: var(--radius-control); background: var(--surface-muted); }
body.app-shell .sales-analytics__segments button { min-height: 30px; padding: 5px 10px; font-size: 11px; font-weight: 550; border-color: var(--line); }
body.app-shell .sales-analytics__segments button.is-active { background: var(--primary-subtle); color: var(--primary); }
body.app-shell .sales-analytics__chip, body.app-shell .sales-analytics__all { min-height: 30px; padding: 4px 8px; border-color: var(--line); border-radius: var(--radius-control); font-size: 11px; font-weight: 500; }
body.app-shell .sales-analytics__all.is-active { background: var(--primary-subtle); color: var(--primary); border-color: #cbd5f4; }
body.app-shell .sales-analytics__compare { min-height: 26px; font-size: 11px; font-weight: 500; }
body.app-shell .sales-chart-card { border-radius: var(--radius-control); padding: 12px; }
body.app-shell .sales-chart-card h2 { font-size: 13px; }
body.app-shell .sales-chart-card__total strong { font-size: 19px; }
body.app-shell .sales-chart-card__custom { background: var(--surface-muted); border-radius: var(--radius-control); }
body.app-shell .sales-chart-bar.current { fill: var(--primary); }
body.app-shell .sales-chart-grid { stroke: var(--line); }
body.app-shell .sales-chart-card__legend-item::before { background: var(--primary); }
body.app-shell .fbs-toolbar { gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
body.app-shell .fbs-filters { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; padding: 12px 14px; }
body.app-shell .fbs-toolbar:has([data-fbs-quick]), body.app-shell .fbs-toolbar:has([data-fbs-selected]) { padding: 2px 0; border: 0; background: transparent; margin: 8px 0; }
body.app-shell .fbs-toolbar:has([data-fbs-quick]) .secondary, body.app-shell .fbs-toolbar:has([data-fbs-selected]) .secondary { min-height: 28px; padding: 3px 8px; font-size: 11px; }
body.app-shell .fbs-toolbar:has([data-fbs-selected]) { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
body.app-shell .fbs-note { color: var(--muted); font-size: 11px; }
body.app-shell .fbs-settings { margin-top: 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
body.app-shell .fbs-settings > summary { color: var(--text-secondary); font-size: 12px; font-weight: 550; cursor: pointer; }
body.app-shell .allocation-priority-panel, body.app-shell .allocation-sync-panel, body.app-shell .allocation-automation-panel { border-color: var(--line); border-radius: var(--radius-panel); background: var(--surface); }
body.app-shell .allocation-priority-item { border-color: var(--line); border-radius: var(--radius-control); background: var(--surface-muted); }
body.app-shell .allocation-priority-number { background: var(--primary-subtle); color: var(--primary); }
body.app-shell .allocation-priority-list { flex-wrap: wrap; }
body.app-shell .warehouse-allocation-filters { grid-template-columns: repeat(3,minmax(0,1fr)) minmax(0,1.3fr) auto auto; background: var(--surface); border-color: var(--line); border-radius: var(--radius-panel); }
body.app-shell .warehouse-allocation-filters :is(.allocation-organization-filter, .allocation-group-filter, .allocation-type-filter) { max-width: none; }

/* Catalog and the existing integrations share the same shell and surfaces. */
body.app-shell .catalog-title { margin-bottom: 20px; align-items: center; }
body.app-shell .catalog-title-actions { gap: 6px; flex-wrap: wrap; }
body.app-shell .catalog-layout { gap: 16px; grid-template-columns: 200px minmax(0,1fr); }
body.app-shell .catalog-tree { border-radius: var(--radius-panel); background: var(--surface); border: 1px solid var(--line); }
body.app-shell .catalog-tree-section { padding: 12px; border-color: var(--line); }
body.app-shell .catalog-tree-title { font-size: 10px; letter-spacing: .5px; color: var(--muted); font-weight: 650; }
body.app-shell .catalog-tree-option { font-size: 11px; border-radius: 4px; gap: 7px; }
body.app-shell .catalog-tree-option:hover { background: var(--surface-muted); }
body.app-shell .catalog-tree-option:has(input:checked) { background: var(--surface-muted); color: var(--text-secondary); }
body.app-shell main.page .data-table--products a { color: var(--primary); }
body.app-shell .catalog-toolbar { gap: 8px; padding: 12px; border-color: var(--line); border-radius: var(--radius-panel); background: var(--surface); }
body.app-shell .bulk-action-bar { border-color: var(--line); border-radius: var(--radius-panel); background: var(--surface); box-shadow: none; }
body.app-shell .catalog-detail, body.app-shell .channel-card, body.app-shell .product-import-card { border-color: var(--line); border-radius: var(--radius-panel); }
body.app-shell .catalog-detail { padding: 18px; }
body.app-shell .catalog-detail summary.section-heading { color: var(--ink); font-size: 14px; }
body.app-shell .readonly-field { border-color: var(--line); background: var(--surface-muted); border-radius: var(--radius-control); }
body.app-shell .history-list { padding: 6px 18px; }
body.app-shell .history-list article { padding: 12px 0; }
body.app-shell .history-dot { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-subtle); }
body.app-shell .crpt-panel { padding: 18px; }
body.app-shell .crpt-volume-filter, body.app-shell .crpt-tab, body.app-shell .nk-volume-filter { font-size: 12px; border-radius: var(--radius-control); }
.login-card { border-radius: var(--radius-dialog); box-shadow: var(--shadow); }
.login-card .brand-mark { background: var(--primary); color: #fff; border-radius: 10px; }
.login-card h1 { font-size: 27px; letter-spacing: -.6px; }
.login-card .primary { border-radius: var(--radius-control); background: var(--primary); }
.login-card .stacked-form input { border-radius: var(--radius-control); border-color: var(--border-strong); }

/* Existing financial forms use the same field grid without page CSS imports. */
body.app-shell .finance-page .warehouse-form { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
body.app-shell .finance-page .warehouse-form label { display: grid; gap: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 550; }
body.app-shell .finance-page .warehouse-form label:has(textarea) { grid-column: 1/-1; }
body.app-shell .finance-page .warehouse-form > button { align-self: end; justify-self: start; }
body.app-shell .finance-page .finance-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 20px; }
body.app-shell .finance-page .finance-nav a { padding: 8px 10px; color: var(--text-secondary); text-decoration: none; font-size: 11px; border-bottom: 2px solid transparent; }
body.app-shell .finance-page .finance-nav a.active { color: var(--primary); border-bottom-color: var(--primary); }
body.app-shell .finance-summary-table th { color: var(--text-secondary); font-size: 12px; font-weight: 500; white-space: normal; }

@media (max-width: 1360px) {
  :root { --sidebar-width: 204px; }
  body.app-shell main.page { padding: 20px; }
  body.app-shell .topbar { padding: 0 20px; }
  .app-nav-item { font-size: 11px; gap: 8px; }
  body.app-shell .warehouse-stocks-filter-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  body.app-shell .warehouse-stocks-summary-row { align-items: flex-start; }
  body.app-shell .catalog-layout { grid-template-columns: 180px minmax(0,1fr); }
}
@media (max-width: 1100px) {
  body.app-shell .warehouse-page-head { align-items: flex-start; }
  body.app-shell .warehouse-filter-panel, body.app-shell .warehouse-allocation-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.app-shell .warehouse-document-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.app-shell .finance-page .warehouse-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.app-shell .warehouse-stocks-summary-row { flex-direction: column; align-items: stretch; }
  body.app-shell .warehouse-table-toolbar { justify-content: flex-end; }
  body.app-shell .sales-sync__actions { margin-left: auto; }
}
@media (max-width: 900px) {
  :root { --sidebar-width: 60px; }
  .app-sidebar .brand { padding: 16px 13px; }
  .brand-copy { display: none; }
  .app-nav-label { padding: 8px; justify-content: center; }
  .app-nav-group-icon { display: inline-flex; }
  .app-nav-label > span:not(.app-nav-group-icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .app-nav-label > .ui-icon { display: none; }
  .app-nav { padding: 0 8px 12px; }
  .app-nav-group + .app-nav-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .app-nav-item { justify-content: center; min-height: 34px; padding: 8px; }
  .app-nav-item > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .app-nav-item.is-planned small { display: none; }
  .app-nav-item.is-active::after { right: 4px; width: 3px; height: 3px; }
  .app-sidebar-footer { padding: 8px; }
  body.app-shell .catalog-layout { grid-template-columns: 160px minmax(0,1fr); }
  body.app-shell .sales-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.app-shell .fbs-filters { grid-template-columns: repeat(4,minmax(0,1fr)); }
  body.app-shell .sales-filters .sales-search { grid-column: span 2; }
  body.app-shell .warehouse-stocks-filter-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  :root { --sidebar-width: 52px; --font-title: 23px; --topbar-height: 52px; }
  .app-sidebar .brand { padding: 12px 9px; min-height: 60px; }
  body.app-shell main.page { padding: 16px 12px 32px; }
  body.app-shell .topbar { padding: 0 12px; }
  .topbar-context > span, .app-user-action span { display: none; }
  .topbar-actions { gap: 12px; }
  body.app-shell .version-indicator { font-size: 10px; }
  body.app-shell .warehouse-stocks-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.app-shell .warehouse-page-head, body.app-shell .page-head, body.app-shell .catalog-title { flex-direction: column; align-items: flex-start; gap: 12px; }
  body.app-shell .warehouse-view-switch { width: auto; }
  body.app-shell .warehouse-document-fields, body.app-shell .warehouse-filter-panel, body.app-shell .warehouse-allocation-filters { grid-template-columns: minmax(0,1fr); }
  body.app-shell .warehouse-document-fields .wide-field { grid-column: auto; }
  body.app-shell .warehouse-document-head-save { padding-left: 0; border-left: 0; }
  body.app-shell .warehouse-filter-footer { align-items: stretch; flex-direction: column; gap: 12px; }
  body.app-shell .catalog-layout { grid-template-columns: minmax(0,1fr); }
  body.app-shell .catalog-tree { display: block; max-height: 240px; overflow-y: auto; }
  body.app-shell .sales-filters { grid-template-columns: minmax(0,1fr); }
  body.app-shell .sales-filters .sales-search { grid-column: auto; }
  body.app-shell .finance-page .warehouse-form { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
@media print {
  .app-sidebar, .topbar, .warehouse-nav-row, .warehouse-table-toolbar { display: none !important; }
  body.app-shell main.page { margin: 0; width: 100%; padding: 0; }
}