/* Final compatibility layer for legacy page CSS. Loaded after page styles. */

:root {
  color-scheme: light;
  --theme-control-bg: var(--surface-2);
  --theme-card-bg: var(--surface-card, var(--surface));
  --theme-table-bg: var(--surface-card, var(--surface));
  --theme-table-header-bg: var(--table-header-bg, var(--surface-inset, #f8fafc));
  --theme-control-border: var(--border);
  --theme-option-bg: var(--surface-2);
  --theme-option-text: var(--text-main);
}

/* Keep search glyphs visually pinned when a search control is hovered.
   Some controls animate their shell's shadow/border; the glyph must not
   inherit a transform or participate in flex reflow during that transition. */
.customer-search-box__icon,
.supplier-search-box__icon {
  flex: 0 0 14px;
  width: 14px;
  min-width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: none !important;
  transition: color 0.18s ease, opacity 0.18s ease !important;
  will-change: auto !important;
}

.master-modal__search-icon,
.master-modal__search-spinner,
.master-modal__search-clear,
.sd-filter-search .search-icon,
.po-filter-search .search-icon,
.dashboard-live-table__search-input-wrap > i,
.orders-table-search > i,
.dashboard-activity__search-icon {
  transform: translateY(-50%) !important;
  transition: color 0.18s ease, opacity 0.18s ease !important;
  will-change: auto !important;
}

/* Parent hover/focus states may change elevation, but never move the glyph. */
.master-modal__search-wrap:hover .master-modal__search-icon,
.sd-filter-search:hover .search-icon,
.po-filter-search:hover .search-icon,
.dashboard-live-table__search-input-wrap:hover > i,
.orders-table-search:hover > i,
.dashboard-activity__search-wrap:hover .dashboard-activity__search-icon {
  transform: translateY(-50%) !important;
}

.customer-search-box:hover .customer-search-box__icon,
.supplier-search-box:hover .supplier-search-box__icon {
  transform: none !important;
}

/* Flex-based search bars need a fixed icon slot as well.  Without an
   explicit basis, the icon can reflow by a pixel when the parent hover
   shadow/border transition is painted, which looks like a jump. */
.ic-search-bar > i,
.bf-search > i,
.supplier-assignment-page .supplier-search-box > i,
.widget__toolbar .search-box > i {
  flex: 0 0 14px;
  width: 14px;
  min-width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: none !important;
  transition: color 0.18s ease, opacity 0.18s ease !important;
  will-change: auto !important;
}

.ic-search-bar:hover > i,
.bf-search:hover > i,
.supplier-assignment-page .supplier-search-box:hover > i,
.widget__toolbar .search-box:hover > i {
  transform: none !important;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { color-scheme: dark; }
}

:root[data-theme="dark"] { color-scheme: dark; }

/* Chromium on Windows paints the native popup from these option values. */
select option,
select optgroup {
  background-color: var(--theme-option-bg) !important;
  color: var(--theme-option-text) !important;
}

:root[data-theme="dark"] select,
:root[data-theme="dark"] select option,
:root[data-theme="dark"] select optgroup {
  color-scheme: dark;
  background-color: var(--theme-option-bg) !important;
  color: var(--theme-option-text) !important;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] select,
  :root[data-theme="auto"] select option,
  :root[data-theme="auto"] select optgroup {
    color-scheme: dark;
    background-color: var(--theme-option-bg) !important;
    color: var(--theme-option-text) !important;
  }
}

/* Auth showcase parity: keep the metric badges and preview data legible on
   the dark surface. auth.css contains a later generic .metric-pill rule that
   intentionally removes the badge background for light layouts; these scoped
   rules restore the semantic colours only inside the auth showcase. */
:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-pill,
:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-blue,
:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-slate,
:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-amber,
:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-purple,
:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-green {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.45);
}

:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-blue {
  background: #4e66d7 !important;
}

:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-slate {
  background: #5d70c2 !important;
}

:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-amber {
  background: #c27a08 !important;
}

:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-purple {
  background: #7549d6 !important;
}

:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-green {
  background: #0b936c !important;
}

:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .cell-value,
:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .subject-line {
  color: #f8fafc !important;
}

:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .cell-value.success {
  color: #86efac !important;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-pill,
  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-blue,
  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-slate,
  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-amber,
  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-purple,
  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-green {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(2, 6, 23, 0.45);
  }

  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-blue {
    background: #4e66d7 !important;
  }

  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-slate {
    background: #5d70c2 !important;
  }

  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-amber {
    background: #c27a08 !important;
  }

  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-purple {
    background: #7549d6 !important;
  }

  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-pill.pill-solid-green {
    background: #0b936c !important;
  }

  [data-theme="auto"] .auth-page .live-inquiry-preview-card .cell-value,
  [data-theme="auto"] .auth-page .live-inquiry-preview-card .subject-line {
    color: #f8fafc !important;
  }

  [data-theme="auto"] .auth-page .live-inquiry-preview-card .cell-value.success {
    color: #86efac !important;
  }
}

/* Shared inputs, searches and native dropdowns. */
select,
option,
.dashboard-live-table__search-input,
.dashboard-live-table__filter-select,
.dashboard-activity__search-input,
.customer-search-box__input,
.supplier-search-box__input,
.sd-input,
.sd-select,
.input,
.inquiry-create-page .field-input,
.inquiry-create-page .field-select,
.inquiry-create-page .multi-select__input,
.inquiry-create-page .inquiry-create-textarea {
  color-scheme: inherit;
  background-color: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.dashboard-live-table__search-input::placeholder,
.dashboard-activity__search-input::placeholder,
.customer-search-box__input::placeholder,
.supplier-search-box__input::placeholder,
.sd-input::placeholder,
.input::placeholder,
.inquiry-create-page .field-input::placeholder,
.inquiry-create-page .multi-select__input::placeholder,
.inquiry-create-page .inquiry-create-textarea::placeholder {
  color: var(--text-soft) !important;
  opacity: 1;
}

.customer-search-box,
.supplier-search-box,
.sd-list-filter-search,
.sd-list-filter-select {
  background-color: var(--theme-control-bg) !important;
  border-color: var(--theme-control-border) !important;
}

/*
 * The opened native <select> menu is painted by Chromium/Windows and can
 * ignore the page theme. Filter/table selects are progressively enhanced by
 * theme-dropdowns.js; the native select stays in the form for compatibility.
 */
.theme-select {
  position: relative;
  display: inline-flex;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
}

/* Supplier names are unbounded business data. Keep the closed control inside
 * its table cell, but let the opened menu escape the table clipping context. */
.theme-select--supplier {
  min-width: 0;
  max-width: 100%;
}

.theme-select--supplier .theme-select__trigger {
  min-width: 0;
  max-width: 100%;
  padding-right: 1rem;
}

/* The remarks filter sits beside search and refresh controls. Keep its
 * trigger stable so opening/selecting a user never stretches the toolbar or
 * changes the table width. The menu itself is viewport-positioned by
 * theme-dropdowns.js because the card header clips overflowing children. */
.dashboard-activity__toolbar > .dashboard-activity__filter-select,
.dashboard-activity__toolbar > .theme-select {
  flex: 0 0 200px;
  width: 200px;
  min-width: 200px;
}

.theme-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--theme-control-border) !important;
  border-radius: 999px;
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.theme-select__label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-select__chevron {
  display: block;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-15%) rotate(45deg);
  opacity: 0.7;
}

.theme-select__trigger:hover,
.theme-select__trigger:focus-visible,
.theme-select.is-open .theme-select__trigger {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
  outline: none;
}

.theme-select__menu {
  position: absolute;
  z-index: 10000;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  max-height: min(320px, 42vh);
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--theme-control-border) !important;
  border-radius: 0.75rem;
  background: var(--theme-option-bg) !important;
  color: var(--theme-option-text) !important;
  box-shadow: 0 16px 34px rgb(2 6 23 / 24%);
}

/* Open menus are portalled to body by theme-dropdowns.js so table/card
 * overflow and sticky-cell stacking contexts cannot clip them. */
body > .theme-select__menu--portal {
  position: fixed;
  z-index: 12000;
  margin: 0;
}

