/* B-Design-3 — Allowed Pages Refactor & Enforcement hooks.
   Purpose: keep allowed company pages visually unified while remaining easy to tune later.
   Scope: Dashboard, Reports, Settings, Catalog, Customers, Inventory, Operations, Growth/remaining pages, Auth.
   Excluded direct scope: Platform Admin/Super Admin, Marketing/Website, POS, New Order, Call Center, Call Center Orders, Sales Log.

   Rule: this file does not own business behavior. It only maps page-level UI to global tokens.
*/
@layer features {
  /* Page-level hook defaults. Later, tune a page by overriding these variables on its root class. */
  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-command-grid,
    .cx-catalog-main,
    .cx-customer-result,
    .cx-customer-form,
    .cx-auth-page,
    .cx-ops-pane,
    .cx-ops-panels,
    .inventory-page-card,
    .inventory-insight-card,
    .inventory-command-tile,
    .cx-remaining-header,
    .cx-filter-bar,
    .cx-tab-bar
  ) {
    --cx-page-hook-card-bg: var(--cx-card-bg);
    --cx-page-hook-card-border: var(--cx-card-border);
    --cx-page-hook-card-radius: var(--cx-card-radius);
    --cx-page-hook-card-shadow: var(--cx-card-shadow);
    --cx-page-hook-tab-bg: var(--cx-table-toolbar-bg);
    --cx-page-hook-tab-active-bg: var(--cx-brand-gradient);
    --cx-page-hook-tab-active-text: var(--cx-text-inverse);
    --cx-page-hook-soft-bg: color-mix(in srgb, var(--cx-brand-soft) 34%, var(--cx-surface-card));
    --cx-page-hook-soft-border: color-mix(in srgb, var(--cx-brand) 16%, var(--cx-border-soft));
    --cx-page-hook-muted-bg: color-mix(in srgb, var(--cx-surface-muted) 78%, var(--cx-brand-soft));
    --cx-page-hook-accent-shadow: 0 14px 32px rgba(44, 31, 74, .10);
  }

  /* Unified legacy window hooks for allowed pages that still do not use openModal(). */
  .cx-settings-modal-backdrop,
  .cx-ops-modal {
    background: var(--cx-window-backdrop);
    backdrop-filter: blur(8px);
  }

  .cx-settings-modal,
  .cx-ops-modal .cx-modal-card {
    background: var(--cx-modal-bg);
    color: var(--cx-text-main);
    border: 1px solid var(--cx-modal-border);
    border-radius: var(--cx-modal-radius);
    box-shadow: var(--cx-modal-shadow);
  }

  .cx-settings-modal header,
  .cx-settings-modal footer,
  .cx-ops-modal .cx-modal-header,
  .cx-ops-modal .cx-modal-footer {
    background: var(--cx-modal-header-bg);
    border-color: var(--cx-modal-border);
  }

  .cx-settings-modal footer,
  .cx-ops-modal .cx-modal-footer {
    background: var(--cx-modal-footer-bg);
  }

  .cx-settings-modal-body,
  .cx-ops-modal .cx-modal-body {
    background: linear-gradient(180deg, color-mix(in srgb, var(--cx-surface-card) 96%, var(--cx-brand-soft)), var(--cx-surface-card));
  }

  /* Unified allowed mini cards/panels without touching excluded POS/Call Center/Sales Log pages. */
  :where(
    .cx-settings-stat,
    .cx-services-preview-grid > div,
    .cx-catalog-scope,
    .cx-contract-strip,
    .cx-catalog-side,
    .cx-catalog-main .cx-card,
    .cx-catalog-visibility-box,
    .cx-recipe-editor,
    .cx-offer-picker,
    .cx-customer-address-card,
    .cx-customer-result,
    .cx-ops-table-card,
    .cx-mini-card,
    .inventory-page-card,
    .inventory-insight-card,
    .inventory-command-tile
  ) {
    background: var(--cx-page-hook-card-bg, var(--cx-card-bg));
    border-color: var(--cx-page-hook-card-border, var(--cx-card-border));
    border-radius: var(--cx-page-hook-card-radius, var(--cx-card-radius));
    box-shadow: var(--cx-page-hook-card-shadow, var(--cx-card-shadow));
    color: var(--cx-text-main);
  }

  :where(
    .cx-catalog-category,
    .cx-check-chip,
    .cx-recipe-mini span,
    .cx-recipe-mini small,
    .cx-live-totals,
    .cx-offer-preview span,
    .cx-code-chip,
    .cx-alert-row,
    .cx-inline-note,
    .cx-settings-warning,
    .cx-settings-info,
    .cx-settings-modal-message,
    .inventory-alert,
    .inventory-low-list,
    .cx-catalog-owner-note
  ) {
    border-color: var(--cx-page-hook-soft-border, var(--cx-border-soft));
    background: var(--cx-page-hook-soft-bg, var(--cx-state-bg));
    color: var(--cx-text-main);
  }

  /* Unified empty/error/feedback states in allowed page areas. */
  :where(
    .cx-settings-empty,
    .cx-empty-mini,
    .cx-empty-state,
    .cx-table-empty,
    .remaining-warn,
    .cx-form-error,
    .inventory-count-preview [data-empty-state]
  ) {
    border-color: var(--cx-state-border);
    background: var(--cx-state-bg);
    color: var(--cx-state-text);
    border-radius: var(--cx-radius-lg);
  }

  /* Tables inside allowed page cards inherit shared B-Design-2 table contract. */
  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .cx-ops-pane,
    .inventory-page-card,
    .inventory-insight-card
  ) .cx-table-wrap {
    border-color: var(--cx-table-wrap-border);
    background: var(--cx-table-bg);
    box-shadow: var(--cx-table-wrap-shadow);
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .cx-ops-pane,
    .inventory-page-card,
    .inventory-insight-card
  ) .cx-table thead th {
    background: var(--cx-table-head-bg);
    color: var(--cx-table-head-text);
  }

  /* Variant hooks: easy future page tuning without hardcoded colors. */
  .reports-page,
  .financial-center-page,
  .cost-control-page,
  .audit-risk-page {
    --cx-page-hook-soft-bg: color-mix(in srgb, var(--cx-sem-forecast-soft) 38%, var(--cx-surface-card));
  }

  .cx-settings-page {
    --cx-page-hook-soft-bg: color-mix(in srgb, var(--cx-brand-soft) 42%, var(--cx-surface-card));
  }

  .cx-catalog-command-grid,
  .cx-catalog-main {
    --cx-page-hook-soft-bg: color-mix(in srgb, var(--cx-sem-inventory-soft) 34%, var(--cx-surface-card));
  }

  .inventory-page-card,
  .inventory-insight-card,
  .inventory-command-tile {
    --cx-page-hook-soft-bg: color-mix(in srgb, var(--cx-sem-inventory-soft) 40%, var(--cx-surface-card));
  }

  .cx-ops-pane,
  .cx-ops-panels {
    --cx-page-hook-soft-bg: color-mix(in srgb, var(--cx-sem-settlement-soft) 34%, var(--cx-surface-card));
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.cx-settings-tab, .cx-catalog-tab, .remaining-tab, .cx-tab-btn, .cx-ops-tabs .cx-tab) {
      transition-duration: 1ms !important;
      transform: none !important;
    }
  }
}


/* B-Design Table Fix — allowed page table hooks.
   Loaded after feature CSS to keep allowed company tables readable without touching excluded pages. */
@layer features {
  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .cx-ops-pane,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table-wrap, .cx-smart-table-wrap) {
    max-block-size: var(--cx-enterprise-table-max-height);
    min-block-size: 120px;
    overflow: auto;
  }

  /* Inventory purchase/movement ledgers are operational tables: readable rows, no visual compression. */
  :where(.inventory-page-card, .inventory-insight-card) .cx-table-wrap:has(.inventory-table),
  :where(.inventory-page-card, .inventory-insight-card) .cx-table-wrap:has(.inventory-movement-table) {
    --cx-enterprise-table-max-height: min(68vh, 720px);
    --cx-enterprise-table-row-height: 58px;
    --cx-enterprise-table-cell-y: .95rem;
    border-color: var(--cx-enterprise-table-wrap-border);
    background: var(--cx-enterprise-table-wrap-bg);
    box-shadow: var(--cx-enterprise-table-wrap-shadow);
  }

  :where(.inventory-page-card, .inventory-insight-card) :where(.inventory-table, .inventory-movement-table) {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: var(--cx-enterprise-table-wrap-bg);
  }

  :where(.inventory-page-card, .inventory-insight-card) :where(.inventory-table, .inventory-movement-table) thead th {
    height: var(--cx-enterprise-table-head-height);
    padding: .88rem var(--cx-enterprise-table-cell-x) !important;
    background: var(--cx-enterprise-table-head-bg) !important;
    color: var(--cx-enterprise-table-head-text) !important;
    border-block-end: 1px solid var(--cx-enterprise-table-border);
    vertical-align: middle !important;
  }

  :where(.inventory-page-card, .inventory-insight-card) :where(.inventory-table, .inventory-movement-table) tbody td {
    min-height: var(--cx-enterprise-table-row-height);
    padding: var(--cx-enterprise-table-cell-y) var(--cx-enterprise-table-cell-x) !important;
    background: var(--cx-enterprise-table-row-bg);
    vertical-align: middle;
    line-height: 1.45;
    color: var(--cx-text-main);
  }

  :where(.inventory-page-card, .inventory-insight-card) :where(.inventory-table, .inventory-movement-table) tbody tr:nth-child(even) td {
    background: var(--cx-enterprise-table-row-alt-bg);
  }

  :where(.inventory-page-card, .inventory-insight-card) :where(.inventory-table, .inventory-movement-table) tbody tr:hover td {
    background: var(--cx-enterprise-table-row-hover-bg) !important;
  }
}


/* B-Design-Recovery-1 — Scope-safe page table hooks.
   Keep enterprise ledger treatment limited to inventory page cards only; never all .cx-card. */
