/* SIGNAL — a presentation-only skin for managedFields.
   Base layout, typefaces, type scale and DOM order belong to app.css.
   Colour and requested visual alignment overrides only; no business behaviour. */

html:root {
  --signal-accent: #0064ff;
  --signal-accent-hover: #0054d6;
  --signal-on-accent: #ffffff;
  --signal-accent-light: #80b4ff;
  --signal-accent-text: #0054d6;
  --signal-accent-soft: #e1edff;
  --signal-accent-line: #a7c8ff;
  /* Explicit positive actions; the navigation accent remains blue. */
  --signal-positive: #25d366;
  --signal-positive-hover: #20bd5a;
  --signal-on-positive: #171b20;
  /* Facebook UI palette: vivid marks, readable status text, tinted surfaces. */
  --signal-success: #45bd62;
  --signal-warning: #f7b928;
  --signal-danger: #f3425f;
  --signal-success-soft: #daf0d4;
  --signal-warning-soft: #faeba4;
  --signal-danger-soft: #fee4e6;
  --signal-success-surface: var(--signal-success-soft);
  --signal-warning-surface: var(--signal-warning-soft);
  --signal-danger-surface: var(--signal-danger-soft);
  --signal-ink: #171b20;
  --signal-canvas: #e8ecef;
  --signal-surface: #ffffff;
  --signal-subtle: #f1f4f5;
  --signal-text: #1a2027;
  --signal-muted: #56616d;
  --signal-quiet: #66717c;
  --signal-line: #d1d8dc;
  --signal-line-strong: #a0aab1;
  --signal-focus: #0064ff;
  --signal-shadow: 0 2px 0 #171b200b;
  --orbit-void: var(--signal-canvas);
  --orbit-ash: var(--signal-surface);
  --orbit-ash-2: var(--signal-subtle);
  --orbit-mist: var(--signal-subtle);
  --orbit-mist-strong: #e1e8eb;
  --orbit-line: var(--signal-line);
  --orbit-line-strong: var(--signal-line-strong);
  --orbit-text-1: var(--signal-text);
  --orbit-text-2: var(--signal-muted);
  --orbit-text-3: var(--signal-quiet);
  --orbit-green: #147b29;
  --orbit-green-dim: color-mix(in srgb,var(--signal-success-soft) 90%,var(--signal-surface));
  --orbit-red: #d31130;
  --orbit-red-dim: color-mix(in srgb,var(--signal-danger-soft) 90%,var(--signal-surface));
  --orbit-amber: #965e03;
  --orbit-amber-dim: color-mix(in srgb,var(--signal-warning-soft) 90%,var(--signal-surface));
  --orbit-marker-blue: #315fc9;
  --orbit-marker-pink: #a12c74;
  --orbit-glass-panel: var(--signal-surface);
  --orbit-glass-panel-strong: var(--signal-subtle);
  --orbit-glass-line: var(--signal-line);
  --orbit-glass-line-strong: var(--signal-line-strong);
  --orbit-glass-highlight: inset 0 0 0 transparent;
  --orbit-glass-shadow: var(--signal-shadow);
  --orbit-r-xs: 3px;
  --orbit-r-sm: 5px;
  --orbit-r-md: 7px;
  --orbit-r-lg: 10px;
  --orbit-r-xl: 12px;
  --orbit-sh-sm: var(--signal-shadow);
  --orbit-sh-md: 0 5px 0 #171b2008;
  --orbit-sh-lg: 0 14px 40px #171b201c;
  --focus-ring: #0064ff35;
  color-scheme: light;
}

html:root[data-theme="dark"] {
  --signal-accent-text: var(--signal-accent-light);
  --signal-accent-soft: #18345a;
  --signal-accent-line: #3865a1;
  --signal-canvas: #111518;
  --signal-surface: #20262b;
  --signal-subtle: #272f35;
  --signal-text: #edf1f3;
  --signal-muted: #bac4cb;
  --signal-quiet: #9eacb6;
  --signal-line: #3a454d;
  --signal-line-strong: #697985;
  --signal-focus: var(--signal-accent-light);
  --signal-shadow: 0 2px 0 #00000020;
  --orbit-mist-strong: #344048;
  --signal-success-surface: color-mix(in srgb,var(--signal-success) 12%,var(--signal-surface));
  --signal-warning-surface: color-mix(in srgb,var(--signal-warning) 12%,var(--signal-surface));
  --signal-danger-surface: color-mix(in srgb,var(--signal-danger) 12%,var(--signal-surface));
  --orbit-green: var(--signal-success);
  --orbit-green-dim: var(--signal-success-surface);
  --orbit-red: var(--signal-danger-soft);
  --orbit-red-dim: var(--signal-danger-surface);
  --orbit-amber: var(--signal-warning);
  --orbit-amber-dim: var(--signal-warning-surface);
  --orbit-marker-blue: #9cbcff;
  --orbit-marker-pink: #e0a0d2;
  --focus-ring: #80b4ff33;
  color-scheme: dark;
}

html:root body { background: var(--signal-canvas); color: var(--signal-text); }
html:root body::before, html:root body::after { display: none; }
html:root ::selection { background: var(--signal-accent); color: var(--signal-on-accent); }

/* Solid materials replace all previous glass without changing geometry. */
html:root #inventory-app .app-shell {
  background: var(--signal-subtle); border-color: var(--signal-line-strong);
  border-radius: 12px; box-shadow: 0 14px 45px #171b2012;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:root #inventory-app .topbar {
  background: var(--signal-subtle); border-color: var(--signal-line);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:root #inventory-app :is(.panel,.metric-card,.store-filter,.channel-card,.integration-card,.store-summary,.marketplace-warehouse,.warehouse-group,.store-card,.admin-action-card,.assistant-shell,.assistant-chat,.abc-chip,.marking-summary > div) {
  color: var(--signal-text); background: var(--signal-surface) !important;
  border-color: var(--signal-line); border-radius: 7px;
  box-shadow: var(--signal-shadow); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:root #inventory-app :is(.metric-card,.store-summary,.integration-card)::before,
