/* InvenOps appearance. Neutral materials and the Estimates navigation control.
   Legacy rules consume semantic tokens with their exact dark color as fallback.
   Images, uploaded documents, data colors and print/export layouts retain theirs. */
/* Action colors follow the Dashboard in dark mode and Locations in light mode. */
:root {
  --bpx-action-blue: #1762c1;
  --bpx-action-gradient: linear-gradient(135deg, #226ac5 0%, #1762c1 48%, #104fa6 100%);
  --bpx-action-gradient-hover: linear-gradient(135deg, #2671cd 0%, #1c67c5 48%, #1658ae 100%);
  --bpx-action-border: #3d76b2;
  --bpx-action-border-hover: #80b9ff;
  --bpx-action-focus: #8bbcff;
}
html[data-appearance="dark"] {
  --bpx-color-scheme: dark;
  --appearance-surface: #111113;
  --appearance-control: #18181b;
  --appearance-hover: #202024;
  --appearance-border: #2d2d31;
  --appearance-border-strong: #48484f;
  --appearance-ink: #f5f5f5;
  --appearance-muted: #a1a1aa;
  --appearance-accent: #6aa9ff;
  --appearance-action: #236fd1;
}
html[data-appearance="light"] {
  --bpx-action-blue: #1b58a8;
  --bpx-action-gradient: linear-gradient(145deg, #246bc1, #1b58a8 55%, #17498d);
  --bpx-action-gradient-hover: var(--bpx-action-gradient);
  --bpx-action-border: #235fab;
  --bpx-action-border-hover: #235fab;
  --bpx-action-focus: #1767c9;
  --bpx-color-scheme: light;
  --bpx-light-page: #f5f5f7;
  --bpx-light-surface: #ffffff;
  --bpx-light-material: linear-gradient(#ffffff, #ffffff);
  --bpx-light-raised: #f5f5f6;
  --bpx-light-hover: #ededf0;
  --bpx-light-wash: rgba(28, 32, 40, .035);
  --bpx-light-ink: #22252b;
  --bpx-light-on-accent: #ffffff;
  --bpx-light-glyph: currentColor;
  --bpx-light-on-bright: #000000;
  --bpx-light-muted: #606775;
  --bpx-light-border: #d9dce2;
  --bpx-light-border-soft: #e7e9ed;
  --bpx-light-action: #1767c9;
  --bpx-light-action-hover: #1158b0;
  --bpx-light-blue: #1767c9;
  --bpx-light-green: #197044;
  --bpx-light-red: #b8323e;
  --bpx-light-amber: #865900;
  --bpx-light-purple: #7240b3;
  --bpx-light-cyan: #087582;
  --bpx-light-blue-soft: #edf4fd;
  --bpx-light-green-soft: #edf7f1;
  --bpx-light-red-soft: #fceff0;
  --bpx-light-amber-soft: #fbf5e7;
  --bpx-light-purple-soft: #f4effb;
  --bpx-light-cyan-soft: #edf7f8;
  --bpx-light-shadow: 0 2px 8px rgba(24, 30, 42, .045);
  --bpx-light-shadow-color: rgba(24, 30, 42, .09);
  --bpx-light-text-shadow: none;
  --bpx-light-backdrop: none;
  --bpx-light-image: none;
  --bpx-light-scrim: rgba(22, 27, 35, .32);
  --appearance-surface: #ffffff;
  --appearance-control: #f5f5f6;
  --appearance-hover: #ededf0;
  --appearance-border: #dedee2;
  --appearance-border-strong: #bcbcc3;
  --appearance-ink: #22252b;
  --appearance-muted: #606775;
  --appearance-accent: #1767c9;
  --appearance-action: #1767c9;
}

html[data-appearance] { color-scheme: var(--bpx-color-scheme); }
html[data-appearance] :where(input, select, textarea, dialog) { color-scheme: var(--bpx-color-scheme); }
html[data-appearance="light"] :where(input, textarea)::placeholder { color: #747b87; opacity: 1; }
html[data-appearance="light"] ::selection { background: #cfe2fb; color: #173555; }
html[data-appearance="light"] :where(input, select, textarea, button, a):focus-visible {
  outline: 2px solid #1767c9 !important;
  outline-offset: 3px;
}
html[data-appearance="light"] :is(.btn-primary, .btn.primary, .btn.is-primary, .bpx-btn-primary, .bpx-btn.primary, .time-btn.primary, .po-btn.primary, .cta-primary, .bpx-react-alloc-button--primary) {
  background-color: #1767c9;
  color: #ffffff;
}

/* The element works in both Django shells and the React navigation portal. */
bpx-appearance-switch { display: block; min-width: 0; color: var(--appearance-ink); }
bpx-appearance-switch .bpx-appearance-button {
  box-sizing: border-box; display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 48px; margin: 0; padding: 8px 12px;
  border: 0; border-radius: 12px; background: transparent; color: var(--appearance-ink);
  font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  letter-spacing: -.015em; text-align: left; text-transform: none; cursor: pointer;
  box-shadow: none; filter: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease;
}
bpx-appearance-switch .bpx-appearance-button:hover { background: var(--appearance-hover); }
bpx-appearance-switch .bpx-appearance-button:active { background: var(--appearance-control); transform: none; }
bpx-appearance-switch .bpx-appearance-button:focus-visible { outline: 2px solid var(--appearance-accent); outline-offset: 3px; }
bpx-appearance-switch .bpx-appearance-copy { display: grid; flex: 1; gap: 2px; }
bpx-appearance-switch .bpx-appearance-copy > span { color: var(--appearance-ink); font-size: 12px; font-weight: 500; }
bpx-appearance-switch .bpx-appearance-copy > strong { color: var(--appearance-muted); font-size: 11px; font-weight: 400; }
bpx-appearance-switch .bpx-appearance-icon { position: relative; display: grid; place-items: center; flex: 0 0 20px; height: 20px; color: var(--appearance-muted); }
bpx-appearance-switch .bpx-appearance-icon svg { position: absolute; width: 20px; height: 20px; transition: opacity 180ms ease, transform 280ms cubic-bezier(.22, 1, .36, 1); }
.bpx-appearance-button[aria-checked="true"] .bpx-appearance-sun,
.bpx-appearance-button[aria-checked="false"] .bpx-appearance-moon { opacity: 0; transform: rotate(-35deg) scale(.65); }
.bpx-appearance-button[aria-checked="false"] .bpx-appearance-sun,
.bpx-appearance-button[aria-checked="true"] .bpx-appearance-moon { opacity: 1; transform: rotate(0) scale(1); }
bpx-appearance-switch .bpx-appearance-track { box-sizing: border-box; display: flex; align-items: center; flex: 0 0 40px; width: 40px; height: 24px; padding: 3px; border: 1px solid var(--appearance-border-strong); border-radius: 14px; background: #a8a8af; transition: border-color 200ms ease, background-color 200ms ease; }
bpx-appearance-switch .bpx-appearance-thumb { display: block; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #00000026; transition: transform 280ms cubic-bezier(.22, 1, .36, 1); }
bpx-appearance-switch [aria-checked="true"] .bpx-appearance-track { background: var(--appearance-action); border-color: #357cd3; }
bpx-appearance-switch [aria-checked="true"] .bpx-appearance-thumb { transform: translateX(16px); }
.bpx-theme-menu { flex: 0 0 208px; max-width: 100%; margin-left: auto; padding: 4px 6px; border: 1px solid var(--appearance-border); background: var(--appearance-control); border-radius: 16px; }
.bpx-appearance-public { position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); right: max(24px, env(safe-area-inset-right, 0px)); z-index: 1000; width: 76px; background: transparent; border: 0; border-radius: 999px; box-shadow: none; }
.bpx-appearance-public .bpx-appearance-button { min-height: 44px; padding: 8px; justify-content: center; gap: 8px; border-radius: inherit; }
.bpx-appearance-public .bpx-appearance-copy { display: none; }
.bpx-appearance-public .bpx-appearance-icon { flex-basis: 18px; height: 18px; }
.bpx-appearance-public .bpx-appearance-icon svg { width: 18px; height: 18px; transform: none; transition: opacity 180ms ease; }
.bpx-appearance-public .bpx-appearance-track { flex-basis: 30px; width: 30px; height: 18px; padding: 2px; border-color: #90949d; background: #90949d; }
.bpx-appearance-public .bpx-appearance-thumb { flex-basis: 12px; width: 12px; height: 12px; box-shadow: none; }
.bpx-appearance-public [aria-checked="true"] .bpx-appearance-track { background: #626873; border-color: #626873; }
.bpx-appearance-public [aria-checked="true"] .bpx-appearance-thumb { transform: translateX(12px); }
body.embed > .bpx-appearance-public { display: none; }

/* Shared chrome: quiet, opaque surfaces in both modes. */
html[data-appearance] .bpx-react-nav-bar,
html[data-appearance] .bpx-react-nav-surface {
  background: var(--appearance-surface); border-color: var(--appearance-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .08); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-appearance] .bpx-react-nav-surface--menu { background: var(--appearance-surface) !important; box-shadow: 0 12px 36px #0000001a !important; }
html[data-appearance] .bpx-react-nav-surface--menu .bpx-react-nav-surface-header { background: var(--appearance-surface) !important; box-shadow: none !important; }
html[data-appearance] .bpx-react-nav-surface--menu .bpx-react-nav-surface-header::before,
html[data-appearance] .bpx-react-nav-surface--menu .bpx-react-nav-surface-stat { display: none; }
html[data-appearance] .bpx-react-nav-surface--menu > .bpx-react-nav-sections { min-height: 0; }
html[data-appearance] .bpx-page-header-icon-shell { box-shadow: none; }
html[data-appearance] .bpx-page-header-icon-shell::before,
html[data-appearance] .bpx-page-header-icon-shell::after { display: none; }

/* Compact navigation and login artwork retain a charcoal tile on light surfaces.
   Public catalogue brand panels are styled locally in portal_catalogue.css. */
html[data-appearance] { --bpx-brand-tile: linear-gradient(145deg, #303237 0%, #1a1b1e 52%, #0e0f11 100%); }
/* Keep white catalogue artwork visible when an older page stylesheet is cached. */
html[data-appearance="light"] .bpx-catalogue-logo { background-color: #18181b; border-radius: 16px; }
html[data-appearance="light"] :is(.logo-wrap, .bpx-catalogue-product-mark, .hero-brand-mark) {
  background: var(--bpx-brand-tile); border-radius: 18px; padding: 12px;
}
html[data-appearance="light"] .bpx-catalogue-app-icon { background: var(--bpx-brand-tile); border-color: #36383e; }
html[data-appearance="light"] .bpx-portal-page .bpx-catalogue-open { background: var(--bpx-light-action); border-color: var(--bpx-light-action); color: #fff; }
html[data-appearance="light"] .bpx-portal-page .bpx-catalogue-open:hover { background: var(--bpx-light-action-hover); border-color: var(--bpx-light-action-hover); }
html[data-appearance="light"] .bpx-portal-page .bpx-catalogue-open::before { display: none; }
html[data-appearance="light"] :is(.login-product-left, .bpx-product-left, .bpx-card-left) > img { background: var(--bpx-brand-tile); border-color: #36383e; box-shadow: none; object-fit: contain; }
html[data-appearance="light"] :is(#bpx-react-nav-root, .bpx-react-nav-root).bpx-react-nav-root :is(.bpx-react-nav-brandmark, .bpx-react-nav-product-art),
html[data-appearance="light"] .login-products-mark,
html[data-appearance="light"] .bpx-products-mark { background: var(--bpx-brand-tile) !important; border-color: #36383e !important; box-shadow: none !important; }
html[data-appearance="light"] :is(#bpx-react-nav-root, .bpx-react-nav-root).bpx-react-nav-root .bpx-react-nav-product-art img,
html[data-appearance="light"] .bpx-products-mark img { filter: none !important; }
html[data-appearance="light"] .hljs :is(.hljs-string, .hljs-attr) { color: #197044; }
html[data-appearance="light"] .hljs :is(.hljs-keyword, .hljs-selector-tag) { color: #7240b3; }
html[data-appearance="light"] .hljs :is(.hljs-number, .hljs-literal) { color: #1767c9; }
html[data-appearance="light"] .hljs .hljs-comment { color: #606775; }
html[data-appearance="light"] :is(.liquid-bg, .bpx-veil, .dashboard-hero-grid) { display: none; }
html[data-appearance="light"] body::before,
html[data-appearance="light"] body::after { background-image: none !important; }

/* Vendors inherit the app palette, including their portals under <body>. */
html[data-appearance="light"] :is(.select2-dropdown, .select2-selection, .select2-container--default .select2-selection--multiple, .flatpickr-calendar, .ui-datepicker, .pac-container) {
  background: #fff !important; color: #22252b !important; border-color: #d9dce2 !important;
  box-shadow: 0 8px 28px #18202a14 !important;
}
html[data-appearance="light"] :is(.select2-search__field, .select2-selection__rendered, .flatpickr-current-month, .flatpickr-month, .flatpickr-weekday, .flatpickr-day, .flatpickr-time input, .ui-datepicker-title, .pac-item) { color: #22252b !important; background-color: transparent; }
html[data-appearance="light"] :is(.flatpickr-months, .flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-time) { background: #fff !important; color: #22252b !important; border-color: #d9dce2; }
html[data-appearance="light"] :is(.flatpickr-prev-month, .flatpickr-next-month) svg { fill: #606775 !important; }
html[data-appearance="light"] .flatpickr-day:is(.selected, .startRange, .endRange) { background: #1767c9 !important; color: #fff !important; border-color: #1767c9 !important; }
html[data-appearance="light"] .flatpickr-day:is(.prevMonthDay, .nextMonthDay, .flatpickr-disabled) { color: #7d8490 !important; }
html[data-appearance="light"] .select2-results__option--highlighted[aria-selected] { background: #edf4fd; color: #1767c9; }
html[data-appearance="light"] .hljs { background: #f5f5f7; color: #22252b; }

html[data-appearance-transition] :is(body, .bpx-react-nav-bar, .bpx-react-nav-surface, .inventory-list-row, .dashboard-card, .section-panel, .card, .panel, input, select, textarea) {
  transition-property: background-color, color, border-color;
  transition-duration: 220ms;
  transition-timing-function: ease;
}
@media (max-width: 640px) {
  .bpx-theme-menu { flex-basis: 100%; width: 100%; }
  html[data-appearance] .bpx-react-nav-surface--menu .bpx-react-nav-surface-header { flex-wrap: wrap; gap: 12px; }
  .bpx-appearance-public { right: 16px; top: calc(14px + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  bpx-appearance-switch *, html[data-appearance-transition] :is(body, input, select, textarea, .card, .panel) { transition: none !important; }
}
@media print {
  bpx-appearance-switch { display: none !important; }
  html[data-appearance] { color-scheme: light; }
}

/* The navigation control owns its geometry even on legacy pages with global button rules. */
:is(#bpx-react-nav-root, .bpx-react-nav-surface--menu) bpx-appearance-switch .bpx-appearance-button {
  display: flex !important; align-items: center; gap: 11px; box-sizing: border-box !important;
  width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 48px !important;
  margin: 0 !important; padding: 8px 12px !important; border: 0 !important; border-radius: 12px !important;
  background: transparent !important; color: var(--appearance-ink) !important;
  font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  box-shadow: none !important; transform: none !important; filter: none !important;
}
:is(#bpx-react-nav-root, .bpx-react-nav-surface--menu) bpx-appearance-switch .bpx-appearance-button:hover { background: var(--appearance-hover) !important; }
:is(#bpx-react-nav-root, .bpx-react-nav-surface--menu) bpx-appearance-switch .bpx-appearance-copy { min-width: 0; }