@layer features {
  :where(.reports-page, .financial-center-page, .cost-control-page, .audit-risk-page, .cx-settings-page, .cx-catalog-main, .cx-customer-result, .cx-ops-pane) :where(.cx-table-wrap, .cx-smart-table-wrap) {
    min-block-size: 0;
  }

  :where(.inventory-page-card, .inventory-insight-card) :where(.cx-table-wrap, .cx-smart-table-wrap) {
    min-block-size: 0;
    max-block-size: min(68vh, 720px);
    overflow: auto;
  }

  :where(.inventory-page-card, .inventory-insight-card) :where(.inventory-table, .inventory-movement-table) {
    min-inline-size: var(--cx-enterprise-table-ledger-min-width, 1120px);
  }
}


/* B-Design-Recovery-2 — Page hook restraint.
   Standard/empty smart tables on allowed pages must not inherit enterprise max-height/width behavior. */
@layer features {
  :where(.reports-page, .financial-center-page, .cost-control-page, .audit-risk-page, .cx-settings-page, .cx-catalog-main, .cx-customer-result, .cx-ops-pane, .remaining-page, .growth-page) :where(.cx-table-wrap, .cx-smart-table-wrap):not(:has(.cx-table--enterprise)):not(:has(.cx-table--ledger)):not(:has(.cx-table--movement)):not(:has(.inventory-table)):not(:has(.inventory-movement-table)) {
    max-block-size: none;
    min-block-size: 0;
  }

  :where(.reports-page, .financial-center-page, .cost-control-page, .audit-risk-page, .cx-settings-page, .cx-catalog-main, .cx-customer-result, .cx-ops-pane, .remaining-page, .growth-page) :where(.cx-table-wrap, .cx-smart-table-wrap):has(.cx-table-empty) {
    max-block-size: none !important;
    min-block-size: 150px !important;
  }
}

/* B-Design-Recovery-3 — page hooks must not force standard tables into enterprise layout. */
@layer features {
  :where(.reports-page, .financial-center-page, .cost-control-page, .audit-risk-page, .cx-settings-page, .cx-catalog-main, .cx-customer-result, .cx-ops-pane, .remaining-page, .growth-page) :where(.cx-table-wrap, .cx-smart-table-wrap):not([data-cx-table-variant="enterprise"]):not([data-cx-table-variant="ledger"]):not([data-cx-table-variant="movement"]):not(:has(.cx-table--enterprise)):not(:has(.cx-table--ledger)):not(:has(.cx-table--movement)):not(:has(.inventory-table)):not(:has(.inventory-movement-table)) {
    max-block-size: none !important;
    overflow: auto !important;
    box-shadow: none;
  }

  :where(.reports-page, .financial-center-page, .cost-control-page, .audit-risk-page, .cx-settings-page, .cx-catalog-main, .cx-customer-result, .cx-ops-pane, .remaining-page, .growth-page) :where(.cx-table-wrap, .cx-smart-table-wrap)::before,
  :where(.reports-page, .financial-center-page, .cost-control-page, .audit-risk-page, .cx-settings-page, .cx-catalog-main, .cx-customer-result, .cx-ops-pane, .remaining-page, .growth-page) :where(.cx-table-wrap, .cx-smart-table-wrap)::after {
    content: none !important;
    display: none !important;
  }
}

/* Costix Backoffice UI Refresh — canonical route-scoped visual layer.
   This replaces the previous Smart Table v2 presentation layer. The route skin is assigned by the
   existing app-shell navigation flow; protected POS/Call Center/Sales Log routes never receive it.
   Visual only: no data loading, pagination, event, polling, animation-loop, or business-flow ownership. */
@layer features {
  html[data-ui-skin="backoffice"] [data-route-outlet] {
    --cx-page-hook-card-bg: var(--cx-card-bg);
    --cx-page-hook-card-border: var(--cx-card-border);
    --cx-page-hook-card-radius: var(--cx-card-radius);
    --cx-page-hook-card-shadow: var(--cx-card-shadow);
    --cx-page-hook-tab-bg: var(--cx-surface-muted);
    --cx-page-hook-tab-active-bg: var(--cx-surface);
    --cx-page-hook-tab-active-text: var(--cx-brand-text);
    --cx-page-hook-soft-bg: var(--cx-brand-soft);
    --cx-page-hook-soft-border: rgba(90, 53, 119, .11);
    --cx-page-hook-muted-bg: #f8f6fa;
    --cx-page-hook-accent-shadow: 0 1px 2px rgba(23,21,29,.04), 0 8px 22px rgba(23,21,29,.035);
  }

  html[data-ui-skin="backoffice"] [data-route-outlet] > :where(section, div)[class*="page"],
  html[data-ui-skin="backoffice"] [data-route-outlet] > :where(section, div)[class*="workspace"],
  html[data-ui-skin="backoffice"] [data-route-outlet] > :where(section, div)[class*="center"] {
    inline-size: 100%;
    max-inline-size: none;
    min-inline-size: 0;
    margin-inline: 0;
    box-sizing: border-box;
  }

  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header {
    position: relative;
    overflow: visible;
    min-block-size: 0;
    padding: .2rem 0 .6rem;
    border: 0;
    border-radius: 0;
    color: var(--cx-text-main);
    background: transparent;
    box-shadow: none;
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header::after {
    content: none;
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header h1,
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header h2,
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header strong {
    color: var(--cx-text-strong);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header h1 {
    margin: 0;
    font-size: clamp(1.25rem, 1.55vw, 1.56rem);
    line-height: 1.25;
    letter-spacing: -.018em;
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header .cx-help,
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header .cx-page-eyebrow,
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header p {
    color: var(--cx-text-soft);
  }

  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-card,
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-kpi,
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(
    .cx-settings-stat,
    .cx-services-preview-grid > div,
    .cx-catalog-scope,
    .cx-contract-strip,
    .cx-catalog-side,
    .cx-catalog-main .cx-card,
    .cx-catalog-visibility-box,
    .cx-recipe-editor,
    .cx-offer-picker,
    .cx-customer-address-card,
    .cx-customer-result,
    .cx-ops-table-card,
    .cx-mini-card,
    .inventory-page-card,
    .inventory-insight-card,
    .inventory-command-tile
  ) {
    border-color: var(--cx-card-border);
    border-radius: var(--cx-card-radius);
    background: var(--cx-card-bg);
    box-shadow: var(--cx-card-shadow);
  }

  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-card-header {
    min-block-size: 46px;
    padding: var(--cx-card-header-padding);
    border-block-end: 1px solid var(--cx-card-header-border);
    background: var(--cx-card-header-bg);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-card-header h2,
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-card-header h3 {
    color: var(--cx-text-strong);
    font-weight: 950;
    letter-spacing: -.012em;
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-card-body { padding: var(--cx-card-body-padding); }

  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-kpi,
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-card--metric {
    min-block-size: var(--cx-card-metric-min-height, 84px);
    background: var(--cx-card-bg);
    border-inline-end: 3px solid var(--cx-sem-color, var(--cx-brand-accent));
    box-shadow: var(--cx-card-shadow);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-kpi-value,
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-metric-value {
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    letter-spacing: -.035em;
  }

  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-filter-panel, .cx-filter-bar, .cx-table-toolbar) {
    gap: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-card-radius);
    background: var(--cx-surface);
    box-shadow: var(--cx-card-shadow);
  }

  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-input, .cx-select, .cx-textarea),
  html[data-ui-skin="backoffice"] [data-route-outlet] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  html[data-ui-skin="backoffice"] [data-route-outlet] select,
  html[data-ui-skin="backoffice"] [data-route-outlet] textarea {
    min-block-size: 42px;
    border-radius: 10px;
    border-color: var(--cx-field-border);
    background: var(--cx-field-bg);
    color: var(--cx-field-text);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-input, .cx-select, .cx-textarea):focus,
  html[data-ui-skin="backoffice"] [data-route-outlet] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
  html[data-ui-skin="backoffice"] [data-route-outlet] select:focus,
  html[data-ui-skin="backoffice"] [data-route-outlet] textarea:focus {
    outline: 0;
    border-color: rgba(111,53,165,.48);
    box-shadow: 0 0 0 3px rgba(111,53,165,.10);
  }

  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-btn {
    min-block-size: 40px;
    border-radius: 10px;
    padding: .56rem .86rem;
    font-size: .88rem;
    font-weight: 900;
    box-shadow: none;
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-btn-primary, .cx-btn--primary) {
    color: #fff;
    border-color: transparent;
    background: var(--cx-btn-primary-bg);
    box-shadow: 0 7px 16px rgba(88,44,124,.14);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-btn-primary, .cx-btn--primary):hover {
    box-shadow: 0 10px 22px rgba(88,44,124,.19);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-btn-ghost, .cx-btn--ghost, .cx-btn--secondary) {
    background: var(--cx-surface);
    color: var(--cx-text-main);
    border-color: var(--cx-border);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-btn-ghost, .cx-btn--ghost, .cx-btn--secondary):hover {
    color: var(--cx-brand-strong);
    border-color: var(--cx-border-strong);
    background: var(--cx-brand-soft);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] .cx-table-actions .cx-btn {
    min-block-size: 32px;
    padding: .38rem .64rem;
    border-radius: 8px;
    font-size: .8rem;
  }

  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-table-wrap, .cx-smart-table-wrap) {
    border-color: var(--cx-table-wrap-border);
    border-radius: var(--cx-table-radius);
    background: var(--cx-table-bg);
    box-shadow: var(--cx-table-wrap-shadow);
    scrollbar-color: rgba(111,53,165,.26) transparent;
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-table, .cx-smart-table) {
    color: var(--cx-text-main);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-table thead th, .cx-smart-table thead th) {
    color: var(--cx-table-head-text);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: 0;
    background: var(--cx-table-head-bg);
    border-block-end-color: rgba(96,63,122,.11);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-table tbody td, .cx-smart-table tbody td) {
    font-size: .85rem;
    border-block-end-color: rgba(76,47,103,.065);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-table tbody tr:nth-child(even), .cx-smart-table tbody tr:nth-child(even)) {
    background: var(--cx-enterprise-table-row-alt-bg);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-table tbody tr:hover, .cx-smart-table tbody tr:hover) {
    background: var(--cx-table-row-hover-bg);
  }

  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-pagination, .cx-smart-detail-pagination, .cx-table-pager) {
    min-block-size: 46px;
    padding: .6rem .72rem;
    border-radius: 12px;
    border-color: rgba(65,43,86,.09);
    background: var(--cx-surface);
    box-shadow: none;
  }

  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-status-pill, .cx-chip, .cx-badge) {
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 900;
  }

  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-settings-modal-backdrop, .cx-ops-modal) {
    background: rgba(26,17,37,.50);
    backdrop-filter: blur(8px);
  }
  html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-settings-modal, .cx-ops-modal .cx-modal-card) {
    border-radius: 18px;
    border-color: rgba(65,43,86,.10);
    background: var(--cx-surface);
    box-shadow: 0 28px 70px rgba(31,18,44,.20);
  }

  html[data-ui-skin="backoffice"][data-theme="dark"] [data-route-outlet] :where(.cx-filter-panel, .cx-filter-bar, .cx-table-toolbar),
  html[data-ui-skin="backoffice"][data-theme="dark"] [data-route-outlet] :where(.cx-btn-ghost, .cx-btn--ghost, .cx-btn--secondary),
  html[data-ui-skin="backoffice"][data-theme="dark"] [data-route-outlet] :where(.cx-pagination, .cx-smart-detail-pagination, .cx-table-pager) {
    background: #1b1427;
    color: #f2ebf8;
    border-color: rgba(235,220,247,.10);
  }
  html[data-ui-skin="backoffice"][data-theme="dark"] [data-route-outlet] :where(.cx-settings-tabs, .cx-catalog-tabs, .remaining-tabs, .cx-tab-bar, .cx-ops-tabs, .cx-local-tabs) {
    background: #21182e;
    border-color: rgba(235,220,247,.10);
  }

  @media (max-width: 760px) {
    html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header { border-radius: 15px; }
    html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-filter-panel, .cx-filter-bar, .cx-table-toolbar) { padding: .72rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    html[data-ui-skin="backoffice"] [data-route-outlet] :where(.cx-btn, .cx-card, .cx-kpi, .cx-local-tab) {
      transition-duration: 1ms !important;
      transform: none !important;
    }
  }
}