html:root #inventory-app :is(.metric-card,.store-summary,.integration-card)::after { display: none; }
html:root #inventory-app :is(.panel-head h2,.panel-head h3,.page-heading h1,.metric-value) { color: var(--signal-text); }
html:root #inventory-app :is(.eyebrow,.metric-top,.metric-foot,.panel-head p) { color: var(--signal-muted); }

/* Carbon rail; the current active section is the primary colour signal. */
html:root #inventory-app .sidebar {
  --orbit-text-1: #f5f7f8;
  --orbit-text-2: #bbc5cd;
  --orbit-text-3: #98a7b2;
  --orbit-line: #39434a;
  --orbit-glass-line: #39434a;
  background: var(--signal-ink); color: #bbc5cd; border-color: #39434a;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html:root #inventory-app .brand { border-color: #39434a; }
html:root #inventory-app .brand-copy strong { color: #f5f7f8; }
html:root #inventory-app :is(.brand-copy span,.nav-group-label) { color: #a7b4bd; }
html:root #inventory-app .nav-group { border-color: #39434a; }
html:root #inventory-app .nav-item { color: #c6ced4; border-radius: 5px; box-shadow: none; }
html:root #inventory-app .nav-item .nav-icon { color: #acb9c3; }
html:root #inventory-app .nav-item:hover { background: #2c353c; color: #fff; }
html:root #inventory-app .nav-item.active { background: var(--signal-accent); color: var(--signal-on-accent); box-shadow: none; }
html:root #inventory-app .nav-item.active .nav-icon { color: var(--signal-on-accent); }
html:root #inventory-app .sidebar-foot { background: #242d34 !important; border-color: #414b54; border-radius: 5px; box-shadow: none; backdrop-filter: none; }
html:root #inventory-app .sidebar-foot p { color: #b9c5ce; }
html:root #inventory-app .sync-line { color: #dce4e9; }
html:root #inventory-app .sync-dot { background: var(--signal-positive); box-shadow: none; }
html:root #inventory-app :is(.brand .brand-mark,.mobile-brand .brand-mark,.boot-logo) { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
html:root #inventory-app .brand-symbol { filter: grayscale(1) brightness(0); }
html:root[data-theme="dark"] #inventory-app .brand-symbol,
html:root #inventory-app .sidebar .brand-symbol { filter: grayscale(1) brightness(0) invert(1); }

/* Each figure remains in its original cell, with a clear visual hierarchy. */
html:root #inventory-app .metric-icon { background: var(--signal-subtle); border-color: var(--signal-line); color: var(--signal-muted); border-radius: 4px; box-shadow: none; }
html:root #inventory-app .overview-metrics .metric-card:first-child { background: var(--signal-accent) !important; border-color: #0054d6; box-shadow: inset 0 -3px 0 #004aba; }
html:root #inventory-app .overview-metrics .metric-card:first-child :is(.metric-value,.metric-top,.metric-top > span,.metric-foot,.metric-foot strong) { color: var(--signal-on-accent); }
html:root #inventory-app .overview-metrics .metric-card:first-child .metric-icon { background: #ffffff10; border-color: #ffffff40; color: var(--signal-on-accent); }
html:root #inventory-app .overview-metrics .metric-card:nth-child(5) { background: #26353e !important; border-color: #26353e; }
html:root #inventory-app .overview-metrics .metric-card:nth-child(5) :is(.metric-top,.metric-top > span,.metric-value,.metric-foot strong) { color: #f1f5f7; }
html:root #inventory-app .overview-metrics .metric-card:nth-child(5) .metric-foot { color: #b9c7d1; }
html:root #inventory-app .overview-metrics .metric-card:nth-child(5) .metric-icon { color: var(--signal-accent-light); background: #394a55; border-color: #54636d; }
html:root #inventory-app .metric-card .metric-value.is-alert-value { color: var(--orbit-red); }
html:root #inventory-app .overview-metrics .metric-card:first-child .metric-value.is-alert-value,
html:root #inventory-app .overview-metrics .metric-card:nth-child(5) .metric-value.is-alert-value { color: var(--signal-danger-soft); }