/* Filter menus must escape table/card overflow and stay inside the viewport. */
.theme-select--viewport-menu .theme-select__menu {
  max-height: min(220px, calc(100vh - 16px));
  overflow-y: scroll !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.theme-select--supplier .theme-select__menu {
  min-width: 280px;
}

.theme-select--viewport-menu .theme-select__menu::-webkit-scrollbar {
  width: 8px;
}

.theme-select--viewport-menu .theme-select__menu::-webkit-scrollbar-track {
  background: transparent;
}

.theme-select--viewport-menu .theme-select__menu::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--theme-control-border) 80%, var(--brand) 20%);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.theme-select__option {
  width: 100%;
  min-height: 36px;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent !important;
  color: var(--theme-option-text) !important;
  font: inherit;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.theme-select__option:hover,
.theme-select__option:focus-visible {
  background: var(--surface-hover, color-mix(in srgb, var(--brand) 12%, transparent)) !important;
  color: var(--text-main) !important;
  outline: none;
}

.theme-select__option.is-selected {
  background: color-mix(in srgb, var(--brand) 18%, transparent) !important;
  color: var(--text-main) !important;
  font-weight: 600;
}

.theme-select > select[data-theme-select-enhanced="true"] {
  display: none !important;
}

@media (max-width: 1024px) {
  .dashboard-activity__toolbar > .dashboard-activity__filter-select,
  .dashboard-activity__toolbar > .theme-select {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}

/* KPIs, operational tables, directories and document surfaces. */
.dashboard-kpi-grid .metric-card,
.dashboard-kpi-card,
.dashboard-live-table-card,
.orders-table-card,
.table-card,
.dashboard-live-table,
.customer-directory-card,
.supplier-directory-card,
.inquiry-create-page .inq-card,
.inquiry-create-page .panel-card,
.inquiry-create-page .inquiry-create-section,
.inquiry-create-page .inq-preview,
.sd-card,
.sd-items-section,
.po-stage-bar,
.po-metric-card,
.po-system .sd-list-filters,
.po-system .sd-card:has(.empty-state) {
  background-color: var(--theme-card-bg) !important;
  color: var(--text-main);
  border-color: var(--border) !important;
}

.dashboard-live-table thead th,
.dashboard-live-table tbody td,
.customer-directory-table thead th,
.supplier-directory-table thead th,
.customer-table thead th,
.supplier-table thead th,
.directory-table thead th,
.customer-directory-table th:first-child,
.customer-directory-table td:first-child,
.supplier-directory-table th:first-child,
.supplier-directory-table td:first-child,
.customer-table th.col-no,
.customer-table td.col-no,
.customer-table th.col-company,
.customer-table td.col-company,
.supplier-table th.col-no,
.supplier-table td.col-no,
.supplier-table th.col-company,
.supplier-table td.col-company {
  background-color: var(--theme-table-bg) !important;
  color: var(--text-main);
  border-color: var(--border) !important;
}

/* Dialog text must not inherit a dark surface token accidentally. */
.internal-chat-modal,
.dialog {
  color: var(--text-main);
}

.ic-modal__title,
.ic-modal__tab,
.ic-modal__tab--active,
.ic-modal__close {
  color: var(--text-main) !important;
}

.inquiry-create-page .inq-card__title,
.inquiry-create-page .inquiry-create-section__title {
  color: var(--text-main) !important;
}

.inquiry-create-page .inq-preview,
.inquiry-create-page .inq-preview__head,
.inquiry-create-page .inquiry-date-mode,
.inquiry-create-page .inquiry-date-mode__option:has(input:checked) {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

/* Create Inquiry: page-specific legacy rules must follow the active theme. */
.inquiry-create-page .inquiry-create-page__title,
.inquiry-create-page .inquiry-create-page__subtitle,
.inquiry-create-page .inquiry-create-page__header-copy,
.inquiry-create-page .panel-card__title,
.inquiry-create-page .panel-card__subtitle {
  color: var(--text-main) !important;
}

.inquiry-create-page .inquiry-create-page__subtitle,
.inquiry-create-page .panel-card__subtitle {
  color: var(--text-muted) !important;
}

.inquiry-create-page .panel-card,
.inquiry-create-page .inquiry-create-card,
.inquiry-create-page .inquiry-create-card__header,
.inquiry-create-page .inquiry-create-card__body,
.inquiry-create-page .inquiry-create-section,
.inquiry-create-page .inquiry-create-section__header,
.inquiry-create-page .inquiry-create-actions,
.inquiry-create-page .inq-preview,
.inquiry-create-page .inq-preview__head,
.inquiry-create-page .inq-preview__cell,
.inquiry-create-page .inq-preview__empty-state {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.inquiry-create-page .panel-card__title,
.inquiry-create-page .panel-card__subtitle,
.inquiry-create-page .field-label,
.inquiry-create-page .inquiry-create-section__title,
.inquiry-create-page .inquiry-create-section__subtitle,
.inquiry-create-page .inq-preview__title,
.inquiry-create-page .inq-preview__lbl,
.inquiry-create-page .inq-preview__val,
.inquiry-create-page .inquiry-create-actions__meta {
  color: var(--text-main) !important;
}

.inquiry-create-page .panel-card__subtitle,
.inquiry-create-page .inquiry-create-section__subtitle,
.inquiry-create-page .field-help,
.inquiry-create-page .inq-preview__subtitle,
.inquiry-create-page .inq-preview__val--empty,
.inquiry-create-page .inq-preview__val--secondary,
.inquiry-create-page .inquiry-create-actions__meta {
  color: var(--text-muted) !important;
}

.inquiry-create-page .field-input,
.inquiry-create-page .field-select,
.inquiry-create-page .inquiry-create-textarea,
.inquiry-create-page .multi-select__input,
.inquiry-create-page .multi-select__selected {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-create-page .field-input:disabled,
.inquiry-create-page .field-select:disabled,
.inquiry-create-page .field-input[readonly],
.inquiry-create-page .multi-select__input:disabled {
  background: var(--surface-inset) !important;
  color: var(--text-soft) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-create-page .field-input::placeholder,
.inquiry-create-page .field-select::placeholder,
.inquiry-create-page .inquiry-create-textarea::placeholder,
.inquiry-create-page .multi-select__input::placeholder {
  color: var(--text-soft) !important;
  opacity: 1;
}

.inquiry-create-page .inquiry-date-mode,
.inquiry-create-page .inquiry-date-mode__option {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-create-page .inquiry-date-mode__option:has(input:checked) {
  background: color-mix(in srgb, var(--brand) 18%, var(--theme-control-bg)) !important;
  color: var(--text-main) !important;
  border-color: var(--brand) !important;
}

.inquiry-create-page .multi-select__dropdown,
.inquiry-create-page .multi-select__option,
.inquiry-create-page .multi-select__empty,
.inquiry-create-page .multi-select__contact-details {
  background: var(--theme-option-bg) !important;
  color: var(--theme-option-text) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-create-page .multi-select__option:hover,
.inquiry-create-page .multi-select__option:focus-visible,
.inquiry-create-page .multi-select__chip-remove:hover {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
}

.inquiry-create-page .inq-preview__grid,
.inquiry-create-page .inq-preview__cell {
  background: var(--theme-table-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.inquiry-create-page .inq-preview__badge,
.inquiry-create-page .inq-preview__chip {
  background: color-mix(in srgb, var(--brand) 16%, var(--theme-control-bg)) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-create-page .btn-secondary {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-create-page .btn-secondary:hover,
.inquiry-create-page .btn-secondary:focus-visible {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
  border-color: var(--brand) !important;
}

.inquiry-create-page .btn-primary {
  color: #fff !important;
}

/* Keep the submit action surface inside the same visual grid as the inquiry
   cards. The legacy stylesheet treated it as a bare top border while the
   theme adapter supplied a card background, leaving the message and actions
   looking detached at wide viewports. */
.inquiry-create-page .inquiry-create-actions {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 72px;
  margin: 18px 0 0 !important;
  padding: 15px 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  background: var(--theme-card-bg) !important;
}

.inquiry-create-page .inquiry-create-actions__meta {
  min-width: 0;
  max-width: 68ch;
  line-height: 1.45;
}

.inquiry-create-page .inquiry-create-actions__buttons {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.inquiry-create-page .inquiry-create-actions .btn-secondary {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-create-page .inquiry-create-actions .btn-secondary:hover,
.inquiry-create-page .inquiry-create-actions .btn-secondary:focus-visible {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
  border-color: var(--brand) !important;
}

@media (max-width: 800px) {
  .inquiry-create-page .inquiry-create-actions {
    min-height: 0;
    align-items: stretch;
    padding: 16px !important;
  }

  .inquiry-create-page .inquiry-create-actions__buttons {
    width: 100%;
    flex-wrap: wrap;
  }

  .inquiry-create-page .inquiry-create-actions__buttons .btn {
    flex: 1 1 160px;
    justify-content: center;
  }
}

/* The optional draft-recovery banner is rendered before the form cards.  It
   used a hard-coded pale surface, which became a high-contrast white strip in
   dark mode.  Keep its hierarchy, icon and actions on the same semantic
   surfaces as the rest of the inquiry form. */
.inquiry-create-page .inq-draft-banner {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border)) !important;
}

.inquiry-create-page .inq-draft-banner__title {
  color: var(--text-main) !important;
}

.inquiry-create-page .inq-draft-banner__subtitle {
  color: var(--text-muted) !important;
}

.inquiry-create-page .inq-draft-banner__icon {
  background: color-mix(in srgb, var(--brand) 16%, var(--theme-control-bg)) !important;
  color: var(--brand) !important;
}

.inquiry-create-page .inq-draft-banner .btn--primary {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}

.inquiry-create-page .inq-draft-banner .btn--ghost {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-create-page .inq-draft-banner .btn--ghost:hover,
.inquiry-create-page .inq-draft-banner .btn--ghost:focus-visible {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
  border-color: var(--brand) !important;
}

/* Create Inquiry: supplier selections and compact controls must remain usable
   in the dark theme. The supplier picker adds the contact line dynamically;
   keep the supplier name/remove action on one row and ellipsize only the
   secondary contact content instead of allowing the chip to reflow. */
.inquiry-create-page .multi-select__selected {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start;
  align-content: flex-start !important;
  justify-content: flex-start !important;
}

.inquiry-create-page .multi-select__chip--supplier {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  /* A selected supplier is a compact company chip, not a full-width panel. */
  width: max-content !important;
  flex: 0 1 auto !important;
  max-width: min(260px, 78%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.inquiry-create-page .multi-select__chip--supplier > span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.inquiry-create-page .multi-select__chip--supplier .multi-select__chip-remove {
  flex: 0 0 18px !important;
  align-self: center !important;
}

.inquiry-create-page .multi-select__chip--supplier .multi-select__chip-contact {
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 2px 4px 0 !important;
  padding: 3px 0 0 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}

/* Keep the chip compact even when legacy picker rules are loaded later. */
.inquiry-create-page [data-multi-select="suppliers"] .multi-select__selected > .multi-select__chip--supplier {
  display: inline-flex !important;
  align-self: flex-start !important;
  justify-self: start !important;
  width: max-content !important;
  max-width: min(260px, 78%) !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.inquiry-create-page [data-selected-supplier-details] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  min-width: 0 !important;
}

.inquiry-create-page [data-selected-supplier-details] .inquiry-create-field,
.inquiry-create-page [data-selected-supplier-details] .field-input,
.inquiry-create-page [data-selected-supplier-details] .field-select {
  min-width: 0 !important;
  max-width: 100% !important;
}

.inquiry-create-page [data-selected-supplier-details] .field-input,
.inquiry-create-page [data-selected-supplier-details] .field-select {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* The existing page refresh contains light-only icon tiles and preview
   badges. These tokenized surfaces preserve their accent colors while making
   their background, borders and text readable in dark and automatic themes. */
:root[data-theme="dark"] .inquiry-create-page .inquiry-create-section__icon,
:root[data-theme="dark"] .inquiry-create-page .inq-card__icon,
:root[data-theme="dark"] .inquiry-create-page .inq-preview__head-icon,
:root[data-theme="dark"] .inquiry-create-page .inq-preview__live-badge,
:root[data-theme="dark"] .inquiry-create-page .inq-preview__badge,
:root[data-theme="dark"] .inquiry-create-page .inq-preview__chip,
:root[data-theme="dark"] .inquiry-create-page #prev-ins,
:root[data-theme="dark"] .inquiry-create-page .multi-select__chip,
:root[data-theme="dark"] .inquiry-create-page .multi-select__chip-remove,
:root[data-theme="dark"] .inquiry-create-page .inquiry-date-mode__option,
:root[data-theme="dark"] .inquiry-create-page .inquiry-date-mode__option:has(input:checked) {
  border-color: var(--theme-control-border) !important;
}

:root[data-theme="dark"] .inquiry-create-page .inquiry-create-section__icon,
:root[data-theme="dark"] .inquiry-create-page .inq-card__icon,
:root[data-theme="dark"] .inquiry-create-page .inq-preview__head-icon {
  background: color-mix(in srgb, currentColor 14%, var(--theme-control-bg)) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .inquiry-create-page .inq-preview__live-badge {
  background: color-mix(in srgb, var(--success) 16%, var(--theme-control-bg)) !important;
  color: var(--success) !important;
  border: 1px solid color-mix(in srgb, var(--success) 34%, var(--theme-control-border)) !important;
}

:root[data-theme="dark"] .inquiry-create-page .inq-preview__badge,
:root[data-theme="dark"] .inquiry-create-page .inq-preview__chip,
:root[data-theme="dark"] .inquiry-create-page #prev-ins,
:root[data-theme="dark"] .inquiry-create-page .multi-select__chip {
  background: color-mix(in srgb, var(--brand) 16%, var(--theme-control-bg)) !important;
  color: var(--text-main) !important;
}

:root[data-theme="dark"] .inquiry-create-page .multi-select__chip-remove:hover,
:root[data-theme="dark"] .inquiry-create-page .inquiry-date-mode__option:hover {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .inquiry-create-page .inquiry-create-section__icon,
  :root[data-theme="auto"] .inquiry-create-page .inq-card__icon,
  :root[data-theme="auto"] .inquiry-create-page .inq-preview__head-icon {
    background: color-mix(in srgb, currentColor 14%, var(--theme-control-bg)) !important;
    box-shadow: none !important;
  }

  :root[data-theme="auto"] .inquiry-create-page .inq-preview__live-badge {
    background: color-mix(in srgb, var(--success) 16%, var(--theme-control-bg)) !important;
    color: var(--success) !important;
    border-color: color-mix(in srgb, var(--success) 34%, var(--theme-control-border)) !important;
  }

  :root[data-theme="auto"] .inquiry-create-page .inq-preview__badge,
  :root[data-theme="auto"] .inquiry-create-page .inq-preview__chip,
  :root[data-theme="auto"] .inquiry-create-page #prev-ins,
  :root[data-theme="auto"] .inquiry-create-page .multi-select__chip {
    background: color-mix(in srgb, var(--brand) 16%, var(--theme-control-bg)) !important;
    color: var(--text-main) !important;
    border-color: var(--theme-control-border) !important;
  }

  :root[data-theme="auto"] .inquiry-create-page .multi-select__chip-remove:hover,
  :root[data-theme="auto"] .inquiry-create-page .inquiry-date-mode__option:hover {
    background: var(--surface-hover) !important;
    color: var(--text-main) !important;
  }
}

/* Inquiry Review: mail queue, filters and expandable review surfaces. */
.inquiry-review-page__title,
.inquiry-review-page__header-copy,
.inquiry-review-page__toolbar,
.inquiry-review-tabs,
.inquiry-review-mail-list,
.inquiry-review-empty,
.inquiry-review-filter-dropdown__panel,
.inquiry-mail-card,
.inquiry-mail-card__expanded,
.inquiry-mail-card__reply-block,
.inquiry-mail-card__headers,
.inquiry-review-job-search__results {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.inquiry-review-page__subtitle,
.inquiry-review-filter-form__label,
.inquiry-mail-card__sender,
.inquiry-mail-card__sender-email,
.inquiry-mail-card__date,
.inquiry-mail-card__preview,
.inquiry-review-empty p,
.inquiry-review-job-search__secondary {
  color: var(--text-muted) !important;
}

.inquiry-review-page__title,
.inquiry-mail-card__subject,
.inquiry-mail-card__sender-name,
.inquiry-mail-card__section-title,
.inquiry-review-empty h3,
.inquiry-review-job-search__primary {
  color: var(--text-main) !important;
}

.inquiry-review-page .inquiry-review-search,
.inquiry-review-page .inquiry-review-search__input,
.inquiry-review-page .dashboard-live-table__search-input,
.inquiry-review-page .inquiry-review-filter-toggle,
.inquiry-review-page .inquiry-review-reset-btn,
.inquiry-review-page .inquiry-review-filter-form input,
.inquiry-review-page .inquiry-review-filter-form select,
.inquiry-review-page .inquiry-review-link-form__input,
.inquiry-review-page .inquiry-mail-card__reply-textarea {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-review-page input::placeholder,
.inquiry-review-page textarea::placeholder {
  color: var(--text-soft) !important;
  opacity: 1;
}

.inquiry-review-page .inquiry-review-filter-toggle:hover,
.inquiry-review-page .inquiry-review-reset-btn:hover,
.inquiry-review-page .inquiry-review-filter-form .btn-secondary:hover,
.inquiry-review-page .inquiry-mail-card__actions .btn-secondary:hover {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
  border-color: var(--brand) !important;
}

.inquiry-review-page .inquiry-review-tabs {
  background: var(--theme-control-bg) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-review-page .inquiry-review-tabs__tab {
  color: var(--text-muted) !important;
}

.inquiry-review-page .inquiry-review-tabs__tab:hover,
.inquiry-review-page .inquiry-review-tabs__tab--active {
  background: color-mix(in srgb, var(--brand) 16%, var(--theme-control-bg)) !important;
  color: var(--text-main) !important;
}

.inquiry-review-page .inquiry-review-tabs__count {
  background: var(--surface-inset) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-review-page .inquiry-mail-card:hover {
  background: var(--surface-hover) !important;
  border-color: var(--brand) !important;
}

.inquiry-review-page .inquiry-mail-card__avatar {
  background: color-mix(in srgb, var(--brand) 18%, var(--theme-control-bg)) !important;
  color: var(--brand) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-review-page .inquiry-mail-card__meta,
.inquiry-review-page .inquiry-mail-card__attachments,
.inquiry-review-page .inquiry-review-job-search__item,
.inquiry-review-page .inquiry-review-job-search__empty {
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

.inquiry-review-page .inquiry-review-job-search__item:hover {
  background: var(--surface-hover) !important;
}

.inquiry-review-page .inquiry-mail-chip--muted {
  background: var(--surface-inset) !important;
  color: var(--text-muted) !important;
  border-color: var(--theme-control-border) !important;
}

.inquiry-review-page .inquiry-mail-card__iframe {
  background: var(--theme-control-bg) !important;
  border-color: var(--theme-control-border) !important;
}

/* Directory relationship drawer and sticky identity columns. The directory
   stylesheet has intentional light-mode defaults, so these late rules are
   the single dark/auto theme adapter for both customer and supplier pages. */
.directory-job-drawer__panel,
.directory-job-drawer__header,
.directory-job-drawer__footer,
.directory-job-drawer__profile {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

/* Keep the drawer's surface hierarchy deliberate in every theme: shell,
   inset stream, then a quiet control/card surface. This applies to the single
   shared drawer used by both customer and supplier directories. */
.directory-job-drawer__content {
  background: var(--surface-inset) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.directory-job-drawer__header,
.directory-job-drawer__footer {
  box-shadow: none !important;
}

.directory-job-drawer__eyebrow {
  background: color-mix(in srgb, var(--brand) 14%, var(--theme-control-bg)) !important;
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border)) !important;
  color: var(--brand) !important;
}

.directory-job-drawer__close,
.directory-job-drawer__footer-close {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.directory-job-drawer__close:hover,
.directory-job-drawer__footer-close:hover {
  background: var(--surface-hover) !important;
  border-color: var(--brand) !important;
  color: var(--text-main) !important;
}

.directory-job-drawer h2,
.directory-job-drawer__job-title,
.directory-job-drawer__stat strong,
.directory-job-drawer__profile-grid strong {
  color: var(--text-main) !important;
}

.directory-job-drawer__subtitle,
.directory-job-drawer__entity-reference,
.directory-job-drawer__stream-header,
.directory-job-drawer__stat span,
.directory-job-drawer__profile-heading,
.directory-job-drawer__profile-grid span {
  color: var(--text-muted) !important;
}

.directory-job-drawer__stat,
.directory-job-drawer__profile {
  background: var(--theme-control-bg) !important;
  border-color: var(--theme-control-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.directory-job-drawer__stat--active {
  background: color-mix(in srgb, var(--brand) 12%, var(--theme-control-bg)) !important;
  border-color: color-mix(in srgb, var(--brand) 42%, var(--theme-control-border)) !important;
}

.directory-job-drawer__stat--active span,
.directory-job-drawer__stat--active strong,
.directory-job-drawer__profile-source {
  color: var(--brand) !important;
}

.directory-job-drawer__job {
  background: var(--theme-control-bg) !important;
  border-color: var(--theme-control-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.directory-job-drawer__job:hover {
  background: var(--surface-hover) !important;
  border-color: var(--brand) !important;
}

.directory-job-drawer__reference,
.directory-job-drawer__stage {
  background: color-mix(in srgb, var(--brand) 12%, var(--theme-control-bg)) !important;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--theme-control-border)) !important;
  color: var(--brand) !important;
}

.directory-job-drawer__role {
  background: var(--surface-inset) !important;
  border: 1px solid var(--theme-control-border) !important;
  color: var(--text-muted) !important;
}

.directory-job-drawer__job-meta {
  border-top-color: var(--border) !important;
  color: var(--text-muted) !important;
}

.directory-job-drawer__job-meta strong,
.directory-job-drawer__stream-count,
.directory-job-drawer__footer-count,
.directory-job-drawer__footer-live {
  color: var(--text-muted) !important;
}

.directory-job-drawer__job-link,
.directory-job-drawer__profile-source {
  color: var(--brand) !important;
}

.directory-job-drawer__footer .btn-secondary,
.directory-job-drawer__retry {
  background: var(--theme-control-bg) !important;
  border-color: var(--theme-control-border) !important;
  box-shadow: none !important;
  color: var(--text-main) !important;
}

.directory-job-drawer__footer .btn-secondary:hover,
.directory-job-drawer__retry:hover {
  background: var(--surface-hover) !important;
  border-color: var(--brand) !important;
  color: var(--text-main) !important;
}

.directory-job-drawer__profile-heading,
.directory-job-drawer__profile-location {
  border-color: var(--border) !important;
}

.customer-page .customer-table th.col-no,
.customer-page .customer-table td.col-no,
.customer-page .customer-table th.col-company,
.customer-page .customer-table td.col-company,
.supplier-page .supplier-table th.col-no,
.supplier-page .supplier-table td.col-no,
.supplier-page .supplier-table th.col-company,
.supplier-page .supplier-table td.col-company {
  background: var(--theme-table-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.customer-page .customer-table thead th.col-no,
.customer-page .customer-table thead th.col-company,
.supplier-page .supplier-table thead th.col-no,
.supplier-page .supplier-table thead th.col-company {
  background: var(--theme-table-header-bg) !important;
}

/* Search controls: keep the glyph readable in every interaction state.
   Page-level hover/focus rules may change the control text color, but the
   magnifier should remain a muted contrast cue rather than turning white. */
.dashboard-live-table__search-input-wrap > i,
.dashboard-activity__search-icon,
.orders-table-search > i,
.sd-filter-search .search-icon,
.po-filter-search .search-icon,
.customer-search-box__icon,
.supplier-search-box__icon {
  color: var(--text-muted, #64748b) !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2;
}

.dashboard-live-table__search-input-wrap:focus-within > i,
.dashboard-activity__search-wrap:focus-within .dashboard-activity__search-icon,
.orders-table-search:focus-within > i,
.sd-filter-search:focus-within .search-icon,
.po-filter-search:focus-within .search-icon,
.customer-search-box:focus-within .customer-search-box__icon,
.supplier-search-box:focus-within .supplier-search-box__icon {
  color: var(--text-muted, #64748b) !important;
}

/* Prevent long placeholders, values, and selected filter labels from
   widening or spilling out of rounded search/filter pills. */
.dashboard-live-table__search-input,
.dashboard-activity__search-input,
.orders-table-search input,
.sd-list-filter-search .sd-input,
.sd-list-filter-search .input,
.po-filter-search .input,
.customer-search-box__input,
.supplier-search-box__input,
.sd-list-filter-select,
.dashboard-live-table__filter-select,
.dashboard-activity__filter-select,
.theme-select__trigger {
  min-width: 0 !important;
  max-width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Compact controls and icon surfaces must follow the active theme too.  A
   number of legacy page styles give these small controls a light ghost
   surface, which becomes a white island in dark/auto mode. */
.ui-icon-button:not(.ui-icon-button--danger),
.dashboard-live-table__refresh-btn,
.customer-page .customer-action-btn--edit,
.supplier-page .supplier-action-btn--edit {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.ui-icon-button:not(.ui-icon-button--danger):hover,
.dashboard-live-table__refresh-btn:hover {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
  border-color: var(--brand) !important;
}

.ui-icon-button--danger,
.customer-page .customer-action-btn--delete,
.supplier-page .supplier-action-btn--delete {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: var(--danger-border, var(--danger)) !important;
}

.ui-icon-button--danger:hover,
.customer-page .customer-action-btn--delete:hover,
.supplier-page .supplier-action-btn--delete:hover {
  background: color-mix(in srgb, var(--danger) 18%, var(--theme-control-bg)) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}

.customer-page .customer-action-btn--edit,
.supplier-page .supplier-action-btn--edit {
  background: color-mix(in srgb, var(--warning) 12%, var(--theme-control-bg)) !important;
  color: var(--warning) !important;
  border-color: color-mix(in srgb, var(--warning) 42%, var(--theme-control-border)) !important;
}

.customer-page .customer-action-btn--edit:hover,
.supplier-page .supplier-action-btn--edit:hover {
  background: color-mix(in srgb, var(--warning) 20%, var(--theme-control-bg)) !important;
  border-color: var(--warning) !important;
}

/* Dashboard KPI numbers sit on coloured badges; using a surface token here
   makes the number dark-on-dark in the dark theme. */
.metric-card__badge {
  color: var(--color-neutral-0, #fff) !important;
}

.metric-card__icon-box {
  border: 1px solid var(--theme-control-border) !important;
}

/* Fallback for browsers where the custom select enhancer has not run yet. */
.dashboard-live-table__filter-select,
.dashboard-activity__filter-select,
.orders-filter,
.sd-list-filter-select,
.po-select-auto,
.inline-cell-select {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

/* List search controls must remain part of the filter toolbar.  Some of the
   legacy PO/document rules only sized the select controls, which allowed the
   search flex item to collapse to zero width in the dark layout. */
.po-system #poFilterForm,
.sd-scope #documentFilterForm {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.po-system #poFilterForm .po-filter-search,
.sd-scope #documentFilterForm .sd-list-filter-search {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 1 360px !important;
  min-width: 240px !important;
  width: auto !important;
}

.po-system #poFilterForm #poSearch,
.sd-scope #documentFilterForm #filterSearch {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  min-width: 0 !important;
  color: var(--text-main) !important;
  background: var(--theme-control-bg) !important;
  border-color: var(--theme-control-border) !important;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, box-shadow 160ms ease !important;
}

.po-system #poFilterForm #poSearch::placeholder,
.sd-scope #documentFilterForm #filterSearch::placeholder {
  color: var(--text-muted) !important;
}

.po-system #poFilterForm #poSearch:focus,
.sd-scope #documentFilterForm #filterSearch:focus {
  background: var(--theme-card-bg) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent) !important;
  outline: none !important;
}

/* PO rows and inline actions previously inherited light-theme hover surfaces,
   producing the white/washed row shown in dark mode. Use semantic tokens so
   the same rules remain correct in light, dark, and automatic themes. */
.po-system .po-table tbody tr,
.po-system .po-table tbody td,
.po-system .po-inline-actions .btn-icon,
.po-system .po-table td.doc-no a,
.po-system .po-status-badge {
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, box-shadow 160ms ease !important;
}

.po-system .po-table tbody tr,
.po-system .po-table tbody tr > td {
  background: var(--theme-table-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.po-system .po-table tbody tr:hover,
.po-system .po-table tbody tr:hover > td {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
}

.po-system .po-table td,
.po-system .po-supplier-name,
.po-system .po-supplier-sub,
.po-system .po-table td.created-by,
.po-system .po-table td.created-by * {
  color: var(--text-main) !important;
}

.po-system .po-table .po-number-link,
.po-system .po-table td.doc-no a {
  background: color-mix(in srgb, var(--brand) 12%, var(--theme-control-bg)) !important;
  color: var(--brand) !important;
  border-color: color-mix(in srgb, var(--brand) 28%, var(--theme-control-border)) !important;
}

.po-system .po-table .po-number-link:hover,
.po-system .po-table td.doc-no a:hover {
  background: color-mix(in srgb, var(--brand) 20%, var(--surface-hover)) !important;
  color: var(--brand) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}

.po-system .po-inline-actions .btn-icon {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.po-system .po-inline-actions .btn-icon:hover,
.po-system .po-inline-actions .btn-icon:focus-visible {
  background: var(--surface-hover) !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}

@media (max-width: 760px) {
  .po-system #poFilterForm,
  .sd-scope #documentFilterForm {
    flex-wrap: wrap !important;
  }

  .po-system #poFilterForm .po-filter-search,
  .sd-scope #documentFilterForm .sd-list-filter-search {
    flex-basis: 100% !important;
  }
}

/* Summary dialogs and PDF utility actions are compact surfaces too. Keep
   their branded icon fills white, but theme the panel, close control and
   secondary actions so dark mode has no light rectangles. */
.job-summary-modal,
.job-ai-modal {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.job-summary-modal__header,
.job-ai-modal__header,
.job-summary-modal__body,
.job-ai-modal__body,
.jsm-ai-summary-card,
.job-ai-modal .job-ai-summary-error {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.job-summary-modal__close,
.job-ai-modal__close,
.jsm-ai-btn,
.sd-scope .sd-pdf-actions .sd-pdf-action--regenerate,
.sd-scope .sd-pdf-actions .sd-pdf-action--back {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.job-summary-modal__close:hover,
.job-ai-modal__close:hover,
.jsm-ai-btn:hover:not(:disabled),
.sd-scope .sd-pdf-actions .sd-pdf-action--regenerate:hover,
.sd-scope .sd-pdf-actions .sd-pdf-action--back:hover {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
  border-color: var(--brand) !important;
}

.job-summary-modal h1,
.job-summary-modal h2,
.job-summary-modal h3,
.job-summary-modal p,
.job-ai-modal h1,
.job-ai-modal h2,
.job-ai-modal h3,
.job-ai-modal p,
.jsm-ai-summary-text,
.jsm-email-summary {
  color: var(--text-main) !important;
}

:root[data-theme="dark"] .job-summary-modal-overlay,
:root[data-theme="dark"] .job-ai-modal-overlay {
  background: color-mix(in srgb, #020617 68%, transparent) !important;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .job-summary-modal-overlay,
  :root[data-theme="auto"] .job-ai-modal-overlay {
    background: color-mix(in srgb, #020617 68%, transparent) !important;
  }
}

/*
 * Legacy page surface adapter.
 *
 * Several older page bundles still contain light-only surface literals. Keep
 * their layout and brand treatments intact, but move their surfaces, text,
 * controls, tables, popovers and dialogs onto the shared semantic tokens.
 * This layer is loaded after every page stylesheet and also by auth_base.html.
 */

/* Meetings / activities */
.activities-page .activities-directory-card,
.activities-page .activities-create-card,
.activities-page .activities-status-card,
.activities-page .activities-toggles-card,
.activities-page .activities-panel-box,
.activities-page .activities-card,
.activities-page .activities-panel,
.activities-page .activities-attended-modal__box {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.activities-page .activities-create-form__notice,
.activities-page .activities-chip-input,
.activities-page .activities-hero-input,
.activities-page .act-timepicker__trigger,
.activities-page .act-timepicker__dropdown,
.activities-page .activities-tabs__btn,
.activities-page .activities-duration-chip,
.activities-page .activities-toggle-row,
.activities-page .activities-attended-row {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.activities-page input,
.activities-page select,
.activities-page textarea,
.activities-page .activities-chip-input__text {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.activities-page input::placeholder,
.activities-page textarea::placeholder,
.activities-page .activities-card__meta,
.activities-page .activities-create-form__field-help,
.activities-page .activities-attended-modal__hint {
  color: var(--text-muted) !important;
}

.activities-page .activities-tabs__btn:hover,
.activities-page .activities-tabs__btn--active,
.activities-page .activities-card:hover,
.activities-page .activities-attended-row:hover {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
  border-color: var(--brand) !important;
}

/* Admin console and VAT editor */
.admin-page .admin-kpi-card,
.admin-page .admin-nav-card,
.admin-page .admin-table-card,
.admin-page .add-country-card,
.admin-page .vat-edit-country-panel,
.admin-page .vat-edit-rate-row {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.admin-page .admin-table,
.admin-page .admin-table thead,
.admin-page .admin-table tbody tr,
.admin-page .admin-table tbody td,
.admin-page .country-header {
  background: var(--theme-table-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.admin-page .admin-table tbody tr:hover,
.admin-page .admin-nav-card:hover {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
}

.admin-page input,
.admin-page select,
.admin-page textarea,
.admin-page .admin-btn--ghost {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

/* Job detail, drawers and supplier pickers */
.job-detail-page .job-card,
.job-detail-page .job-detail-summary-card,
.job-detail-page .job-message-card,
.job-detail-page .job-remarks-card,
.job-detail-page .job-files-card,
.job-detail-page .drawer-panel,
.job-detail-page .mobile-panel-content,
.job-detail-page .supplier-results {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.job-detail-page .job-form-group input,
.job-detail-page .job-form-group select,
.job-detail-page .job-reply-textarea,
.job-detail-page .job-remark-form textarea,
.job-detail-page .job-file-form textarea,
.job-detail-page .supplier-search-input,
.job-detail-page .supplier-result-item,
.job-detail-page .attachment-chip {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.job-detail-page .supplier-result-item:hover,
.job-detail-page .attachment-chip:hover,
.job-detail-page .drawer-panel .job-card:hover {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
  border-color: var(--brand) !important;
}

/* Profile settings */
.profile-shell .profile-card,
.profile-shell .profile-messages,
.profile-shell .profile-message,
.profile-shell .profile-static-input {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.profile-shell .profile-input,
.profile-shell .profile-file-input,
.profile-shell .profile-btn--light {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.profile-shell .profile-help,
.profile-shell .profile-label,
.profile-shell .profile-photo-label {
  color: var(--text-muted) !important;
}

/* Supplier assignment */
.supplier-assignment-page .supplier-assignment-card,
.supplier-assignment-page .supplier-card-header,
.supplier-assignment-page .supplier-assignment-item,
.supplier-assignment-page .supplier-assignment-empty-state {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.supplier-assignment-page .supplier-search-box,
.supplier-assignment-page .supplier-search-box input,
.supplier-assignment-page .supplier-select,
.supplier-assignment-page .supplier-save-btn {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.supplier-assignment-page .supplier-assignment-item:hover {
  background: var(--surface-hover) !important;
  border-color: var(--brand) !important;
}

/* Sales documents and purchase orders */
.sd-scope .sd-page,
.sd-scope .sd-card,
.sd-scope .sd-setup-card,
.sd-scope .sd-history-entry,
.sd-scope .sd-delete-card,
.sd-scope .sd-email-summary,
.sd-scope .sd-item-modal__panel,
.po-system .po-page,
.po-system .po-stat-card,
.po-system .po-card,
.po-system .po-form-section,
.po-system .po-action-card,
.po-system .po-banner-card,
.po-system .po-email-layout,
.po-system .po-dialog {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.sd-scope .sd-item-modal__form .sd-input,
.sd-scope .sd-setup-card input,
.sd-scope .sd-setup-card select,
.sd-scope .sd-setup-card textarea,
.po-system .po-form-group input,
.po-system .po-form-group select,
.po-system .po-form-group textarea,
.po-system .po-filters input,
.po-system .po-filters select,
.po-system .po-dialog-form input,
.po-system .po-dialog-form select,
.po-system .po-dialog-form textarea {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.sd-scope .sd-item-modal__form .sd-input::placeholder,
.po-system input::placeholder,
.po-system textarea::placeholder {
  color: var(--text-soft) !important;
  opacity: 1;
}

.sd-scope .sd-bulk-table,
.sd-scope .sd-bulk-table thead th,
.sd-scope .sd-bulk-table tbody td,
.po-system .po-table,
.po-system .po-table thead th,
.po-system .po-table tbody td,
.po-system .po-items-table,
.po-system .po-preview-table {
  background: var(--theme-table-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.sd-scope .sd-bulk-table tbody tr:hover,
.po-system .po-table tbody tr:hover,
.po-system .po-items-table tbody tr:hover,
.po-system .po-preview-table tbody tr:hover {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
}

.po-system .po-btn--secondary,
.po-system .po-btn--blue,
.po-system .po-btn--icon,
.sd-scope .sd-detail-action--back,
.sd-scope .sd-item-modal__close {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

/* Auth pages use a separate base template, so keep their glass surfaces in
   the same token system without changing the dark branded hero treatment. */
.auth-page,
.auth-page .auth-shell,
.auth-page .auth-main,
.auth-page .auth-page-wrapper {
  background: var(--surface-page) !important;
  color: var(--text-main) !important;
}

.auth-page .auth-glass-card,
.auth-page .login-card,
.auth-page .metric-mini-card,
.auth-page .live-inquiry-preview-card,
.auth-page .auth-card {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.auth-page .auth-helptext,
.auth-page .auth-field__error,
.auth-page .auth-error,
.auth-page .auth-success,
.auth-page .auth-note,
.auth-page .auth-security-chip {
  color: var(--text-main) !important;
}

.auth-page .auth-error,
.auth-page .auth-success,
.auth-page .auth-note,
.auth-page .auth-security-chip {
  background: var(--theme-control-bg) !important;
  border-color: var(--theme-control-border) !important;
}

.auth-page .auth-heading,
.auth-page .auth-subheading,
.auth-page .auth-field-group label,
.auth-page .hero-headline,
.auth-page .brand-title,
.auth-page .subject-line,
.auth-page .company-name,
.auth-page .cell-value {
  color: var(--text-main) !important;
}

.auth-page .hero-description,
.auth-page .brand-sub,
.auth-page .metric-name,
.auth-page .cell-label,
.auth-page .login-footer,
.auth-page .login-subtitle {
  color: var(--text-muted) !important;
}

.auth-page input,
.auth-page select,
.auth-page textarea,
.auth-page .input-wrapper input,
.auth-page .auth-input-wrapper input,
.auth-page .auth-password-toggle {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.auth-page input::placeholder,
.auth-page textarea::placeholder {
  color: var(--text-soft) !important;
  opacity: 1;
}

/* Historical backfill uses an inline legacy stylesheet. Re-assert the
   semantic surfaces here so cards, filters, forms and tables stay readable
   when the global theme changes after the page CSS has loaded. */
.backfill-page .backfill-header,
.backfill-page .bf-card,
.backfill-page .bf-card__head,
.backfill-page .bf-card__body,
.backfill-page .bf-foot {
  background: var(--theme-card-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

/* -------------------------------------------------------------------------
   Auth showcase dark-mode calibration
   The auth page is a branded two-column composition, not a generic card
   grid.  Keep its hierarchy explicit so the telemetry preview and login
   form remain readable when the global theme switches to dark mode.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] .auth-page .auth-page-wrapper,
:root[data-theme="dark"] .auth-page .auth-grid-container {
  background:
    radial-gradient(circle at 18% 18%, rgba(78, 102, 215, 0.16), transparent 34%),
    radial-gradient(circle at 86% 74%, rgba(245, 158, 11, 0.08), transparent 28%),
    #0b1020 !important;
}

:root[data-theme="dark"] .auth-page .auth-left-showcase {
  background: linear-gradient(180deg, #151c31 0%, #0d1324 100%) !important;
  border-right-color: rgba(148, 163, 184, 0.20) !important;
}

:root[data-theme="dark"] .auth-page .brand-title,
:root[data-theme="dark"] .auth-page .hero-headline,
:root[data-theme="dark"] .auth-page .company-name,
:root[data-theme="dark"] .auth-page .subject-line,
:root[data-theme="dark"] .auth-page .cell-value,
:root[data-theme="dark"] .auth-page .metric-count-pill {
  color: #f8fafc !important;
}

:root[data-theme="dark"] .auth-page .brand-sub,
:root[data-theme="dark"] .auth-page .hero-description,
:root[data-theme="dark"] .auth-page .metric-name,
:root[data-theme="dark"] .auth-page .cell-label,
:root[data-theme="dark"] .auth-page .login-footer,
:root[data-theme="dark"] .auth-page .login-subtitle,
:root[data-theme="dark"] .auth-page .privacy-lock-pill,
:root[data-theme="dark"] .auth-page .live-activity-ticker__label {
  color: #cbd5e1 !important;
}

:root[data-theme="dark"] .auth-page .status-pill-badge,
:root[data-theme="dark"] .auth-page .brand-suite-badge,
:root[data-theme="dark"] .auth-page .privacy-lock-pill,
:root[data-theme="dark"] .auth-page .ins-code-pill,
:root[data-theme="dark"] .auth-page .compliance-badge {
  background: rgba(30, 41, 74, 0.90) !important;
  border-color: rgba(129, 140, 248, 0.34) !important;
  color: #bfdbfe !important;
}

:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-mini-card {
  min-width: 0;
  background: linear-gradient(180deg, #19233a 0%, #11192c 100%) !important;
  border-color: rgba(148, 163, 184, 0.30) !important;
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.28) !important;
}

:root[data-theme="dark"] .auth-page .metric-top {
  align-items: center;
}

:root[data-theme="dark"] .auth-page .metric-name {
  min-height: 2.25em;
  line-height: 1.15;
}

:root[data-theme="dark"] .auth-page .live-inquiry-preview-card {
  background: #101827 !important;
  border-color: rgba(148, 163, 184, 0.30) !important;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.34) !important;
}

:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .inquiry-preview-header,
:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .live-inquiry-header {
  background: #18233a !important;
  border-bottom-color: rgba(148, 163, 184, 0.22) !important;
}

:root[data-theme="dark"] .auth-page .stage-tag.rfq {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.36) !important;
  color: #fbbf24 !important;
}

:root[data-theme="dark"] .auth-page .live-activity-ticker {
  background: rgba(30, 41, 59, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}

:root[data-theme="dark"] .auth-page .auth-right-container {
  background:
    radial-gradient(circle at 50% 42%, rgba(37, 99, 235, 0.10), transparent 48%),
    #0f172a !important;
  border-left-color: rgba(148, 163, 184, 0.14) !important;
}

:root[data-theme="dark"] .auth-page .auth-glass-card {
  width: min(100%, 420px);
  box-sizing: border-box;
  margin-inline: auto;
  background: rgba(20, 27, 44, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.30) !important;
  box-shadow: 0 24px 56px rgba(2, 6, 23, 0.48) !important;
}

:root[data-theme="dark"] .auth-page .auth-heading {
  color: #f8fafc !important;
}

:root[data-theme="dark"] .auth-page .auth-subheading,
:root[data-theme="dark"] .auth-page .auth-field-group label {
  color: #cbd5e1 !important;
}

:root[data-theme="dark"] .auth-page .auth-glass-card input[type="text"],
:root[data-theme="dark"] .auth-page .auth-glass-card input[type="email"],
:root[data-theme="dark"] .auth-page .auth-glass-card input[type="password"] {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

:root[data-theme="dark"] .auth-page .auth-glass-card input::placeholder {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .auth-page .auth-glass-card input:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22) !important;
}

:root[data-theme="dark"] .auth-page .auth-glass-card input:-webkit-autofill,
:root[data-theme="dark"] .auth-page .auth-glass-card input:-webkit-autofill:hover,
:root[data-theme="dark"] .auth-page .auth-glass-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  -webkit-text-fill-color: #f8fafc !important;
  box-shadow: 0 0 0 1000px #0f172a inset !important;
}

:root[data-theme="dark"] .auth-page .auth-inline-error {
  background: rgba(127, 29, 29, 0.30) !important;
  border-color: rgba(248, 113, 113, 0.36) !important;
  color: #fecaca !important;
}

:root[data-theme="dark"] .auth-page .link-forgot-pw {
  color: #a5b4fc !important;
}

:root[data-theme="dark"] .auth-page .btn-microsoft-sso {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

:root[data-theme="dark"] .auth-page .sso-primary { color: #f8fafc !important; }
:root[data-theme="dark"] .auth-page .sso-secondary { color: #cbd5e1 !important; }
:root[data-theme="dark"] .auth-page .sso-chevron { color: #94a3b8 !important; }

:root[data-theme="dark"] .auth-page .brand-logo-icon,
:root[data-theme="dark"] .auth-page .compliance-badge,
:root[data-theme="dark"] .auth-page .auth-state-icon {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #c7d2fe !important;
}

:root[data-theme="dark"] .auth-page .auth-or-divider {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .auth-page .auth-or-divider::before,
:root[data-theme="dark"] .auth-page .auth-or-divider::after {
  background: #475569 !important;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .auth-page .auth-page-wrapper,
  [data-theme="auto"] .auth-page .auth-grid-container {
    background:
      radial-gradient(circle at 18% 18%, rgba(78, 102, 215, 0.16), transparent 34%),
      radial-gradient(circle at 86% 74%, rgba(245, 158, 11, 0.08), transparent 28%),
      #0b1020 !important;
  }

  [data-theme="auto"] .auth-page .auth-left-showcase {
    background: linear-gradient(180deg, #151c31 0%, #0d1324 100%) !important;
    border-right-color: rgba(148, 163, 184, 0.20) !important;
  }

  [data-theme="auto"] .auth-page .brand-title,
  [data-theme="auto"] .auth-page .hero-headline,
  [data-theme="auto"] .auth-page .company-name,
  [data-theme="auto"] .auth-page .subject-line,
  [data-theme="auto"] .auth-page .cell-value,
  [data-theme="auto"] .auth-page .metric-count-pill,
  [data-theme="auto"] .auth-page .auth-heading { color: #f8fafc !important; }

  [data-theme="auto"] .auth-page .brand-sub,
  [data-theme="auto"] .auth-page .hero-description,
  [data-theme="auto"] .auth-page .metric-name,
  [data-theme="auto"] .auth-page .cell-label,
  [data-theme="auto"] .auth-page .login-footer,
  [data-theme="auto"] .auth-page .login-subtitle,
  [data-theme="auto"] .auth-page .auth-subheading,
  [data-theme="auto"] .auth-page .auth-field-group label { color: #cbd5e1 !important; }

  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-mini-card {
    background: linear-gradient(180deg, #19233a 0%, #11192c 100%) !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
  }

  [data-theme="auto"] .auth-page .live-inquiry-preview-card {
    background: #101827 !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
  }

  [data-theme="auto"] .auth-page .auth-glass-card {
    width: min(100%, 420px);
    box-sizing: border-box;
    margin-inline: auto;
    background: rgba(20, 27, 44, 0.96) !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
  }

  [data-theme="auto"] .auth-page .auth-right-container {
    background:
      radial-gradient(circle at 50% 42%, rgba(37, 99, 235, 0.10), transparent 48%),
      #0f172a !important;
    border-left-color: rgba(148, 163, 184, 0.14) !important;
  }

  [data-theme="auto"] .auth-page .auth-glass-card input[type="text"],
  [data-theme="auto"] .auth-page .auth-glass-card input[type="email"],
  [data-theme="auto"] .auth-page .auth-glass-card input[type="password"] {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
  }

  [data-theme="auto"] .auth-page .btn-microsoft-sso {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
  }

  [data-theme="auto"] .auth-page .sso-primary { color: #f8fafc !important; }
  [data-theme="auto"] .auth-page .sso-secondary { color: #cbd5e1 !important; }
  [data-theme="auto"] .auth-page .sso-chevron { color: #94a3b8 !important; }

  [data-theme="auto"] .auth-page .brand-logo-icon,
  [data-theme="auto"] .auth-page .compliance-badge,
  [data-theme="auto"] .auth-page .auth-state-icon {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #c7d2fe !important;
  }

  [data-theme="auto"] .auth-page .auth-glass-card input:-webkit-autofill,
  [data-theme="auto"] .auth-page .auth-glass-card input:-webkit-autofill:hover,
  [data-theme="auto"] .auth-page .auth-glass-card input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
    -webkit-text-fill-color: #f8fafc !important;
    box-shadow: 0 0 0 1000px #0f172a inset !important;
  }

  [data-theme="auto"] .auth-page .auth-inline-error {
    background: rgba(127, 29, 29, 0.30) !important;
    border-color: rgba(248, 113, 113, 0.36) !important;
    color: #fecaca !important;
  }

  [data-theme="auto"] .auth-page .link-forgot-pw { color: #a5b4fc !important; }
}

/* Keep authentication pages on the exact same dark tokens as the main app.
   This intentionally avoids a separate navy palette that can look lighter or
   greyer than the dashboard dark mode. */
:root[data-theme="dark"] .auth-page .auth-page-wrapper,
:root[data-theme="dark"] .auth-page .auth-grid-container,
:root[data-theme="dark"] .auth-page .auth-left-showcase,
:root[data-theme="dark"] .auth-page .auth-right-container {
  background: var(--bg-app) !important;
  color: var(--text-main) !important;
}

:root[data-theme="dark"] .auth-page .auth-glass-card,
:root[data-theme="dark"] .auth-page .metric-mini-card,
:root[data-theme="dark"] .auth-page .live-inquiry-preview-card {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .inquiry-preview-header,
:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .live-inquiry-header,
:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .preview-card-header,
:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .live-activity-ticker {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

/* The auth showcase uses a dedicated preview-card-header and scan chip.
   Their light translucent backgrounds otherwise become a flat grey slab in
   dark mode, unlike the dashboard's navy surface tokens. */
:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .supplier-scan-chip {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .live-activity-ticker__label,
:root[data-theme="dark"] .auth-page .live-inquiry-preview-card .cell-label {
  color: var(--text-muted) !important;
}

:root[data-theme="dark"] .auth-page input,
:root[data-theme="dark"] .auth-page select,
:root[data-theme="dark"] .auth-page textarea,
:root[data-theme="dark"] .auth-page .btn-microsoft-sso {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

:root[data-theme="dark"] .auth-page input::placeholder,
:root[data-theme="dark"] .auth-page textarea::placeholder,
:root[data-theme="dark"] .auth-page .auth-subheading,
:root[data-theme="dark"] .auth-page .hero-description,
:root[data-theme="dark"] .auth-page .brand-sub,
:root[data-theme="dark"] .auth-page .metric-name,
:root[data-theme="dark"] .auth-page .login-subtitle {
  color: var(--text-muted) !important;
}

:root[data-theme="dark"] .auth-page input:-webkit-autofill,
:root[data-theme="dark"] .auth-page input:-webkit-autofill:hover,
:root[data-theme="dark"] .auth-page input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
  box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
  -webkit-text-fill-color: var(--text-main) !important;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .auth-page .auth-page-wrapper,
  [data-theme="auto"] .auth-page .auth-grid-container,
  [data-theme="auto"] .auth-page .auth-left-showcase,
  [data-theme="auto"] .auth-page .auth-right-container {
    background: var(--bg-app) !important;
    color: var(--text-main) !important;
  }

  [data-theme="auto"] .auth-page .auth-glass-card,
  [data-theme="auto"] .auth-page .metric-mini-card,
  [data-theme="auto"] .auth-page .live-inquiry-preview-card {
    background: var(--surface-card) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
  }

  [data-theme="auto"] .auth-page .live-inquiry-preview-card .inquiry-preview-header,
  [data-theme="auto"] .auth-page .live-inquiry-preview-card .live-inquiry-header,
  [data-theme="auto"] .auth-page .live-inquiry-preview-card .preview-card-header,
  [data-theme="auto"] .auth-page .live-inquiry-preview-card .live-activity-ticker {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
  }

  [data-theme="auto"] .auth-page .live-inquiry-preview-card .supplier-scan-chip {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
  }

  [data-theme="auto"] .auth-page .live-inquiry-preview-card .live-activity-ticker__label,
  [data-theme="auto"] .auth-page .live-inquiry-preview-card .cell-label {
    color: var(--text-muted) !important;
  }

  [data-theme="auto"] .auth-page input,
  [data-theme="auto"] .auth-page select,
  [data-theme="auto"] .auth-page textarea,
  [data-theme="auto"] .auth-page .btn-microsoft-sso {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
  }

  [data-theme="auto"] .auth-page input::placeholder,
  [data-theme="auto"] .auth-page textarea::placeholder,
  [data-theme="auto"] .auth-page .auth-subheading,
  [data-theme="auto"] .auth-page .hero-description,
  [data-theme="auto"] .auth-page .brand-sub,
  [data-theme="auto"] .auth-page .metric-name,
  [data-theme="auto"] .auth-page .login-subtitle {
    color: var(--text-muted) !important;
  }

  [data-theme="auto"] .auth-page input:-webkit-autofill,
  [data-theme="auto"] .auth-page input:-webkit-autofill:hover,
  [data-theme="auto"] .auth-page input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
    box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
  }
}

.backfill-page .bf-toolbar,
.backfill-page .bf-field input,
.backfill-page .bf-field select,
.backfill-page .bf-field textarea,
.backfill-page .bf-search,
.backfill-page .bf-select,
.backfill-page .bf-pill {
  background: var(--theme-control-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--theme-control-border) !important;
}

.backfill-page .bf-table,
.backfill-page .bf-table thead tr,
.backfill-page .bf-table tbody tr,
.backfill-page .bf-table tbody td {
  background: var(--theme-table-bg) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}

.backfill-page .bf-table tbody tr:hover,
.backfill-page .bf-btn-secondary:hover {
  background: var(--surface-hover) !important;
  color: var(--text-main) !important;
  border-color: var(--brand) !important;
}

.backfill-page .bf-field label,
.backfill-page .bf-help,
.backfill-page .bf-table th,
.backfill-page .bf-empty,
.backfill-page .bf-foot {
  color: var(--text-muted) !important;
}

.backfill-page .bf-field input::placeholder,
.backfill-page .bf-field textarea::placeholder,
.backfill-page .bf-search input::placeholder {
  color: var(--text-soft) !important;
  opacity: 1;
}

/* Auth dark-mode parity: these selectors intentionally match the more
   specific legacy auth rules so preview cards and form controls cannot fall
   back to the old navy palette. */
:root[data-theme="dark"] .auth-page .auth-grid-container .dashboard-metric-strip .metric-mini-card,
:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-mini-card {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--card-shadow) !important;
}

:root[data-theme="dark"] .auth-page .auth-glass-card {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
}

:root[data-theme="dark"] .auth-page .auth-right-container,
:root[data-theme="dark"] .auth-page .auth-left-showcase,
:root[data-theme="dark"] .auth-page .auth-grid-container {
  background: var(--bg-app) !important;
}

:root[data-theme="dark"] .auth-page .auth-glass-card input[type="text"],
:root[data-theme="dark"] .auth-page .auth-glass-card input[type="email"],
:root[data-theme="dark"] .auth-page .auth-glass-card input[type="password"],
:root[data-theme="dark"] .auth-page .auth-glass-card .auth-input {
  background: var(--surface-2) !important;
  color: var(--text-main) !important;
  border-color: var(--border-strong) !important;
}

:root[data-theme="dark"] .auth-page .auth-glass-card input:-webkit-autofill,
:root[data-theme="dark"] .auth-page .auth-glass-card input:-webkit-autofill:hover,
:root[data-theme="dark"] .auth-page .auth-glass-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
  box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
  -webkit-text-fill-color: var(--text-main) !important;
}

:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-mini-card::after,
:root[data-theme="dark"] .auth-page .dashboard-metric-strip .metric-mini-card.is-telemetry-active::after {
  opacity: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .auth-page .auth-grid-container .dashboard-metric-strip .metric-mini-card,
  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-mini-card {
    background: var(--surface-card) !important;
    border-color: var(--border) !important;
    box-shadow: var(--card-shadow) !important;
  }

  [data-theme="auto"] .auth-page .auth-glass-card,
  [data-theme="auto"] .auth-page .auth-glass-card {
    background: var(--surface-card) !important;
    border-color: var(--border) !important;
  }

  [data-theme="auto"] .auth-page .auth-right-container,
  [data-theme="auto"] .auth-page .auth-left-showcase,
  [data-theme="auto"] .auth-page .auth-grid-container {
    background: var(--bg-app) !important;
  }

  [data-theme="auto"] .auth-page .auth-glass-card input[type="text"],
  [data-theme="auto"] .auth-page .auth-glass-card input[type="email"],
  [data-theme="auto"] .auth-page .auth-glass-card input[type="password"],
  [data-theme="auto"] .auth-page .auth-glass-card .auth-input {
    background: var(--surface-2) !important;
    color: var(--text-main) !important;
    border-color: var(--border-strong) !important;
  }

  [data-theme="auto"] .auth-page .auth-glass-card input:-webkit-autofill,
  [data-theme="auto"] .auth-page .auth-glass-card input:-webkit-autofill:hover,
  [data-theme="auto"] .auth-page .auth-glass-card input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
    box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
  }

  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-mini-card::after,
  [data-theme="auto"] .auth-page .dashboard-metric-strip .metric-mini-card.is-telemetry-active::after {
    opacity: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* Page-family contracts live in page-family-contracts.css. */