/* B-Design-Recovery-4.5 — Global Reports & Growth UI Contract
   Scope only: Reports/Growth analysis pages. Excludes POS, Call Center, Sales Log, Super Admin, Marketing. */
@layer features {
  .cx-ui-contract-scope {
    --cx-ui-contract-accent: var(--cx-brand-accent, var(--cx-brand, #7c3aed));
    --cx-ui-contract-soft: color-mix(in srgb, var(--cx-ui-contract-accent) 9%, var(--cx-surface-card, #fff));
    --cx-ui-contract-line: color-mix(in srgb, var(--cx-ui-contract-accent) 18%, var(--cx-border, #e5def6));
  }

  .cx-ui-contract-scope .cx-ui-kpi-grid {
    align-items: stretch;
    gap: clamp(.72rem, 1.1vw, 1rem) !important;
  }

  .cx-ui-contract-scope .cx-ui-kpi-card {
    position: relative;
    overflow: hidden;
    min-block-size: 92px;
    border: 1px solid color-mix(in srgb, var(--cx-sem-color, var(--cx-ui-contract-accent)) 18%, var(--cx-border, #e5def6)) !important;
    border-radius: clamp(13px, 1vw, 16px) !important;
    background:
      radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--cx-sem-color, var(--cx-ui-contract-accent)) 18%, transparent) 0 22px, transparent 24px),
      linear-gradient(135deg, color-mix(in srgb, var(--cx-sem-soft, var(--cx-brand-soft, #f1ecff)) 46%, transparent), transparent 58%),
      var(--cx-surface-card, #fff) !important;
    box-shadow: 0 7px 20px rgba(44,31,74,.055) !important;
    padding: clamp(.68rem, .8vw, .82rem) !important;
  }

  .cx-ui-contract-scope .cx-ui-kpi-card--compact { min-block-size: 82px; }
  .cx-ui-contract-scope .cx-ui-kpi-card--standard { min-block-size: 92px; }

  .cx-ui-contract-scope .cx-ui-kpi-card .cx-ui-kpi-glow {
    position: absolute;
    inset-block-start: .68rem;
    inset-inline-start: .68rem;
    inline-size: 1.65rem;
    block-size: 1.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cx-sem-color, var(--cx-ui-contract-accent)) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cx-sem-color, var(--cx-ui-contract-accent)) 22%, transparent);
    pointer-events: none;
  }

  .cx-ui-contract-scope .cx-ui-kpi-card .cx-kpi-head { min-block-size: 1.35rem; }
  .cx-ui-contract-scope .cx-ui-kpi-card .cx-kpi-label {
    color: var(--cx-text-soft, #655d7d) !important;
    font-size: .82rem !important;
    font-weight: 950 !important;
    letter-spacing: -.01em;
  }
  .cx-ui-contract-scope .cx-ui-kpi-card .cx-kpi-value,
  .cx-ui-contract-scope .cx-ui-kpi-card .cx-kpi-value * {
    font-size: clamp(1.18rem, 1.55vw, 1.75rem) !important;
    font-weight: 1000 !important;
    line-height: 1.12 !important;
    color: var(--cx-sem-color, var(--cx-text-main, #18112f)) !important;
    font-variant-numeric: tabular-nums;
  }
  .cx-ui-contract-scope .cx-ui-kpi-card .cx-help {
    display: block;
    margin-block-start: .18rem;
    color: var(--cx-text-soft, #655d7d) !important;
    font-size: .78rem !important;
    font-weight: 820;
  }

  .cx-ui-contract-scope .cx-ui-contract-table-wrap {
    direction: ltr !important;
    border-radius: 18px !important;
    border: 1px solid var(--cx-ui-contract-line) !important;
    background: var(--cx-surface-card, #fff) !important;
    box-shadow: 0 14px 34px rgba(44,31,74,.07) !important;
    /* The outer table contract must not own page-wheel scrolling.
       Horizontal overflow belongs to the inner .cx-table-scroll-region;
       leaving this wrapper visible keeps native vertical wheel chaining to
       the page when the pointer is over the table body. */
    overflow: visible !important;
    scrollbar-gutter: auto;
    overscroll-behavior: auto;
  }
  .cx-ui-contract-scope .cx-ui-contract-table {
    direction: rtl !important;
  }

  .cx-ui-contract-scope .cx-ui-table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-block-start: .62rem;
    padding: .58rem .7rem;
    border: 1px solid var(--cx-ui-contract-line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--cx-surface-card, #fff) 92%, var(--cx-ui-contract-soft));
    color: var(--cx-text-soft, #655d7d);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  }
  .cx-ui-contract-scope .cx-ui-table-pager-info {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    flex-wrap: wrap;
    font-size: .8rem;
    font-weight: 900;
  }
  .cx-ui-contract-scope .cx-ui-table-pager-info strong { color: var(--cx-text-main, #18112f); font-weight: 1000; }
  .cx-ui-contract-scope .cx-ui-table-pager-info small { opacity: .72; }
  .cx-ui-contract-scope .cx-ui-table-page-size {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    white-space: nowrap;
    font-size: .8rem;
    font-weight: 900;
  }
  .cx-ui-contract-scope .cx-ui-table-page-size select {
    inline-size: auto;
    min-inline-size: 58px;
    max-inline-size: 72px;
    min-block-size: 2rem;
    border: 1px solid color-mix(in srgb, var(--cx-ui-contract-accent) 24%, var(--cx-border, #e5def6));
    border-radius: 999px;
    background: var(--cx-surface-card, #fff);
    color: var(--cx-text-main, #18112f);
    font-weight: 1000;
    text-align: center;
  }
  .cx-ui-contract-scope .cx-ui-table-pager-actions {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
  }
  .cx-ui-contract-scope .cx-ui-table-page-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2rem;
    padding: .28rem .64rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cx-ui-contract-accent) 12%, var(--cx-surface-card, #fff));
    color: color-mix(in srgb, var(--cx-ui-contract-accent) 78%, var(--cx-text-main, #18112f));
    font-size: .8rem;
    font-weight: 1000;
  }

  @media (max-width: 760px) {
    .cx-ui-contract-scope .cx-ui-table-pager { align-items: stretch; flex-direction: column; }
    .cx-ui-contract-scope .cx-ui-table-page-size { justify-content: space-between; }
  }
}

/* Costix UI Lab composition contract — 2026-10-05
   Visual source of truth: Costix UI Lab.
   Functional source of truth: production route owners.
   Scope is deliberately limited to the backoffice route outlet. Protected POS / Call Center / Sales Log
   keep their dedicated layouts even though the global shell remains shared. */
@layer features {
  [data-route-outlet][data-ui-skin="backoffice"] {
    --cx-lab-card-radius: 18px;
    --cx-lab-control-radius: 10px;
    --cx-lab-gap: clamp(12px, 1.15vw, 18px);
    --cx-lab-card-border: color-mix(in srgb, var(--cx-brand) 13%, var(--cx-border-soft));
    --cx-lab-card-shadow: 0 8px 24px rgba(31, 21, 39, .055);
    --cx-lab-card-shadow-hover: 0 14px 34px rgba(31, 21, 39, .085);
    --cx-lab-soft: color-mix(in srgb, var(--cx-brand-soft) 36%, var(--cx-surface-card));
    --cx-lab-soft-strong: color-mix(in srgb, var(--cx-brand-soft) 56%, var(--cx-surface-card));
    display: grid;
    gap: var(--cx-lab-gap);
    align-content: start;
    min-width: 0;
    width: 100%;
  }

  /* Page composition — UI Lab page heads are light, compact and action-first, not hero cards. */
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-page-head {
    min-height: 0;
    margin: 0 0 2px;
    padding: 2px 2px 10px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--cx-brand) 9%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow: visible;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-page-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-page-head h1 {
    margin: 0;
    color: var(--cx-text-main);
    font-size: clamp(1.28rem, 1.55vw, 1.62rem);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.2;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-page-head .cx-page-eyebrow {
    color: var(--cx-brand-strong);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-page-head .cx-help {
    margin: 1px 0 0;
    max-width: 780px;
    color: var(--cx-text-soft);
    font-size: .77rem;
    line-height: 1.55;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-page-actions {
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-page-actions .cx-status-pill {
    min-height: 30px;
    padding-inline: 10px;
    border-radius: 999px;
    font-size: .72rem;
  }

  /* Shared KPI language — compact executive cards from the Lab. */
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-grid {
    gap: 12px;
    margin-block: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card {
    position: relative;
    min-height: 126px;
    padding: 15px 16px 14px;
    border: 1px solid var(--cx-lab-card-border);
    border-radius: 16px;
    background: var(--cx-surface-card);
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    transition: transform var(--cx-transition), border-color var(--cx-transition), box-shadow var(--cx-transition);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--cx-brand-accent);
    opacity: .7;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card[data-semantic="revenue"]::before { background: var(--cx-sem-revenue); }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card[data-semantic="profit"]::before { background: var(--cx-sem-profit); }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card[data-semantic="loss"],
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card[data-semantic="danger"] { border-color: color-mix(in srgb, var(--cx-danger) 25%, var(--cx-lab-card-border)); }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card[data-semantic="loss"]::before,
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card[data-semantic="danger"]::before { background: var(--cx-danger); }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--cx-brand) 23%, var(--cx-border-soft));
    box-shadow: var(--cx-lab-card-shadow-hover);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card .cx-kpi-label {
    color: var(--cx-text-soft);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.35;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card .cx-kpi-icon {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--cx-brand-strong);
    background: var(--cx-lab-soft);
    border: 1px solid color-mix(in srgb, var(--cx-brand) 11%, var(--cx-border-soft));
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card .cx-kpi-value {
    color: var(--cx-text-strong);
    font-size: clamp(1.32rem, 1.6vw, 1.85rem);
    font-weight: 920;
    letter-spacing: -.035em;
    line-height: 1.1;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-card > .cx-help {
    margin-top: auto;
    color: var(--cx-text-soft);
    font-size: .7rem;
    line-height: 1.45;
  }

  /* Core content surfaces. */
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-section,
  [data-route-outlet][data-ui-skin="backoffice"] :is(.inventory-page-card,.inventory-insight-card,.cx-mini-card,.cx-ops-table-card,.cx-settings-form-section) {
    border: 1px solid var(--cx-lab-card-border);
    border-radius: var(--cx-lab-card-radius);
    background: var(--cx-surface-card);
    box-shadow: var(--cx-lab-card-shadow);
    overflow: clip;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-section-head {
    min-height: 62px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--cx-brand) 8%, var(--cx-border-soft));
    background: var(--cx-surface-card);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-section-head h2 {
    margin: 0;
    color: var(--cx-text-main);
    font-size: .94rem;
    font-weight: 900;
    letter-spacing: -.015em;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-section-head .cx-help {
    margin: 4px 0 0;
    color: var(--cx-text-soft);
    font-size: .72rem;
    line-height: 1.5;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-section-body {
    padding: 15px 16px 16px;
    background: var(--cx-surface-card);
  }

  /* Filters: keep the production Scope contract, present it like the Lab filter rail. */
  [data-route-outlet][data-ui-skin="backoffice"] .cx-scope-filter-card.cx-scope-rail-host,
  [data-route-outlet][data-ui-skin="protected"] .cx-scope-filter-card.cx-scope-rail-host {
    margin: 0;
    padding: 0;
    border: 1px solid var(--cx-lab-card-border);
    border-radius: 14px;
    background: var(--cx-surface-card);
    box-shadow: none;
    overflow: visible;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-scope-rail-host .cx-scope-rail-toolbar,
  [data-route-outlet][data-ui-skin="protected"] .cx-scope-rail-host .cx-scope-rail-toolbar {
    min-height: 50px;
    padding: 8px 10px 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-scope-rail-toolbar > span,
  [data-route-outlet][data-ui-skin="protected"] .cx-scope-rail-toolbar > span {
    min-width: 0;
    color: var(--cx-text-soft);
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-scope-rail-toolbar [data-scope-rail-open],
  [data-route-outlet][data-ui-skin="protected"] .cx-scope-rail-toolbar [data-scope-rail-open] {
    min-height: 34px;
    border-color: color-mix(in srgb, var(--cx-brand) 15%, var(--cx-border-soft));
    background: var(--cx-lab-soft);
    color: var(--cx-brand-strong);
    font-weight: 900;
  }
  html[data-ui-skin="backoffice"] dialog.cx-scope-rail,
  html[data-ui-skin="protected"] dialog.cx-scope-rail {
    width: min(410px, 94vw);
    border-inline-start: 1px solid var(--cx-border-soft);
    box-shadow: 24px 0 70px rgba(25, 21, 31, .16);
  }
  html[data-ui-skin="backoffice"] dialog.cx-scope-rail .cx-scope-rail-header,
  html[data-ui-skin="protected"] dialog.cx-scope-rail .cx-scope-rail-header {
    padding: 17px 18px 14px;
    background: var(--cx-surface-card);
  }
  html[data-ui-skin="backoffice"] dialog.cx-scope-rail .cx-scope-filter-fields,
  html[data-ui-skin="protected"] dialog.cx-scope-rail .cx-scope-filter-fields {
    gap: 10px;
    padding: 16px 18px;
  }

  /* Global primary page tabs — canonical line-tab contract.
     Rich catalog tabs and scope/status switchers keep their specialized contracts. */
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-settings-tabs,.remaining-tabs,.cx-tab-bar,.cx-ops-tabs) {
    width:100%;
    max-width:100%;
    margin:0;
    padding:0 4px;
    border:0;
    border-bottom:1px solid color-mix(in srgb, var(--cx-brand) 12%, var(--cx-border-soft));
    border-radius:0;
    background:transparent;
    box-shadow:none;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:6px 4px;
    overflow:visible;
    scroll-snap-type:none;
    scrollbar-width:none;
    white-space:normal;
    overscroll-behavior-inline:contain;
  }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-settings-tabs,.remaining-tabs,.cx-tab-bar,.cx-ops-tabs)::-webkit-scrollbar { display:none; }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-settings-tab,.remaining-tab,.cx-tab-btn,.cx-ops-tabs .cx-tab) {
    position:relative;
    flex:0 1 auto;
    scroll-snap-align:start;
    display:inline-flex;
    align-items:center;
    gap:.52rem;
    min-height:44px;
    max-width:100%;
    padding:9px 14px 10px;
    border:0;
    border-radius:14px 14px 0 0;
    background:transparent;
    box-shadow:none;
    color:var(--cx-text-soft);
    font:inherit;
    font-size:.79rem;
    font-weight:840;
    line-height:1.35;
    white-space:nowrap;
    cursor:pointer;
    transition:color var(--cx-transition), background var(--cx-transition), transform var(--cx-transition), box-shadow var(--cx-transition);
  }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-settings-tab,.remaining-tab,.cx-tab-btn,.cx-ops-tabs .cx-tab)::before {
    content:"";
    flex:0 0 auto;
    width:1.2rem;
    height:1.2rem;
    border-radius:10px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--cx-brand-soft) 86%, white), color-mix(in srgb, var(--cx-brand-soft) 48%, transparent));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cx-brand-accent) 18%, transparent);
  }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-settings-tab,.remaining-tab,.cx-tab-btn,.cx-ops-tabs .cx-tab)::after {
    content:"";
    position:absolute;
    inset-inline:14px;
    bottom:-1px;
    height:3px;
    border-radius:999px;
    background:transparent;
    transform:scaleX(.55);
    opacity:0;
    transition:transform var(--cx-transition), opacity var(--cx-transition), background var(--cx-transition);
  }
  [data-route-outlet][data-ui-skin="backoffice"] :is(
    .cx-settings-tab[aria-selected="true"],
    .cx-settings-tab.is-active,
    .remaining-tab.is-active,
    .remaining-tab[aria-selected="true"],
    .cx-tab-btn.is-active,
    .cx-tab-btn[aria-selected="true"],
    .cx-ops-tabs .cx-tab.is-active,
    .cx-ops-tabs .cx-tab[aria-selected="true"]
  ) {
    color:var(--cx-brand-strong);
    background:linear-gradient(180deg, color-mix(in srgb, var(--cx-brand-soft) 18%, transparent), color-mix(in srgb, var(--cx-brand-soft) 48%, transparent));
    font-weight:950;
  }
  [data-route-outlet][data-ui-skin="backoffice"] :is(
    .cx-settings-tab[aria-selected="true"],
    .cx-settings-tab.is-active,
    .remaining-tab.is-active,
    .remaining-tab[aria-selected="true"],
    .cx-tab-btn.is-active,
    .cx-tab-btn[aria-selected="true"],
    .cx-ops-tabs .cx-tab.is-active,
    .cx-ops-tabs .cx-tab[aria-selected="true"]
  )::after {
    background:linear-gradient(90deg, var(--cx-brand-strong), var(--cx-brand-accent));
    transform:scaleX(1);
    opacity:1;
  }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-settings-tab,.remaining-tab,.cx-tab-btn,.cx-ops-tabs .cx-tab):hover {
    color:var(--cx-text-main);
    background:color-mix(in srgb, var(--cx-brand-soft) 24%, transparent);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-settings-tab:not(.is-active):not([aria-selected="true"])::after,
  [data-route-outlet][data-ui-skin="backoffice"] .remaining-tab:not(.is-active):not([aria-selected="true"])::after,
  [data-route-outlet][data-ui-skin="backoffice"] .cx-tab-btn:not(.is-active):not([aria-selected="true"])::after,
  [data-route-outlet][data-ui-skin="backoffice"] .cx-ops-tabs .cx-tab:not(.is-active):not([aria-selected="true"])::after {
    opacity:0 !important;
    transform:scaleX(.5) !important;
    background:transparent !important;
  }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-settings-tab,.remaining-tab,.cx-tab-btn,.cx-ops-tabs .cx-tab):focus-visible {
    outline:2px solid color-mix(in srgb, var(--cx-brand-accent) 44%, transparent);
    outline-offset:-2px;
  }

  @media (max-width: 920px) {
    [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-settings-tabs,.remaining-tabs,.cx-tab-bar,.cx-ops-tabs) {
      flex-wrap:nowrap;
      overflow-x:auto;
      white-space:nowrap;
      scroll-snap-type:x proximity;
      gap:4px;
    }
    [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-settings-tab,.remaining-tab,.cx-tab-btn,.cx-ops-tabs .cx-tab) {
      flex:0 0 auto;
    }
  }

  /* Forms and action bars keep one rhythm across Settings, Operations, Inventory and Growth pages. */
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-filter-bar,.cx-catalog-filter-row,.cx-settings-toolbar,.cx-ops-toolbar,.cx-form-grid,.cx-settings-form-grid) {
    gap: 10px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-input,.cx-select,.cx-textarea,.cx-branch-trigger) {
    border-radius: var(--cx-lab-control-radius);
    border-color: color-mix(in srgb, var(--cx-brand) 13%, var(--cx-border-soft));
    background: var(--cx-surface-card);
  }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-input,.cx-select,.cx-branch-trigger) { min-height: 40px; }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-label,
  [data-route-outlet][data-ui-skin="backoffice"] .cx-scope-field-label {
    color: var(--cx-text-soft);
    font-size: .69rem;
    font-weight: 850;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-actions-row { gap: 7px; }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-btn,.cx-btn-primary,.cx-btn-ghost,.cx-btn-secondary) {
    border-radius: 10px;
  }

  /* Catalog & Production — retain real actions, compose them like the Lab workbenches. */
  [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-tabs {
    margin-block: 0 2px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-tab {
    min-width: 150px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-tab small {
    display: block;
    margin-top: 2px;
    color: var(--cx-text-soft);
    font-size: .62rem;
    font-weight: 650;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-command-grid {
    display: grid;
    grid-template-columns: minmax(230px, .62fr) minmax(0, 2.15fr);
    gap: 14px;
    align-items: start;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-side {
    position: sticky;
    top: 8px;
    max-height: min(72vh, 760px);
    overflow: auto;
    border-radius: 16px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-category-list { display: grid; gap: 6px; }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-category {
    min-height: 54px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    transition: background var(--cx-transition), border-color var(--cx-transition), transform var(--cx-transition);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-category:hover {
    background: var(--cx-lab-soft);
    border-color: color-mix(in srgb, var(--cx-brand) 12%, var(--cx-border-soft));
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-category.is-active {
    color: var(--cx-brand-strong);
    background: var(--cx-lab-soft-strong);
    border-color: color-mix(in srgb, var(--cx-brand) 22%, var(--cx-border-soft));
    box-shadow: inset -3px 0 0 var(--cx-brand-accent);
  }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-menu-health-tabs,.production-health-tabs,.cx-quick-filter-row) {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  /* Inventory — dense operations pages use the same KPI/card/table language, with a stronger command layer. */
  [data-route-outlet][data-ui-skin="backoffice"] .inventory-page-card {
    margin-block: 0;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .inventory-command-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .inventory-command-tile {
    min-height: 86px;
    padding: 13px 14px;
    border: 1px solid var(--cx-lab-card-border);
    border-radius: 14px;
    background: var(--cx-surface-card);
    box-shadow: none;
    transition: transform var(--cx-transition), border-color var(--cx-transition), box-shadow var(--cx-transition);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .inventory-command-tile:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--cx-sem-inventory) 28%, var(--cx-border-soft));
    box-shadow: var(--cx-lab-card-shadow);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .inventory-insight-card {
    padding: 0;
  }

  /* Reports / financial centres — executive summary first, tabs second, detail tables last. */
  [data-route-outlet][data-ui-skin="backoffice"] :is(.reports-page,.financial-center-page,.cost-control-page) {
    display: grid;
    gap: 14px;
    min-width: 0;
  }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.reports-alert-grid,.reports-decision-grid) {
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(min(270px,100%), 1fr));
  }


  /* Existing functional cards are normalized inside Backoffice only. This is the canonical
     visual surface for pages that predate pageSection(), while POS/CC/Sales Log remain protected. */
  [data-route-outlet][data-ui-skin="backoffice"] .cx-page-root,
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-settings-page,.cx-catalog-main,.cx-inventory-page,.reports-page,.cost-control-page,.financial-center-page) {
    display: grid;
    gap: var(--cx-lab-gap);
    min-width: 0;
    align-content: start;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-card:not(.cx-kpi):not(.cx-lab-kpi-card) {
    border-color: var(--cx-lab-card-border);
    border-radius: var(--cx-lab-card-radius);
    background: var(--cx-surface-card);
    box-shadow: var(--cx-lab-card-shadow);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-card:not(.cx-kpi) > .cx-card-header {
    min-height: 58px;
    padding: 13px 16px;
    border-bottom-color: color-mix(in srgb, var(--cx-brand) 8%, var(--cx-border-soft));
    background: var(--cx-surface-card);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-card:not(.cx-kpi) > .cx-card-header h2,
  [data-route-outlet][data-ui-skin="backoffice"] .cx-card:not(.cx-kpi) > .cx-card-header h3 {
    margin: 0;
    color: var(--cx-text-main);
    font-size: .94rem;
    font-weight: 900;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-card:not(.cx-kpi) > .cx-card-body {
    padding: 15px 16px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-section-gap { margin-block: 0; }
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-mini-card,.cx-settings-summary-strip,.cx-ops-branch-bar) {
    border-color: var(--cx-lab-card-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--cx-lab-soft) 35%, var(--cx-surface-card));
    box-shadow: none;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-remaining-body {
    display: grid;
    gap: 14px;
    min-width: 0;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-remaining-body > :first-child { margin-top: 0; }

  /* Dedicated route owners that predate actionHeader() opt into the same Lab header geometry. */
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-settings-top,.cx-services-taxes-head,.cx-ops-page-header,.cx-settings-hero).cx-lab-page-head {
    margin-bottom: 0;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-settings-summary-strip {
    min-height: 48px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-ops-branch-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-ops-branch-grid .cx-mini-card {
    min-height: 82px;
    padding: 12px 13px;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-local-tab-content,
  [data-route-outlet][data-ui-skin="backoffice"] .cx-settings-panel,
  [data-route-outlet][data-ui-skin="backoffice"] .cx-ops-panels {
    display: grid;
    gap: 14px;
    min-width: 0;
  }

  /* Settings / operations / remaining pages inherit the same card and tab system. */
  [data-route-outlet][data-ui-skin="backoffice"] .cx-settings-page,
  [data-route-outlet][data-ui-skin="backoffice"] :is(.cx-ops-pane,.cx-ops-panels,.cx-remaining-page) {
    min-width: 0;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-settings-stat {
    min-height: 90px;
    padding: 13px 14px;
    border: 1px solid var(--cx-lab-card-border);
    border-radius: 14px;
    background: var(--cx-surface-card);
    box-shadow: none;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-settings-form-section {
    overflow: visible;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-remaining-header {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--cx-border-soft);
    background: transparent;
    box-shadow: none;
  }

  /* Active dashboard bottom spacing. */
  .cx-shell[data-active-route="home"] [data-route-outlet][data-ui-skin="backoffice"] .cx-dashboard-bottom {
    gap: 14px;
  }

  @media (max-width: 1380px) {
    [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-command-grid { grid-template-columns: minmax(210px,.55fr) minmax(0,1.8fr); }
  }
  @media (max-width: 1080px) {
    [data-route-outlet][data-ui-skin="backoffice"] .cx-ops-branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-page-head { align-items: flex-start; }
    [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-command-grid { grid-template-columns: 1fr; }
    [data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-side { position: static; max-height: none; }
  }
  @media (max-width: 760px) {
    [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-page-head { flex-direction: column; }
    [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-page-actions { width: 100%; flex-wrap: wrap; }
    [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 520px) {
    [data-route-outlet][data-ui-skin="backoffice"] .cx-ops-branch-grid { grid-template-columns: 1fr; }
    [data-route-outlet][data-ui-skin="backoffice"] .cx-lab-kpi-grid { grid-template-columns: 1fr; }
  }
}

/* Backoffice Lab Composition — canonical page composition parity.
   This is the shared visual contract for dashboard/report/catalog/production-style pages. */
@layer components {
  [data-route-outlet][data-ui-skin="backoffice"] .overview-dashboard { display:flex; flex-direction:column; gap:16px; }
  [data-route-outlet][data-ui-skin="backoffice"] .overview-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  [data-route-outlet][data-ui-skin="backoffice"] .overview-kpi {
    min-width:0; padding:15px; border:1px solid var(--cx-border-soft); border-radius:14px; background:var(--cx-surface-card); box-shadow:none;
    transition:transform var(--cx-transition), border-color var(--cx-transition), box-shadow var(--cx-transition);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .overview-kpi[tabindex],
  [data-route-outlet][data-ui-skin="backoffice"] .overview-kpi[data-report-drilldown] { cursor:pointer; }
  [data-route-outlet][data-ui-skin="backoffice"] .overview-kpi:hover { transform:translateY(-1px); border-color:var(--cx-border-strong); box-shadow:var(--cx-shadow-soft); }
  [data-route-outlet][data-ui-skin="backoffice"] .overview-kpi > span,
  [data-route-outlet][data-ui-skin="backoffice"] .overview-kpi > small { display:block; color:var(--cx-text-soft); font-size:.68rem; }
  [data-route-outlet][data-ui-skin="backoffice"] .overview-kpi > strong { display:block; margin:10px 0 7px; color:var(--cx-text-strong); font-size:clamp(1.35rem,2vw,1.75rem); font-weight:900; letter-spacing:-.035em; }
  [data-route-outlet][data-ui-skin="backoffice"] .overview-feature-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr); gap:14px; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-overview-card { padding:18px; border:1px solid var(--cx-border-soft); border-radius:16px; background:var(--cx-surface-card); box-shadow:none; overflow:hidden; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:15px; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-card-head strong { display:block; font-size:.92rem; font-weight:900; color:var(--cx-text-main); }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-card-head small { display:block; margin-top:4px; color:var(--cx-text-soft); font-size:.69rem; line-height:1.55; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-section-link { border:0; background:transparent; padding:0; color:var(--cx-brand-strong); font-size:.7rem; font-weight:850; cursor:pointer; white-space:nowrap; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-sparkline { height:190px; display:flex; align-items:end; gap:8px; padding-top:28px; position:relative; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-sparkline::before,
  [data-route-outlet][data-ui-skin="backoffice"] .lab-sparkline::after { content:""; position:absolute; inset-inline:0; border-top:1px dashed var(--cx-border-soft); pointer-events:none; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-sparkline::before { top:36%; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-sparkline::after { top:68%; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-sparkbar { flex:1; min-width:12px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; border:0; background:transparent; padding:0; color:var(--cx-text-soft); cursor:pointer; position:relative; z-index:1; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-sparkbar i { display:block; width:100%; height:var(--bar-height,8%); min-height:8px; border-radius:6px 6px 2px 2px; background:color-mix(in srgb,var(--cx-brand-strong) 82%,var(--cx-brand-accent)); transition:height var(--cx-transition), transform var(--cx-transition); }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-sparkbar:hover i { transform:translateY(-2px); background:var(--cx-brand-accent); }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-sparkbar span { font-size:.62rem; text-align:center; white-space:nowrap; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-mix-list { display:grid; gap:15px; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-mix-item { display:grid; grid-template-columns:8px 1fr 42px; gap:10px; align-items:center; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-mix-dot { width:7px; height:7px; border-radius:50%; background:var(--cx-brand-accent); }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-mix-item strong { font-size:.75rem; color:var(--cx-text-main); }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-mix-item b { font-size:.78rem; text-align:end; color:var(--cx-text-main); }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-progress-track { height:6px; margin-top:6px; border-radius:999px; overflow:hidden; background:var(--cx-surface-muted); }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-progress-track i { display:block; height:100%; border-radius:inherit; background:var(--cx-brand-strong); }
  [data-route-outlet][data-ui-skin="backoffice"] .source-footnote { margin-top:14px; padding-top:10px; border-top:1px solid var(--cx-border-soft); color:var(--cx-text-soft); font-size:.66rem; line-height:1.6; }
  [data-route-outlet][data-ui-skin="backoffice"] .overview-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
  [data-route-outlet][data-ui-skin="backoffice"] .insight-link-card { min-width:0; border:1px solid var(--cx-border-soft); border-radius:12px; background:var(--cx-surface-card); padding:12px; display:grid; grid-template-columns:1fr auto; grid-template-areas:"label arrow" "value arrow"; gap:4px 10px; text-align:start; color:var(--cx-text-main); cursor:pointer; transition:transform var(--cx-transition),border-color var(--cx-transition),box-shadow var(--cx-transition); }
  [data-route-outlet][data-ui-skin="backoffice"] .insight-link-card:hover { transform:translateY(-1px); border-color:var(--cx-border-strong); box-shadow:var(--cx-shadow-soft); }
  [data-route-outlet][data-ui-skin="backoffice"] .insight-link-card > span { grid-area:label; color:var(--cx-text-soft); font-size:.65rem; }
  [data-route-outlet][data-ui-skin="backoffice"] .insight-link-card > strong { grid-area:value; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  [data-route-outlet][data-ui-skin="backoffice"] .insight-link-card > i { grid-area:arrow; align-self:center; color:var(--cx-brand-strong); font-style:normal; font-size:1rem; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-premium-table-card .cx-table-wrap { margin:0; }

  /* Dashboard composition parity with UI Lab. */
  [data-route-outlet][data-ui-skin="backoffice"] .executive-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
  [data-route-outlet][data-ui-skin="backoffice"] .executive-kpi-card { min-height:132px; padding:16px; border:1px solid var(--cx-border-soft); border-radius:16px; background:var(--cx-surface-card); display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
  [data-route-outlet][data-ui-skin="backoffice"] .executive-kpi-card::before { content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; background:var(--cx-brand-accent); opacity:.78; }
  [data-route-outlet][data-ui-skin="backoffice"] .executive-kpi-card span { color:var(--cx-text-soft); font-size:.72rem; font-weight:750; }
  [data-route-outlet][data-ui-skin="backoffice"] .executive-kpi-card strong { display:block; margin-top:16px; color:var(--cx-text-strong); font-size:clamp(1.35rem,2vw,1.8rem); font-weight:900; letter-spacing:-.04em; }
  [data-route-outlet][data-ui-skin="backoffice"] .executive-kpi-card small { display:block; margin-top:8px; color:var(--cx-text-soft); font-size:.65rem; }
  [data-route-outlet][data-ui-skin="backoffice"] .executive-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.7fr); gap:20px; margin-bottom:20px; align-items:stretch; }
  [data-route-outlet][data-ui-skin="backoffice"] .executive-layout > * { min-width:0; }
  [data-route-outlet][data-ui-skin="backoffice"] .operations-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
  [data-route-outlet][data-ui-skin="backoffice"] .operations-grid > * { min-width:0; }

  /* Filter rail: compact fixed launcher, matching the Lab behavior instead of a full-width card. */
  [data-route-outlet][data-ui-skin="backoffice"] .cx-scope-filter-card.cx-scope-rail-host,
  [data-route-outlet][data-ui-skin="protected"] .cx-scope-filter-card.cx-scope-rail-host {
    position:fixed; left:8px; top:calc(var(--cx-topbar-height,72px) + 110px); z-index:var(--cx-z-popover,500); width:auto; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-scope-rail-host .cx-scope-rail-toolbar,
  [data-route-outlet][data-ui-skin="protected"] .cx-scope-rail-host .cx-scope-rail-toolbar { min-height:0; padding:0; display:block; }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-scope-rail-toolbar > span,
  [data-route-outlet][data-ui-skin="protected"] .cx-scope-rail-toolbar > span { display:none; }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-scope-rail-toolbar [data-scope-rail-open],
  [data-route-outlet][data-ui-skin="protected"] .cx-scope-rail-toolbar [data-scope-rail-open] {
    width:42px; min-width:42px; height:92px; min-height:92px; padding:8px 6px; border:1px solid var(--cx-border-soft); border-inline-start:0; border-radius:0 12px 12px 0; background:var(--cx-surface-card); box-shadow:var(--cx-shadow-soft); color:var(--cx-brand-strong); writing-mode:vertical-rl; text-orientation:mixed; font-size:.7rem; font-weight:900;
  }

  @media (max-width:1380px) {
    [data-route-outlet][data-ui-skin="backoffice"] .overview-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    [data-route-outlet][data-ui-skin="backoffice"] .overview-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
    [data-route-outlet][data-ui-skin="backoffice"] .executive-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
    [data-route-outlet][data-ui-skin="backoffice"] .operations-grid { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:1120px) {
    [data-route-outlet][data-ui-skin="backoffice"] .overview-feature-grid,
    [data-route-outlet][data-ui-skin="backoffice"] .executive-layout { grid-template-columns:1fr; }
  }
  @media (max-width:820px) {
    [data-route-outlet][data-ui-skin="backoffice"] .overview-kpis,
    [data-route-outlet][data-ui-skin="backoffice"] .overview-links,
    [data-route-outlet][data-ui-skin="backoffice"] .executive-kpis,
    [data-route-outlet][data-ui-skin="backoffice"] .operations-grid { grid-template-columns:1fr; }
    [data-route-outlet][data-ui-skin="backoffice"] .cx-scope-filter-card.cx-scope-rail-host,
    [data-route-outlet][data-ui-skin="protected"] .cx-scope-filter-card.cx-scope-rail-host { left:4px; }
  }
}

@layer components {
  [data-route-outlet][data-ui-skin="backoffice"] .lab-executive-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:14px; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-executive-head > div:first-child > span { display:inline-flex; align-items:center; gap:7px; color:var(--cx-brand-strong); font-size:.68rem; font-weight:900; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-executive-head > div:first-child > span::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cx-brand-accent); }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-executive-head h1 { margin:7px 0 0; font-size:clamp(1.4rem,2.2vw,2rem); line-height:1.2; color:var(--cx-text-strong); letter-spacing:-.035em; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-executive-context { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-executive-context em { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid var(--cx-border-soft); border-radius:999px; background:var(--cx-surface-card); color:var(--cx-text-soft); font-size:.66rem; font-style:normal; }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-executive-context strong { color:var(--cx-text-main); }
  [data-route-outlet][data-ui-skin="backoffice"] .lab-page-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-card { min-width:0; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-chart { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(58px,1fr); grid-template-rows:1fr; gap:8px; align-items:end; width:100%; height:250px; min-height:0; overflow-x:auto; overflow-y:hidden; padding:22px 2px 4px; position:relative; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-chart::before,
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-chart::after { content:""; position:absolute; inset-inline:0; border-top:1px dashed var(--cx-border-soft); pointer-events:none; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-chart::before { top:34%; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-chart::after { top:64%; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-column { min-width:52px; display:grid; grid-template-rows:22px 160px 20px 17px; gap:4px; align-items:end; padding:0 2px; border:0; border-radius:9px; background:transparent; color:var(--cx-text-main); cursor:pointer; position:relative; z-index:1; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-column:hover { background:var(--cx-surface-page-soft); }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-column > span { font-size:.62rem; color:var(--cx-text-soft); text-align:center; align-self:center; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-column > i { display:block; width:100%; height:var(--hour-height,8%); min-height:8px; align-self:end; border-radius:5px 5px 1px 1px; background:var(--cx-brand-strong); transition:height var(--cx-transition),background var(--cx-transition); }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-column:hover > i { background:var(--cx-brand-accent); }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-column > b { font-size:.64rem; text-align:center; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-column > small { font-size:.55rem; color:var(--cx-text-soft); text-align:center; white-space:nowrap; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-profit-pulse { min-height:100%; padding:18px; border-radius:16px; background:linear-gradient(145deg,var(--cx-brand-primary),color-mix(in srgb,var(--cx-brand-secondary) 82%,#12051f)); color:#fff; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; box-shadow:var(--cx-shadow-card); }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-profit-pulse::after { content:""; position:absolute; width:230px; height:230px; inset-inline-end:-90px; bottom:-110px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--cx-brand-accent) 28%,transparent),transparent 68%); pointer-events:none; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-profit-pulse .lab-card-head strong { color:#fff; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-profit-pulse .lab-card-head small { color:rgba(255,255,255,.66); }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-profit-main { margin-top:20px; position:relative; z-index:1; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-profit-main > strong { display:block; font-size:clamp(2rem,3vw,3rem); font-weight:900; letter-spacing:-.045em; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-profit-main > span { display:block; margin-top:7px; color:rgba(255,255,255,.7); font-size:.72rem; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-profit-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px; position:relative; z-index:1; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-profit-stats > div { padding:11px; border:1px solid rgba(255,255,255,.1); border-radius:11px; background:rgba(255,255,255,.055); }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-profit-stats span { display:block; color:rgba(255,255,255,.62); font-size:.62rem; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-profit-stats strong { display:block; margin-top:5px; font-size:.88rem; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-operation-card { min-height:210px; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-mini-alerts { display:grid; gap:8px; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-mini-alerts button { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--cx-border-soft); border-radius:11px; background:var(--cx-surface-page-soft); color:var(--cx-text-main); cursor:pointer; text-align:start; }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-mini-alerts span { font-size:.68rem; color:var(--cx-text-soft); }
  [data-route-outlet][data-ui-skin="backoffice"] .dashboard-mini-alerts strong { font-size:.82rem; }
  @media(max-width:820px){
    [data-route-outlet][data-ui-skin="backoffice"] .lab-executive-head { flex-direction:column; }
    [data-route-outlet][data-ui-skin="backoffice"] .dashboard-hourly-chart { grid-auto-columns:60px; }
  }
}

/* Backoffice Lab Composition — Cost Control */
[data-route-outlet][data-ui-skin="backoffice"] .decision-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0 0 18px;
}
[data-route-outlet][data-ui-skin="backoffice"] .decision-card{
  border:1px solid var(--cx-border,#e5e7eb);
  background:var(--cx-surface,#fff);
  color:var(--cx-text,#111827);
  border-radius:14px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  text-align:start;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(35,14,109,.04);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
[data-route-outlet][data-ui-skin="backoffice"] .decision-card:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--cx-primary,#6d28d9) 36%,var(--cx-border,#e5e7eb));
  box-shadow:0 12px 28px rgba(35,14,109,.08);
}
[data-route-outlet][data-ui-skin="backoffice"] .decision-card>div{min-width:0;}
[data-route-outlet][data-ui-skin="backoffice"] .decision-card span:first-child{
  display:block;
  color:var(--cx-muted,#6b7280);
  font-size:.74rem;
  font-weight:750;
}
[data-route-outlet][data-ui-skin="backoffice"] .decision-card strong{
  display:block;
  margin-top:5px;
  font-size:1.12rem;
  font-weight:950;
  color:var(--cx-text,#111827);
}
[data-route-outlet][data-ui-skin="backoffice"] .decision-card small{
  display:block;
  margin-top:5px;
  color:var(--cx-muted,#6b7280);
  font-size:.72rem;
  line-height:1.55;
}
[data-route-outlet][data-ui-skin="backoffice"] .cx-grid.two-equal{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-analysis-grid{margin-bottom:18px;}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-metric-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid color-mix(in srgb,var(--cx-border,#e5e7eb) 72%,transparent);
}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-metric-line:last-child{border-bottom:0;}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-metric-line strong{display:block;font-size:.84rem;font-weight:900;}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-metric-line small{display:block;margin-top:4px;font-size:.72rem;color:var(--cx-muted,#6b7280);}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-control-list{display:grid;gap:8px;}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-control-list>div{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:42px;padding:0 11px;border:1px solid var(--cx-border,#e5e7eb);border-radius:10px;background:var(--cx-surface-soft,#faf9fc);
}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-control-list span{color:var(--cx-muted,#6b7280);font-size:.74rem;}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-control-list strong{font-size:.82rem;font-weight:900;}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-advice{
  margin-top:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--cx-warning,#f59e0b) 30%,var(--cx-border,#e5e7eb));
  border-radius:12px;background:color-mix(in srgb,var(--cx-warning,#f59e0b) 7%,var(--cx-surface,#fff));
}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-advice strong{font-size:.8rem;}
[data-route-outlet][data-ui-skin="backoffice"] .cost-lab-advice p{margin:5px 0 0;color:var(--cx-muted,#6b7280);font-size:.74rem;line-height:1.6;}
@media(max-width:1380px){
  [data-route-outlet][data-ui-skin="backoffice"] .decision-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:900px){
  [data-route-outlet][data-ui-skin="backoffice"] .decision-grid,
  [data-route-outlet][data-ui-skin="backoffice"] .cx-grid.two-equal{grid-template-columns:1fr;}
}

/* Backoffice Lab Composition — Workbenches */
[data-route-outlet][data-ui-skin="backoffice"] .lab-workbench-page{
  display:grid;
  gap:16px;
  min-width:0;
}
[data-route-outlet][data-ui-skin="backoffice"] .lab-workbench-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  min-width:0;
  padding:4px 2px 2px;
}
[data-route-outlet][data-ui-skin="backoffice"] .lab-workbench-copy{min-width:0;}
[data-route-outlet][data-ui-skin="backoffice"] .lab-workbench-copy h1{
  margin:3px 0 0;
  color:var(--cx-text,#17131d);
  font-size:1.38rem;
  line-height:1.25;
  font-weight:950;
  letter-spacing:-.025em;
}
[data-route-outlet][data-ui-skin="backoffice"] .lab-workbench-copy p{
  margin:5px 0 0;
  max-width:760px;
  color:var(--cx-muted,#77707f);
  font-size:.78rem;
  line-height:1.65;
}
[data-route-outlet][data-ui-skin="backoffice"] .lab-workbench-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
[data-route-outlet][data-ui-skin="backoffice"] .catalog-health-kpis,
[data-route-outlet][data-ui-skin="backoffice"] .production-health-kpis{margin-bottom:0;}
[data-route-outlet][data-ui-skin="backoffice"] .menu-health-kpis{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  margin-bottom:2px;
}
[data-route-outlet][data-ui-skin="backoffice"] .menu-health-kpis .cx-kpi{
  min-height:108px;
  padding:14px;
  box-shadow:none!important;
  border-color:var(--cx-border,#e5e7eb)!important;
}
[data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-tabs{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  overflow:auto;
  gap:4px;
  padding:4px;
  border:1px solid var(--cx-border,#e5e7eb);
  border-radius:12px;
  background:var(--cx-surface-soft,#faf9fc);
}
[data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-tab{
  min-width:150px;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  box-shadow:none!important;
}
[data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-tab.is-active{
  background:var(--cx-surface,#fff)!important;
  color:var(--cx-primary,#6d28d9)!important;
  box-shadow:0 5px 15px rgba(35,14,109,.08)!important;
}
[data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-filter-row{
  padding:0!important;
  background:transparent!important;
}
[data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-page>.cx-card.cx-section-gap{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  margin:0!important;
}
[data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-page>.cx-card.cx-section-gap>.cx-card-body{padding:0!important;}
[data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-command-grid{
  gap:14px!important;
  align-items:start;
}
[data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-side,
[data-route-outlet][data-ui-skin="backoffice"] .cx-catalog-main>.cx-card{
  border-radius:14px!important;
  box-shadow:0 8px 24px rgba(35,14,109,.045)!important;
}
[data-route-outlet][data-ui-skin="backoffice"] .production-log-overview{gap:14px;}
[data-route-outlet][data-ui-skin="backoffice"] .production-log-table-card{overflow:visible;}
[data-route-outlet][data-ui-skin="backoffice"] .production-log-table-card>.production-tab-panel{min-width:0;}
[data-route-outlet][data-ui-skin="backoffice"] .production-log-table-card .production-tab-table-wrap{padding:0!important;}
[data-route-outlet][data-ui-skin="backoffice"] .production-ledger-tabs{
  display:inline-flex!important;
  width:max-content;
  max-width:100%;
  gap:4px!important;
  padding:4px!important;
  border:1px solid var(--cx-border,#e5e7eb)!important;
  border-radius:12px!important;
  background:var(--cx-surface-soft,#faf9fc)!important;
}
[data-route-outlet][data-ui-skin="backoffice"] .production-ledger-tab{
  min-height:36px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--cx-muted,#6b7280)!important;
  font-weight:850!important;
}
[data-route-outlet][data-ui-skin="backoffice"] .production-ledger-tab.is-active{
  background:var(--cx-surface,#fff)!important;
  color:var(--cx-primary,#6d28d9)!important;
  box-shadow:0 5px 15px rgba(35,14,109,.08)!important;
}
@media(max-width:1280px){
  [data-route-outlet][data-ui-skin="backoffice"] .menu-health-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media(max-width:860px){
  [data-route-outlet][data-ui-skin="backoffice"] .lab-workbench-head{align-items:flex-start;flex-direction:column;}
  [data-route-outlet][data-ui-skin="backoffice"] .lab-workbench-actions{justify-content:flex-start;}
  [data-route-outlet][data-ui-skin="backoffice"] .menu-health-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Administration pages use the page name in the application bar. */
html[data-ui-skin="backoffice"] [data-route-outlet] :is(.lab-workbench-copy,.cx-lab-page-copy,.lab-executive-head > div:first-child) { display:none; }
html[data-ui-skin="backoffice"] [data-route-outlet] :is(.lab-workbench-head,.cx-lab-page-head,.lab-executive-head) { min-height:0; padding-block:0; justify-content:flex-start; }
html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header:not(:has(a,button,input,select)) { display:none; }
html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header:has(a,button,input,select) :is(h1,.cx-page-eyebrow,p.cx-help) { display:none; }
html[data-ui-skin="backoffice"] [data-route-outlet] .cx-page-header:has(a,button,input,select) { min-height:0; padding-block:0; }
html[data-ui-skin="backoffice"] [data-route-outlet] .executive-layout--single { grid-template-columns:minmax(0,1fr); }

/* Inventory-source dialog content only. Generic backoffice window ownership lives in components/modal.css. */
html[data-ui-skin="backoffice"] .inventory-source-modal-shell { display:block; }
html[data-ui-skin="backoffice"] .inventory-source-summary { display:flex; flex-wrap:wrap; gap:8px 24px; margin:0 0 12px; padding:0 0 12px; border-bottom:1px solid #eae5ee; }
html[data-ui-skin="backoffice"] .inventory-source-summary > div { min-width:0; min-height:0; padding:6px 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
html[data-ui-skin="backoffice"] .inventory-source-summary dt { color:#81778c; font-size:.75rem; }
html[data-ui-skin="backoffice"] .inventory-source-summary dd { margin:3px 0 0; font-weight:800; }
html[data-ui-skin="backoffice"] .inventory-source-modal-shell :is(.inventory-source-hero,.inventory-source-groups article) { min-height:0; padding:10px 0; border:0; border-radius:0; background:transparent; box-shadow:none; }
html[data-ui-skin="backoffice"] .inventory-source-modal-shell .inventory-source-table-card + .inventory-source-table-card { border-top:1px solid #eae5ee; }
html[data-ui-skin="backoffice"] .inventory-source-table-card h3 { margin:0 0 10px; font-size:.9rem; }

/* Status and health choices belong to the page's filter area. */
html[data-ui-skin="backoffice"] .cx-page-filter-dock { margin:12px 0; padding:0; border:1px solid #e5deeb; border-radius:12px; background:#fff; }
html[data-ui-skin="backoffice"] .cx-page-filter-dock > summary { display:flex; align-items:center; gap:10px; padding:12px 16px; color:#4b176b; font-weight:800; cursor:pointer; }
html[data-ui-skin="backoffice"] .cx-page-filter-dock > summary span { color:#81778c; font-size:.75rem; font-weight:500; }
html[data-ui-skin="backoffice"] .cx-page-filter-dock[open] > summary { border-bottom:1px solid #eee8f2; }
html[data-ui-skin="backoffice"] .cx-page-filter-dock > :not(summary) { margin-inline:14px; }

/* Fast search works on the table's existing rows and shares its pager. */
html[data-ui-skin="backoffice"] .cx-table-live-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid #ebe5ef; background:#fff; }
html[data-ui-skin="backoffice"] .cx-table-live-field { display:flex; align-items:center; gap:8px; width:min(360px,100%); min-height:38px; padding:0 11px; border:1px solid #ddd2e7; border-radius:10px; color:#7d2aa7; }
html[data-ui-skin="backoffice"] .cx-table-live-field:focus-within { border-color:#9b53bd; box-shadow:0 0 0 3px rgba(125,42,167,.08); }
html[data-ui-skin="backoffice"] .cx-table-live-field input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:inherit; font:inherit; font-size:.82rem; }
html[data-ui-skin="backoffice"] .cx-table-live-toolbar small { flex:none; color:#81778c; }
html[data-ui-skin="backoffice"] .cx-table-live-empty { margin:0; padding:12px; text-align:center; color:#81778c; }
html[data-ui-skin="backoffice"] .cx-table-live-empty[hidden] { display:none; }

/* Recovery center keeps one category visible with a steady header and scrollable body. */
.cx-recovery-overlay { align-items:center; padding:16px; overflow:hidden; background:rgba(28,17,45,.45); backdrop-filter:blur(4px); }
.cx-recovery-list { display:flex; flex-direction:column; width:min(920px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; overflow:hidden; border-radius:16px; }
.cx-recovery-list > header { flex:none; align-items:center; padding:18px 22px; background:#fff; }
.cx-recovery-list > header h2 { font-size:1.2rem; }
.cx-recovery-list > header p { margin:4px 0 0; color:#81778c; font-size:.8rem; }
.cx-recovery-list .cx-recovery-tabs { display:flex; flex:none; gap:5px; padding:9px 16px 0; border-bottom:1px solid #ebe5ef; background:#fff; overflow-x:auto; }
.cx-recovery-tabs button { display:flex; align-items:center; gap:7px; flex:none; padding:10px 14px; border:0; border-bottom:2px solid transparent; background:transparent; color:#695c75; font:inherit; font-size:.85rem; font-weight:750; cursor:pointer; }
.cx-recovery-tabs button[aria-selected="true"] { color:#76269e; border-bottom-color:#9b35c3; }
.cx-recovery-tabs button span { display:grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border-radius:999px; background:#f1e8f7; font-size:.72rem; }
.cx-recovery-list .cx-recovery-panel-wrap { flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px 16px 18px; scrollbar-gutter:stable; }
.cx-recovery-list .cx-recovery-issues { display:block; margin:0; }
.cx-recovery-list .cx-recovery-issues[hidden] { display:none; }
.cx-recovery-list .cx-recovery-group { gap:0; }
.cx-recovery-list .cx-recovery-group > h3 { margin:5px 0 8px; font-size:.83rem; }
.cx-recovery-list .cx-recovery-issue { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:start; width:100%; margin:0; padding:13px 8px; border:0; border-bottom:1px solid #eee8f2; border-radius:0; background:transparent; }
.cx-recovery-list button.cx-recovery-issue:hover { background:#faf6fd; }
.cx-recovery-list .cx-recovery-issue > div:last-child { max-width:none; align-items:flex-start; }
.cx-recovery-list .cx-recovery-issue strong { font-size:.84rem; }
.cx-recovery-list .cx-recovery-issue span,.cx-recovery-list .cx-recovery-issue small { font-size:.74rem; line-height:1.5; }
@media(max-width:640px){ .cx-recovery-list .cx-recovery-issue { grid-template-columns:1fr; gap:6px; } .cx-recovery-list > header { padding:14px; } .cx-recovery-list .cx-recovery-panel-wrap { padding-inline:12px; } }

.cx-shell[data-ui-skin="backoffice"] .cx-shell-search { width:min(600px,calc(100vw - 28px)); padding:10px; }
.cx-shell[data-ui-skin="backoffice"] .cx-shell-search [data-route-search-results] { max-height:min(510px,65dvh); }
.cx-shell[data-ui-skin="backoffice"] .cx-shell-search [data-route-search-results] a { padding:10px 9px; }
.cx-shell[data-ui-skin="backoffice"] .cx-shell-search [data-route-search-results] strong { font-size:.8rem; }
.cx-shell[data-ui-skin="backoffice"] .cx-shell-search [data-route-search-results] small { font-size:.7rem; }
.cx-shell-search-suggestions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 5px 7px; color:#81778c; font-size:.76rem; }
.cx-shell-search-suggestions button { border:1px solid #e7dcec; border-radius:999px; padding:5px 10px; background:#fff; color:#73229c; font:inherit; cursor:pointer; }
.cx-shell-search-suggestions button:hover { background:#f7effb; }

/* Unified analysis-center navigation: one visual family, legacy routes keep their own RBAC. */
@layer components {
  [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-width:0;
    padding:8px 10px;
    margin:2px 0 10px;
    border:1px solid color-mix(in srgb,var(--cx-brand) 10%,var(--cx-border-soft));
    border-radius:16px;
    background:color-mix(in srgb,var(--cx-surface-card) 96%,var(--cx-brand-soft));
    box-shadow:0 10px 24px rgba(40,24,63,.035);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-label {
    flex:0 0 auto;
    color:var(--cx-text-soft);
    font-size:.72rem;
    font-weight:900;
    white-space:nowrap;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-switcher {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:5px;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-switcher::-webkit-scrollbar { display:none; }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-link {
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    min-height:38px;
    padding:7px 11px;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--cx-text-soft);
    text-decoration:none;
    white-space:nowrap;
    transition:background var(--cx-transition),border-color var(--cx-transition),color var(--cx-transition),box-shadow var(--cx-transition);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-icon {
    display:grid;
    place-items:center;
    width:1.55rem;
    height:1.55rem;
    border-radius:9px;
    color:var(--cx-brand-strong);
    background:color-mix(in srgb,var(--cx-brand-soft) 64%,white);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cx-brand-accent) 12%,transparent);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-icon svg { width:1rem; height:1rem; }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-link strong { font-size:.76rem; font-weight:900; }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-link:hover {
    color:var(--cx-text-main);
    background:color-mix(in srgb,var(--cx-brand-soft) 28%,transparent);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-link.is-active {
    color:var(--cx-brand-strong);
    border-color:color-mix(in srgb,var(--cx-brand-accent) 22%,var(--cx-border));
    background:linear-gradient(180deg,var(--cx-surface-card),color-mix(in srgb,var(--cx-brand-soft) 54%,var(--cx-surface-card)));
    box-shadow:0 7px 18px rgba(91,33,182,.08),inset 0 -2px 0 color-mix(in srgb,var(--cx-brand-accent) 80%,transparent);
  }
  [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-link:focus-visible {
    outline:2px solid color-mix(in srgb,var(--cx-brand-accent) 42%,transparent);
    outline-offset:2px;
  }
  @media (max-width:820px) {
    [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-nav { align-items:stretch; flex-direction:column; gap:6px; }
    [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-label { padding-inline:4px; }
    [data-route-outlet][data-ui-skin="backoffice"] .cx-analysis-center-switcher { width:100%; }
  }
}