/* Existing actions keep their labels and their exact hit areas. */
html:root #inventory-app :is(.button,.theme-toggle,.icon-button,.date-range-trigger,.store-filter-items label,.warehouse-tabs button) { background-color: var(--signal-surface); color: var(--signal-text); border-color: var(--signal-line-strong); border-radius: 5px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html:root #inventory-app .button.primary { background: var(--signal-accent); color: var(--signal-on-accent); border-color: #0054d6; box-shadow: inset 0 -2px 0 #0054d6; }
html:root #inventory-app .button.primary:hover { background: var(--signal-accent-hover); border-color: #004aba; }
html:root #inventory-app .button.primary.positive { background: var(--signal-positive); color: var(--signal-on-positive); border-color: var(--signal-positive-hover); box-shadow: inset 0 -2px 0 var(--signal-positive-hover); }
html:root #inventory-app .button.primary.positive:hover { background: var(--signal-positive-hover); border-color: var(--signal-positive-hover); }
html:root #inventory-app .button.danger { background: var(--orbit-red-dim); color: var(--orbit-red); border-color: var(--orbit-red); }
html:root #inventory-app :is(input,select,textarea) { background-color: var(--signal-subtle); color: var(--signal-text); border-color: var(--signal-line-strong); border-radius: 5px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html:root #inventory-app :is(input,textarea)::placeholder { color: var(--signal-quiet); }
html:root #inventory-app :is(input,select,textarea):focus { border-color: var(--signal-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
html:root #inventory-app :is(button,a,input,select,textarea,summary):focus-visible { outline-color: var(--signal-focus); }
html:root #inventory-app .avatar { background: var(--signal-ink); color: var(--signal-accent-light); border-color: var(--signal-on-accent); border-radius: 5px; box-shadow: none; }
html:root #inventory-app .account-button { background: var(--signal-surface); border-color: var(--signal-line); border-radius: 5px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Search, date selection and switches share the same accent language. */
html:root #inventory-app .button.dark { color: #fff; background: var(--signal-ink); border-color: var(--signal-ink); }
html:root #inventory-app .button.dark:hover { background: #35424a; border-color: #35424a; }
html:root #inventory-app .button:not(.primary):not(.dark):not(.danger):hover,
html:root #inventory-app :is(.theme-toggle,.icon-button,.date-range-trigger):hover { background-color: var(--signal-subtle); border-color: var(--signal-focus); }
html:root #inventory-app .button.primary:hover { opacity: 1; }
html:root #inventory-app .button.danger:hover { box-shadow: inset 0 0 0 1px var(--orbit-red); }
html:root #inventory-app .button:is(:disabled,[aria-disabled="true"]),
html:root #inventory-app .button:is(:disabled,[aria-disabled="true"]):hover { opacity: .38; box-shadow: none; }
html:root #inventory-app :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--signal-focus); }
html:root #inventory-app .store-filter-items { background: var(--signal-line); border-color: var(--signal-line); border-radius: 5px; }
html:root #inventory-app .store-filter-items label { border-radius: 0; }
html:root #inventory-app .store-filter-items label:has(input:checked) { background-color: var(--signal-subtle); box-shadow: inset 0 -2px 0 #0064ff; }
html:root #inventory-app .store-filter-channel { background: var(--signal-surface); color: var(--signal-muted); }
html:root #inventory-app .store-filter-switch { border-color: var(--signal-line-strong); background: var(--signal-subtle); }
html:root #inventory-app .store-filter-input:checked + .store-filter-switch { background: var(--signal-accent); border-color: #0054d6; }
html:root #inventory-app .store-filter-input:checked + .store-filter-switch::after { background: var(--signal-on-accent); }
html:root #inventory-app .store-filter-input:focus-visible + .store-filter-switch { outline-color: var(--signal-focus); }
html:root #inventory-app .catalog-filter-button.active { background: var(--signal-accent); border-color: #0054d6; color: var(--signal-on-accent); }
html:root #inventory-app .catalog-filter-button.active:hover { background: var(--signal-accent-hover); }
/* Use a centred vector instead of a baseline-dependent text chevron. */
html:root #inventory-app .stock-control-disclosure > summary::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%2356616d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}
html:root[data-theme="dark"] #inventory-app .stock-control-disclosure > summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23bac4cb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html:root #inventory-app .filters { background: var(--signal-surface); border-color: var(--signal-line); border-radius: 6px; box-shadow: none; }
html:root #inventory-app .date-range-popover { background: var(--signal-surface); border-color: var(--signal-line-strong); border-radius: 7px; box-shadow: 0 16px 44px #171b2025; backdrop-filter: none; -webkit-backdrop-filter: none; }
html:root #inventory-app .date-range-footer { border-color: var(--signal-line); }
html:root #inventory-app .date-calendar-day.is-in-range { background: color-mix(in srgb,var(--signal-accent) 18%,var(--signal-surface)); }
html:root #inventory-app .date-calendar-day.is-selected { color: var(--signal-on-accent); background: var(--signal-accent); border-radius: 4px; }
html:root #inventory-app .date-calendar-day.is-range-start { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
html:root #inventory-app .date-calendar-day.is-range-end { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
html:root #inventory-app .date-calendar-day.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1px var(--signal-focus); }
html:root #inventory-app :is(.date-calendar-nav,.date-calendar-day:not(.is-selected)):hover { color: var(--signal-text); background: var(--signal-subtle); }

/* Reports: hard edges, a ruled chart and a high-contrast table header. */
html:root #inventory-app .channel-chart { background: linear-gradient(var(--signal-line) 1px,transparent 1px) 0 0/100% 25%; border-color: var(--signal-line); }
html:root #inventory-app .chart-column:nth-child(n) .chart-bar { background: var(--signal-accent) !important; border-radius: 3px 3px 0 0; box-shadow: inset 0 0 0 1px #171b2022; filter: none; }
html:root #inventory-app .chart-column:nth-child(2n) .chart-bar { background: #7b919f !important; }
html:root #inventory-app :is(.chart-value,.chart-label) { color: var(--signal-muted); }
html:root #inventory-app :is(.health-bar,.marking-progress) { background: var(--signal-line); border-radius: 3px; }
html:root #inventory-app .health-row:nth-child(n) .health-bar > span,
html:root #inventory-app .marking-progress > span { background: #0064ff !important; border-radius: 3px; }
html:root[data-theme="dark"] #inventory-app .health-row:nth-child(n) .health-bar > span,
html:root[data-theme="dark"] #inventory-app .marking-progress > span { background: var(--signal-accent) !important; }
html:root #inventory-app .channel-logo { color: var(--signal-muted); background: var(--signal-subtle); border-color: var(--signal-line-strong); border-radius: 5px; }
/* Use the supplied brand artwork as-is, including its transparent corners. */
html:root #inventory-app .marketplace-logo { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; flex-shrink: 0; }
html:root #inventory-app .marketplace-logo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; filter: none; }
html:root #inventory-app .channel-logo > svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
html:root #inventory-app table { color: var(--signal-text); }
html:root #inventory-app thead th { color: #f1f5f7; background: #26353e; border-color: #465963; text-align: center; vertical-align: middle; }
html:root #inventory-app thead .sort-button { width: 100%; max-width: 100%; justify-content: center; text-align: center; }
html:root #inventory-app thead .sort-button span { flex-shrink: 0; }
html:root #inventory-app tbody td { color: var(--signal-muted); border-color: var(--signal-line); }
html:root #inventory-app tbody tr:hover { background: var(--signal-subtle); }
html:root #inventory-app :is(.warehouse-total-row td,.inventory-grand-total) { color: var(--signal-text); background: var(--signal-subtle); border-color: var(--signal-line-strong); }
html:root #inventory-app .product-thumb { background: var(--signal-subtle); border-color: var(--signal-line); color: var(--signal-muted); border-radius: 4px; box-shadow: none; }
html:root #inventory-app :is(.tag,.status,.catalog-current-tag,.catalog-unmatched-tag,.auto-sync-badge) { border-radius: 4px; box-shadow: none; }
html:root #inventory-app :is(.status.good,.tag.a,.catalog-current-tag) { color: var(--orbit-green); background: var(--orbit-green-dim); border-color: color-mix(in srgb,var(--orbit-green) 35%,transparent); }
html:root #inventory-app :is(.status.warn,.tag.b) { color: var(--orbit-amber); background: var(--orbit-amber-dim); border-color: color-mix(in srgb,var(--orbit-amber) 35%,transparent); }
html:root #inventory-app :is(.status.danger,.tag.c,.catalog-unmatched-tag) { color: var(--orbit-red); background: var(--orbit-red-dim); border-color: color-mix(in srgb,var(--orbit-red) 35%,transparent); }
html:root #inventory-app :is(.inventory-available.is-low,.qty-negative,.low-stock-quantity,.integration-error,.marking-job-error) { color: var(--orbit-red); }
html:root #inventory-app .inventory-available.is-low { background: var(--orbit-red-dim); border-color: color-mix(in srgb,var(--orbit-red) 35%,transparent); }
html:root #inventory-app :is(.catalog-cost.is-missing,.price-input.is-missing,.mapping-select.is-missing) { color: var(--orbit-red); background-color: var(--orbit-red-dim); border-color: var(--orbit-red); }
html:root #inventory-app .marketplace-mapping-table table tbody tr.is-unmatched { background: var(--orbit-red-dim); }
html:root #inventory-app :is(.notice,.credential-warning) { color: var(--orbit-amber); background: var(--orbit-amber-dim); border-color: color-mix(in srgb,var(--signal-warning) 35%,transparent); }

/* The scheduled refresh is positive; other informational indicators stay blue. */
html:root #inventory-app .auto-sync-badge { color: var(--signal-on-positive); background: var(--signal-positive); border-color: var(--signal-positive-hover); }
html:root #inventory-app .auto-sync-badge > span { background: var(--signal-on-positive); box-shadow: none; }
html:root #inventory-app .assistant-status.ready { color: var(--signal-accent-text); background: var(--signal-accent-soft); border-color: var(--signal-accent-line); }
html:root #inventory-app .assistant-status.ready i { background: var(--signal-accent-text); box-shadow: 0 0 0 3px var(--focus-ring); }
html:root #inventory-app .assistant-status.offline { color: var(--orbit-red); background: var(--orbit-red-dim); border-color: color-mix(in srgb,var(--orbit-red) 35%,transparent); }
html:root #inventory-app .assistant-status.offline i { background: var(--orbit-red); }

/* Operational screens, dialogs and Luna reuse the same solid material. */
html:root #inventory-app :is(.marking-form,.marking-job,.marking-job-details,.mapping-explanation,.admin-toggle,.admin-check,.admin-performance-summary,.admin-performance-summary > div,.admin-action-help > div,.assistant-chat-head,.assistant-form) { color: var(--signal-text); background: var(--signal-surface) !important; border-color: var(--signal-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html:root #inventory-app :is(.marking-tool-tabs,.warehouse-tabs) { background: var(--signal-subtle); border-color: var(--signal-line); border-radius: 6px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html:root #inventory-app .marking-tool-tabs button { color: var(--signal-muted); border-radius: 4px; }
html:root #inventory-app :is(.marking-tool-tabs button,.warehouse-tabs button) { text-align: center; }
html:root #inventory-app :is(.marking-tool-tabs button.is-active,.warehouse-tabs button.active) { color: var(--signal-on-accent); background: var(--signal-accent); border-color: #0054d6; box-shadow: none; }
html:root #inventory-app .marking-tool-tabs button.is-active span { color: #ffffff; }
html:root #inventory-app .panel.admin-danger-zone { background: var(--orbit-red-dim) !important; border-color: var(--orbit-red); }
html:root #inventory-app .admin-danger-zone .button.danger { background: var(--signal-surface); box-shadow: inset 0 0 0 1px var(--orbit-red); }
html:root #inventory-app .abc-chip.a { background: var(--signal-success-surface) !important; }
html:root #inventory-app .abc-chip.b { background: var(--signal-warning-surface) !important; }
html:root #inventory-app .abc-chip.c { background: var(--signal-danger-surface) !important; }
html:root #inventory-app :is(.abc-chip .abc-letter,.admin-check .admin-check-icon) { color: var(--signal-ink); }
html:root #inventory-app :is(.abc-chip.a .abc-letter,.admin-check.is-ok .admin-check-icon) { background: var(--signal-success); }
html:root #inventory-app :is(.abc-chip.b .abc-letter,.admin-check.is-warning .admin-check-icon) { background: var(--signal-warning); }
html:root #inventory-app .abc-chip.c .abc-letter { background: var(--signal-danger); }
html:root #inventory-app .assistant-intro { color: var(--signal-text); background: var(--signal-subtle); border-color: var(--signal-line); }
html:root #inventory-app :is(.assistant-safety,.assistant-message-content,.assistant-suggestions button) { color: var(--signal-text); background: var(--signal-subtle); border-color: var(--signal-line); border-radius: 6px; box-shadow: none; }
html:root #inventory-app .assistant-message.user .assistant-message-content { color: var(--signal-text); background: var(--signal-accent-soft); border-color: var(--signal-accent-line); }
html:root #inventory-app :is(.assistant-safety strong,.assistant-markdown a) { color: var(--signal-accent-text); }
html:root #inventory-app .assistant-typing i { background: var(--signal-accent-text); }
html:root #inventory-app .assistant-welcome img { box-shadow: 0 14px 34px var(--focus-ring); }
html:root #inventory-app .assistant-suggestions button:hover { border-color: var(--signal-focus); background: var(--signal-surface); }
html:root #inventory-app .modal-backdrop { background: #111b26a6; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html:root #inventory-app :is(.modal,.toast) { color: var(--signal-text); background: var(--signal-surface); border-color: var(--signal-line-strong); border-radius: 8px; box-shadow: 0 18px 50px #10181f38; backdrop-filter: none; -webkit-backdrop-filter: none; }
html:root #inventory-app :is(.close-button,.sale-line,.credentials-box) { color: var(--signal-text); background: var(--signal-subtle); border-color: var(--signal-line); border-radius: 5px; }
html:root #inventory-app .toast.error { color: var(--orbit-red); background: var(--orbit-red-dim); border-color: var(--orbit-red); }

@media (max-width:760px) {
  html:root #inventory-app :is(.table-wrap table tbody tr,.nomenclature-table tbody tr,.marketplace-mapping-table tbody tr,.abc-analysis-table tbody tr) { background: var(--signal-surface); border-color: var(--signal-line); border-radius: 6px; box-shadow: none; }
  html:root #inventory-app .warehouse-total-row { background: var(--signal-accent-soft) !important; border-color: var(--signal-accent-line); }
  html:root #inventory-app .warehouse-total-row td { background: var(--signal-accent-soft); }
}
@media (hover:hover) and (pointer:fine) {
  html:root #inventory-app :is(.metric-card,.store-summary,.integration-card) { transition: border-color .2s ease,box-shadow .2s ease; }
  html:root #inventory-app :is(.metric-card,.store-summary,.integration-card):hover { border-color: var(--signal-line-strong); box-shadow: 0 3px 0 var(--signal-line); }
}

/* The sign-in form stays centred, on a precise, quiet drafting-grid canvas. */
html:root #inventory-app .auth-page {
  background-color: var(--signal-canvas);
  background-image: linear-gradient(var(--signal-line) 1px,transparent 1px),linear-gradient(90deg,var(--signal-line) 1px,transparent 1px);
  background-size: 64px 64px;
}
html:root #inventory-app .auth-wordmark { color: transparent; -webkit-text-stroke: 1px var(--signal-line-strong); opacity: .5; text-shadow: none; }
html:root #inventory-app .auth-shell { background: var(--signal-surface); border-color: var(--signal-on-accent); border-radius: 10px; box-shadow: 10px 10px 0 var(--signal-accent); backdrop-filter: none; -webkit-backdrop-filter: none; }
html:root[data-theme="dark"] #inventory-app .auth-shell { border-color: #677582; }
html:root #inventory-app .auth-panel { background: transparent; }
html:root #inventory-app :is(.auth-brand-name,.auth-panel-head h2) { color: var(--signal-text); }
html:root #inventory-app :is(.auth-kicker,.auth-panel-head p,.auth-footnote) { color: var(--signal-muted); }
html:root #inventory-app .auth-error { color: var(--orbit-red); background: var(--orbit-red-dim); border-color: var(--orbit-red); border-radius: 5px; box-shadow: none; }
html:root #inventory-app .boot-screen { color: var(--signal-text); background: var(--signal-canvas); }
html:root #inventory-app .boot-line { background: var(--signal-line); }
html:root #inventory-app .boot-line::after { background: var(--signal-accent); }

/* True API: saved configuration and its explicit, read-only control check. */
html:root #inventory-app .admin-chz-section { margin-bottom: 20px; scroll-margin-top: 104px; }
html:root #inventory-app .admin-chz-section > .panel-head { flex-wrap: wrap; }
html:root #inventory-app .status.chz-configured { color: var(--signal-accent-text); background: var(--signal-accent-soft); border-color: var(--signal-accent-line); white-space: normal; }
/* Keep the long setup label inside the button instead of the form's fixed 190px width. */
html:root #inventory-app .marking-form > .button[data-chz-open-settings] {
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 43px;
  padding: 10px 16px;
  justify-self: start;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  text-align: center;
}
@media (max-width: 760px) {
  html:root #inventory-app .marking-form > .button[data-chz-open-settings] { width: 100%; }
}
html:root #inventory-app .admin-chz-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 20px; }
html:root #inventory-app .admin-chz-form { display: grid; align-content: start; gap: 12px; min-width: 0; }
html:root #inventory-app .admin-chz-note { margin: 0; color: var(--signal-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
html:root #inventory-app .admin-chz-form :is(input,textarea,select) { width: 100%; min-width: 0; }
html:root #inventory-app .admin-chz-store-picker { max-width: 600px; margin: 18px 0; }
html:root #inventory-app .admin-chz-store-picker select { width: 100%; }
html:root #inventory-app .admin-chz-identity { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 16px; padding: 14px 16px; margin-bottom: 12px; border: 1px solid var(--signal-line); border-radius: 5px; background: var(--signal-subtle); }
html:root #inventory-app .admin-chz-identity > span { color: var(--signal-muted); font-size: 12px; }
html:root #inventory-app .admin-chz-identity > strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html:root #inventory-app .admin-chz-identity :is(p,button) { grid-column: 1/-1; }
html:root #inventory-app .admin-chz-identity > button { justify-self: start; }
html:root #inventory-app .admin-chz-shared-warning { padding: 10px 12px; color: var(--signal-accent-text); background: var(--signal-accent-soft); border: 1px solid var(--signal-accent-line); border-radius: 5px; }
html:root #inventory-app .admin-chz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
html:root #inventory-app .admin-chz-draft { color: var(--signal-accent-text); }
html:root #inventory-app .admin-chz-ukep { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--signal-accent-line); border-radius: 6px; background: var(--signal-accent-soft); }
html:root #inventory-app .admin-chz-ukep h3 { margin: 0 0 6px; color: var(--signal-text); font-size: 15px; }
html:root #inventory-app .admin-chz-ukep > button { justify-self: start; max-width: 100%; white-space: normal; }
html:root #inventory-app .admin-chz-certificate { display: grid; gap: 10px; margin: 0; padding: 12px; background: var(--signal-surface); border: 1px solid var(--signal-line); border-radius: 5px; font-size: 12px; }
html:root #inventory-app .admin-chz-certificate :is(dt,dd) { margin: 0; overflow-wrap: anywhere; }
html:root #inventory-app .admin-chz-certificate dt { color: var(--signal-muted); margin-bottom: 3px; }
html:root #inventory-app .admin-chz-certificate dd { color: var(--signal-text); line-height: 1.5; }
html:root #inventory-app .admin-chz-setup summary { color: var(--signal-accent-text); cursor: pointer; font-size: 12px; }
html:root #inventory-app .admin-chz-setup[open] summary { margin-bottom: 10px; }
html:root #inventory-app .admin-chz-setup a { display: inline-block; margin: 8px 12px 0 0; color: var(--signal-accent-text); font-size: 12px; text-decoration: underline; }
html:root #inventory-app .admin-chz-access { padding: 12px 14px; margin: 12px 0 0; color: var(--signal-accent-text); background: var(--signal-accent-soft); border: 1px solid var(--signal-accent-line); border-radius: 5px; font-size: 12px; line-height: 1.6; }
html:root #inventory-app .admin-chz-access.is-expired { color: var(--orbit-red); background: var(--orbit-red-dim); border-color: var(--orbit-red); }
html:root #inventory-app .admin-chz-feedback { margin-top: 20px; padding: 12px 14px; border: 1px solid var(--signal-line); border-radius: 5px; background: var(--signal-subtle); color: var(--signal-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
html:root #inventory-app .admin-chz-feedback.is-loading { color: var(--signal-accent-text); background: var(--signal-accent-soft); border-color: var(--signal-accent-line); }
html:root #inventory-app .admin-chz-feedback.is-success { color: var(--orbit-green); background: var(--orbit-green-dim); border-color: var(--orbit-green); }
html:root #inventory-app .admin-chz-feedback.is-error { color: var(--orbit-red); background: var(--orbit-red-dim); border-color: var(--orbit-red); }
@media (max-width:980px) {
  html:root #inventory-app .admin-chz-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
}

@media (prefers-reduced-motion:reduce) {
  html:root #inventory-app *, html:root #inventory-app *::before, html:root #inventory-app *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Persistent True API withdrawal documents. */
html:root #inventory-app .chz-withdrawal-panel { margin-top: 20px; }
html:root #inventory-app .chz-withdrawal-form { display: grid; gap: 16px; }
html:root #inventory-app .chz-withdrawal-fields > .field { align-content: start; }
html:root #inventory-app .chz-withdrawal-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
html:root #inventory-app .chz-withdrawal-wide { grid-column: 1/-1; }
html:root #inventory-app .chz-withdrawal-form :is(input,select,textarea), html:root #inventory-app .chz-withdrawal-signing select { width: 100%; min-width: 0; }
html:root #inventory-app .chz-withdrawal-form > .button { width: fit-content; height: auto; min-height: 44px; padding: 10px 16px; max-width: 100%; justify-self: start; white-space: normal; }
html:root #inventory-app .chz-withdrawal-preview { display: grid; gap: 18px; margin-top: 20px; padding: 20px; background: var(--signal-accent-soft); border: 1px solid var(--signal-accent-line); border-radius: 6px; }
html:root #inventory-app :is(.chz-withdrawal-preview,.chz-withdrawal-history) h3 { margin: 0 0 8px; font-size: 16px; color: var(--signal-text); }
html:root #inventory-app .chz-withdrawal-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 0; }
html:root #inventory-app .chz-withdrawal-summary :is(dt,dd) { margin: 0; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
html:root #inventory-app .chz-withdrawal-summary dt { color: var(--signal-muted); }
html:root #inventory-app .chz-withdrawal-summary dd { color: var(--signal-text); font-weight: 600; }
html:root #inventory-app .chz-withdrawal-json { min-width: 0; }
html:root #inventory-app .chz-withdrawal-json summary { cursor: pointer; color: var(--signal-accent-text); font-size: 12px; }
html:root #inventory-app .chz-withdrawal-json pre { max-height: 320px; overflow: auto; margin: 12px 0 0; padding: 14px; background: var(--signal-surface); border: 1px solid var(--signal-line); border-radius: 5px; color: var(--signal-text); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
html:root #inventory-app .chz-withdrawal-signing { display: grid; gap: 14px; }
html:root #inventory-app .chz-withdrawal-signing > button { justify-self: start; max-width: 100%; white-space: normal; }
html:root #inventory-app .chz-withdrawal-confirm { display: flex; align-items: flex-start; gap: 10px; color: var(--signal-text); font-size: 12px; line-height: 1.6; }
html:root #inventory-app .chz-withdrawal-confirm input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--signal-accent); }
html:root #inventory-app .chz-withdrawal-history { margin-top: 28px; border-top: 1px solid var(--signal-line); padding-top: 24px; }
html:root #inventory-app .chz-withdrawal-list { display: grid; gap: 12px; }
html:root #inventory-app .chz-withdrawal-record { min-width: 0; padding: 16px; background: var(--signal-subtle); border: 1px solid var(--signal-line); border-radius: 5px; }
html:root #inventory-app .chz-withdrawal-record-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: var(--signal-text); font-size: 13px; }
html:root #inventory-app .chz-withdrawal-record p { margin: 8px 0; color: var(--signal-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
html:root #inventory-app .chz-withdrawal-record .button { margin-top: 6px; white-space: normal; }
@media (max-width: 720px) {
  html:root #inventory-app :is(.chz-withdrawal-fields,.chz-withdrawal-summary) { grid-template-columns: minmax(0,1fr); }
  html:root #inventory-app .chz-withdrawal-preview { padding: 16px; }
  html:root #inventory-app .chz-withdrawal-history > .panel-head { flex-wrap: wrap; }
}

html:root #inventory-app .chz-withdrawal-settings { margin: 16px 0; padding: 14px; border: 1px solid var(--signal-line); border-radius: 5px; }
html:root #inventory-app .chz-withdrawal-settings .admin-chz-form { margin-top: 14px; max-width: 600px; }
html:root #inventory-app .chz-withdrawal-settings .button { justify-self: start; margin-top: 10px; white-space: normal; }

/* Marking WB FBS: local module layout, using the existing theme tokens. */
.wbf-panel { min-width: 0; max-width: 100%; }
.wbf-topbar, .wbf-actions, .wbf-selection, .wbf-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.wbf-topbar { justify-content: space-between; margin-bottom: 14px; }
.wbf-topbar > .field { min-width: min(350px, 100%); flex: 1; max-width: 520px; }
.wbf-panel .field label { display: grid; gap: 7px; }
.wbf-panel select, .wbf-panel input:not([type="checkbox"]) { width: 100%; min-width: 0; }
/* Initial import and recurring sync have independent progress and schedules. */
.wbf-sync { margin: 16px 0; color: var(--signal-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.wbf-sync-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wbf-sync-card { min-width: 0; padding: 16px; border: 1px solid var(--signal-line); border-radius: 7px; background: var(--signal-subtle); }
.wbf-sync-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
html:root #inventory-app .wbf-sync-heading h3 { margin: 0; color: var(--signal-text); font-size: 14px; }
.wbf-sync-status { display: inline-block; max-width: 100%; font-size: 11px; font-weight: 600; color: var(--signal-muted); white-space: normal; }
.wbf-sync-period { display: block; color: var(--signal-text); font-size: 14px; line-height: 1.5; }
.wbf-sync p { margin: 8px 0 0; }
.wbf-sync-dates, .wbf-source-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 12px 0 0; }
.wbf-sync-dates > div, .wbf-source-dates > div { min-width: 0; }
.wbf-sync dt { color: var(--signal-muted); font-size: 11px; }
.wbf-sync dd { color: var(--signal-text); margin: 3px 0 0; font-size: 12px; }
.wbf-sync-counters { display: grid; gap: 6px; margin: 12px 0; }
.wbf-sync-counters p { margin: 0; }
.wbf-sync-counters strong { color: var(--signal-text); }
.wbf-sources { border: 1px solid var(--signal-line); border-radius: 7px; padding: 12px 16px; }
.wbf-source-list { margin-top: 12px; }
.wbf-source { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 3fr); gap: 12px 24px; padding: 14px 0; border-top: 1px solid var(--signal-line); }
.wbf-source-name { display: grid; align-content: start; gap: 4px; min-width: 0; }
.wbf-source-name strong { color: var(--signal-text); }
.wbf-source-dates { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.wbf-source-error { grid-column: 1 / -1; color: var(--orbit-amber); white-space: pre-wrap; overflow-wrap: anywhere; }
.wbf-warning { color: var(--orbit-amber); }
.wbf-alert { border: 1px solid var(--signal-danger); background: var(--signal-danger-surface); color: var(--signal-text); padding: 12px 15px; border-radius: 7px; margin: 12px 0; overflow-wrap: anywhere; }
.wbf-alert ul { padding-left: 20px; }
.wbf-settings { padding: 12px 0; border-top: 1px solid var(--signal-line); border-bottom: 1px solid var(--signal-line); }
.wbf-panel summary { cursor: pointer; font-weight: 600; color: var(--signal-text); }
.wbf-settings form, .wbf-rules { margin-top: 15px; }
.wbf-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.wbf-check { display: flex !important; align-items: flex-start; gap: 9px; line-height: 1.5; font-size: 13px; color: var(--signal-text); }
.wbf-check input { flex: 0 0 auto; margin-top: 3px; width: 16px; height: 16px; accent-color: var(--signal-accent); }
.wbf-fields > .wbf-check { align-self: center; }
.wbf-access { border: 1px solid var(--signal-line); border-radius: 7px; padding: 14px; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 14px; }
.wbf-access legend { padding: 0 6px; font-size: 13px; }
.wbf-access p { flex-basis: 100%; }
.wbf-rules h4, .wbf-detail h4 { margin: 18px 0 8px; }
.wbf-rules p { color: var(--signal-muted); font-size: 12px; margin: 5px 0; }
.wbf-lists { display: flex; gap: 5px; flex-wrap: wrap; margin: 20px 0 16px; }
.wbf-lists button { font: inherit; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--signal-muted); background: var(--signal-subtle); border: 1px solid var(--signal-line); padding: 10px 12px; border-radius: 6px; cursor: pointer; }
.wbf-lists button.is-active { color: var(--signal-accent-text); border-color: var(--signal-accent-line); background: var(--signal-accent-soft); }
.wbf-lists span { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.wbf-filters { display: grid; grid-template-columns: minmax(190px, 2fr) minmax(160px, 1.3fr) repeat(2, minmax(130px, 1fr)) auto; align-items: end; gap: 10px; }
.wbf-filters label { font-size: 12px; }
.wbf-selection { justify-content: flex-start; margin: 15px 0; font-size: 12px; color: var(--signal-muted); }
.wbf-selection > span { margin-right: auto; }
.wbf-bulk { align-items: start; margin-bottom: 14px; }
.wbf-bulk > div { flex: 1 1 180px; max-width: 400px; }
.wbf-bulk small { display: block; color: var(--signal-muted); font-size: 11px; line-height: 1.5; margin-top: 5px; }
/* One code per row; operational details live behind the explicit details action. */
.wbf-code-list { min-width: 0; max-width: 100%; margin-top: 16px; border: 1px solid var(--signal-line); border-radius: 7px; overflow: hidden; }
.wbf-code-list-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 16px; background: var(--signal-subtle); }
.wbf-code-list-head .wbf-check { align-items: center; margin: 0; font-weight: 600; }
.wbf-code-list-note { padding: 0 16px; }
.wbf-code-rows { list-style: none; margin: 0; padding: 0; }
.wbf-code-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--signal-line); }
html:root #inventory-app .wbf-code-list input[type="checkbox"] { margin: 0; width: 16px; height: 16px; accent-color: var(--signal-accent); }
.wbf-code { display: block; min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: 13px; line-height: 1.65; }
.wbf-code-content { min-width: 0; }
.wbf-code-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; min-width: 0; }
.wbf-code-price .wbf-code { display: inline; }
.wbf-price { flex: 0 1 auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: normal; }
.wbf-price.is-missing { color: var(--signal-muted); font-size: 12px; font-weight: 400; }
.wbf-code-meta { margin-top: 5px; color: var(--signal-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.wbf-code-row.is-returned { background: var(--orbit-green-dim); }
.wbf-return-label { color: var(--orbit-green); font-weight: 600; }
.wbf-session { margin: 6px 0 16px; color: var(--signal-muted); font-size: 12px; line-height: 1.5; }
.wbf-session.is-active { color: var(--orbit-green); }
.wbf-filters-panel { margin: 14px 0; }
.wbf-filters-panel .wbf-filters { margin: 14px 0; }
.wbf-sync-details, .wbf-pending { margin-top: 24px; padding: 14px 0; border-top: 1px solid var(--signal-line); }
.wbf-code-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
html:root #inventory-app .wbf-code-list .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.wbf-detail, .wbf-detail .chz-withdrawal-summary > div, .wbf-detail .chz-withdrawal-summary dd { min-width: 0; overflow-wrap: anywhere; }
.wbf-pagination { justify-content: flex-end; margin-top: 14px; font-size: 12px; color: var(--signal-muted); }
.wbf-document, .wbf-detail { border: 1px solid var(--signal-line); border-radius: 8px; padding: 20px; margin-top: 20px; background: var(--signal-subtle); }
.wbf-document h3, .wbf-detail h3 { margin: 0; font-size: 16px; }
.wbf-signing { display: grid; gap: 14px; margin: 16px 0; }
.wbf-signing > .button { justify-self: start; }
.wbf-panel pre { max-width: 100%; overflow: auto; max-height: 340px; padding: 12px; background: var(--signal-surface); border: 1px solid var(--signal-line); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wbf-full-code { overflow-wrap: anywhere; font-size: 12px; }
.wbf-history-entry { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--signal-line); font-size: 12px; }
.wbf-timeline { list-style: none; padding: 0 0 0 12px; margin: 15px 0; border-left: 2px solid var(--signal-line); }
.wbf-timeline li { display: grid; gap: 5px; padding: 0 0 16px 10px; font-size: 12px; }
.wbf-timeline time, .wbf-timeline small { color: var(--signal-muted); }
.wbf-evidence { border-top: 1px solid var(--signal-line); padding-top: 15px; margin-top: 15px; }
.wbf-evidence form > .wbf-check { margin-bottom: 14px; }
@media (max-width: 1100px) {
  .wbf-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wbf-search { grid-column: 1 / -1; }
  .wbf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wbf-sync-cards { grid-template-columns: minmax(0, 1fr); }
  .wbf-source { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wbf-source-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wbf-code-list-head { align-items: flex-start; flex-direction: column; }
  .wbf-code-row { grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 10px 12px; padding: 12px; }
  .wbf-code-row > input { margin-top: 4px !important; }
  .wbf-code-actions { grid-column: 2; }
  .wbf-code { font-size: 12px; }

}
@media (max-width: 680px) {
  .wbf-fields, .wbf-filters { grid-template-columns: minmax(0, 1fr); }
  .wbf-topbar > .field { min-width: 0; max-width: none; width: 100%; flex-basis: 100%; }

  .wbf-lists { display: grid; grid-template-columns: 1fr 1fr; }
  .wbf-lists button { justify-content: space-between; text-align: left; font-size: 11px; }
  .wbf-document, .wbf-detail { padding: 14px; }
  .wbf-pagination { justify-content: space-between; }
  .wbf-history-entry { align-items: flex-start; flex-direction: column; }
}

.wbf-receipt { border-top: 1px solid var(--signal-line); padding-top: 14px; margin-top: 16px; }
.wbf-code-results { display: grid; gap: 10px; margin: 12px 0; }
.wbf-code-result { display: grid; gap: 5px; padding: 12px; background: var(--signal-surface); border: 1px solid var(--signal-line); border-radius: 6px; font-size: 12px; overflow-wrap: anywhere; }
.wbf-code-result small { color: var(--signal-muted); }