/* 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 tabs for allowed non-POS pages. */
  :where(.reports-tabs, .cx-settings-tabs, .cx-catalog-tabs, .remaining-tabs, .cx-tab-bar, .cx-ops-tabs) {
    border: 1px solid var(--cx-page-hook-soft-border, var(--cx-border-soft));
    border-radius: var(--cx-radius-xl);
    background: var(--cx-page-hook-tab-bg, var(--cx-table-toolbar-bg));
    box-shadow: var(--cx-shadow-soft);
    gap: var(--cx-space-2);
  }

  :where(.reports-tab, .cx-settings-tab, .cx-catalog-tab, .remaining-tab, .cx-tab-btn, .cx-ops-tabs .cx-tab) {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--cx-text-soft);
    font-weight: 900;
    transition: background var(--cx-motion-base), color var(--cx-motion-base), border-color var(--cx-motion-base), box-shadow var(--cx-motion-base), transform var(--cx-motion-base);
  }

  :where(.reports-tab, .cx-settings-tab, .cx-catalog-tab, .remaining-tab, .cx-tab-btn, .cx-ops-tabs .cx-tab):hover {
    color: var(--cx-text-main);
    background: var(--cx-page-hook-soft-bg);
    border-color: var(--cx-page-hook-soft-border);
  }

  :where(
    .reports-tab.is-active,
    .cx-settings-tab[aria-selected="true"],
    .cx-catalog-tab.is-active,
    .remaining-tab.is-active,
    .cx-tab-btn.is-active,
    .cx-ops-tabs .cx-tab.is-active
  ) {
    color: var(--cx-page-hook-tab-active-text);
    background: var(--cx-page-hook-tab-active-bg);
    border-color: transparent;
    box-shadow: var(--cx-page-hook-accent-shadow);
  }

  /* 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,
    .inventory-count-drop,
    .cx-pp-stat,
    .cx-sc-priority-card,
    .cx-sc-opp-card,
    .cx-sc-prime-stat
  ) {
    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(.reports-tab, .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;
  }
}

/* B-Design-Recovery-4 — Costix Smart Table v2 visual system.
   Scope: allowed tenant company pages only. Excludes POS/Cashier, Call Center, Sales Log,
   Platform Admin, and Marketing/Website pages. Visual layer only: no API, pagination or data-loading changes. */
@layer features {
  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) {
    --cx-smart-table-v2-bg: color-mix(in srgb, var(--cx-surface-card) 96%, var(--cx-brand-soft));
    --cx-smart-table-v2-border: color-mix(in srgb, var(--cx-brand) 14%, var(--cx-border-soft));
    --cx-smart-table-v2-head-bg: linear-gradient(180deg,
      color-mix(in srgb, var(--cx-brand-soft) 64%, var(--cx-surface-card)),
      color-mix(in srgb, var(--cx-surface-muted) 88%, var(--cx-brand-soft)));
    --cx-smart-table-v2-head-text: color-mix(in srgb, var(--cx-text-main) 92%, var(--cx-brand-strong));
    --cx-smart-table-v2-row-bg: var(--cx-surface-card);
    --cx-smart-table-v2-row-alt-bg: color-mix(in srgb, var(--cx-brand-soft) 5%, var(--cx-surface-card));
    --cx-smart-table-v2-row-hover-bg: color-mix(in srgb, var(--cx-brand-soft) 22%, var(--cx-surface-card));
    --cx-smart-table-v2-row-selected-bg: color-mix(in srgb, var(--cx-brand-soft) 34%, var(--cx-surface-card));
    --cx-smart-table-v2-grid: color-mix(in srgb, var(--cx-border-soft) 78%, transparent);
    --cx-smart-table-v2-shadow: 0 18px 40px rgba(44, 31, 74, .075);
    --cx-smart-table-v2-radius: clamp(16px, 1.3vw, 22px);
    --cx-smart-table-v2-head-h: 52px;
    --cx-smart-table-v2-row-h: 50px;
    --cx-smart-table-v2-max-h: min(66vh, 720px);
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table-wrap, .cx-smart-table-wrap) {
    border: 1px solid var(--cx-smart-table-v2-border) !important;
    border-radius: var(--cx-smart-table-v2-radius) !important;
    background: var(--cx-smart-table-v2-bg) !important;
    box-shadow: var(--cx-smart-table-v2-shadow) !important;
    overflow: auto !important;
    direction: ltr;
    scrollbar-gutter: stable both-edges;
    max-block-size: var(--cx-smart-table-v2-max-h) !important;
    min-block-size: 0 !important;
    overscroll-behavior: contain;
  }

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

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table, .cx-smart-table) {
    direction: rtl;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    color: var(--cx-text-main);
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table thead th, .cx-smart-table thead th) {
    position: sticky !important;
    inset-block-start: 0 !important;
    z-index: 6 !important;
    min-block-size: var(--cx-smart-table-v2-head-h);
    padding: .82rem .92rem !important;
    background: var(--cx-smart-table-v2-head-bg) !important;
    color: var(--cx-smart-table-v2-head-text) !important;
    border-block-end: 1px solid color-mix(in srgb, var(--cx-brand) 22%, var(--cx-border-soft)) !important;
    border-inline-end: 1px solid color-mix(in srgb, var(--cx-brand) 8%, var(--cx-border-soft)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.46), 0 8px 18px rgba(44,31,74,.055) !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: .86rem !important;
    font-weight: 1000 !important;
    letter-spacing: -.012em;
    white-space: nowrap;
    backdrop-filter: none !important;
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table thead th .cx-th-label, .cx-smart-table thead th .cx-th-label) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    max-inline-size: 100%;
    color: inherit !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table thead th .cx-th-hint, .cx-smart-table thead th .cx-th-hint) {
    display: block;
    margin-block-start: .16rem;
    color: var(--cx-muted);
    font-size: .68rem;
    font-weight: 850;
    line-height: 1.25;
    white-space: normal;
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table tbody td, .cx-smart-table tbody td) {
    min-block-size: var(--cx-smart-table-v2-row-h);
    padding: .72rem .92rem !important;
    background: var(--cx-smart-table-v2-row-bg) !important;
    border-block-end: 1px solid var(--cx-smart-table-v2-grid) !important;
    border-inline-end: 1px solid color-mix(in srgb, var(--cx-smart-table-v2-grid) 62%, transparent) !important;
    color: var(--cx-text-main);
    line-height: 1.44;
    vertical-align: middle !important;
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table tbody tr:nth-child(even) td, .cx-smart-table tbody tr:nth-child(even) td) {
    background: var(--cx-smart-table-v2-row-alt-bg) !important;
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table tbody tr:hover td, .cx-smart-table tbody tr:hover td) {
    background: var(--cx-smart-table-v2-row-hover-bg) !important;
    color: var(--cx-text-main) !important;
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table tbody tr:hover, .cx-smart-table tbody tr:hover) {
    box-shadow: inset 4px 0 0 color-mix(in srgb, var(--cx-brand) 70%, transparent) !important;
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table tbody tr[aria-selected="true"] td, .cx-table tbody tr.is-selected td, .cx-smart-table tbody tr[aria-selected="true"] td, .cx-smart-table tbody tr.is-selected td) {
    background: var(--cx-smart-table-v2-row-selected-bg) !important;
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-money, .cx-number, .cx-percent, [data-col-type="money"], [data-col-type="number"], [data-col-type="qty"], [data-col-type="percent"]) {
    font-variant-numeric: tabular-nums;
  }

  :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) :where(.cx-table-empty, .cx-table-error, .cx-table-loading) {
    min-block-size: 138px;
    display: grid;
    place-items: center;
    margin: .75rem;
    padding: 1.2rem;
    border: 1px dashed color-mix(in srgb, var(--cx-brand) 18%, var(--cx-border-soft));
    border-radius: calc(var(--cx-smart-table-v2-radius) - 6px);
    background: color-mix(in srgb, var(--cx-brand-soft) 18%, var(--cx-surface-card));
    color: var(--cx-muted);
    font-weight: 900;
    text-align: center;
  }

  :where(.reports-page, .financial-center-page, .cost-control-page, .audit-risk-page) :where(.reports-table-toolbar, .reports-table-pager, .cx-pagination, .cx-smart-detail-pagination) {
    border: 1px solid color-mix(in srgb, var(--cx-brand) 12%, var(--cx-border-soft));
    border-radius: var(--cx-radius-lg);
    background: color-mix(in srgb, var(--cx-surface-card) 92%, var(--cx-brand-soft));
    box-shadow: 0 10px 26px rgba(44, 31, 74, .055);
  }

  :where(.reports-page, .financial-center-page, .cost-control-page, .audit-risk-page) :where(.reports-page-size-control select, .cx-pagination-size select, .cx-smart-detail-page-size select) {
    border-color: color-mix(in srgb, var(--cx-brand) 18%, var(--cx-border-soft));
    background: var(--cx-surface-card);
    font-weight: 950;
  }

  [data-theme="dark"] :where(
    .reports-page,
    .financial-center-page,
    .cost-control-page,
    .audit-risk-page,
    .cx-settings-page,
    .cx-catalog-main,
    .cx-customer-result,
    .remaining-page,
    .growth-page,
    .inventory-page-card,
    .inventory-insight-card
  ) {
    --cx-smart-table-v2-bg: color-mix(in srgb, var(--cx-surface-card) 86%, #080512);
    --cx-smart-table-v2-head-bg: linear-gradient(180deg,
      color-mix(in srgb, var(--cx-brand-soft) 22%, var(--cx-surface-strong)),
      color-mix(in srgb, var(--cx-surface-strong) 90%, #080512));
    --cx-smart-table-v2-row-bg: color-mix(in srgb, var(--cx-surface-card) 88%, #080512);
    --cx-smart-table-v2-row-alt-bg: color-mix(in srgb, var(--cx-surface-card) 76%, #120b22);
    --cx-smart-table-v2-row-hover-bg: color-mix(in srgb, var(--cx-brand-soft) 16%, var(--cx-surface-card));
    --cx-smart-table-v2-shadow: 0 20px 48px rgba(0,0,0,.28);
  }

  @media (prefers-reduced-motion: no-preference) {
    :where(
      .reports-page,
      .financial-center-page,
      .cost-control-page,
      .audit-risk-page,
      .cx-settings-page,
      .cx-catalog-main,
      .cx-customer-result,
      .remaining-page,
      .growth-page,
      .inventory-page-card,
      .inventory-insight-card
    ) :where(.cx-table tbody tr, .cx-smart-table tbody tr) {
      transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
    }
  }

  @media (max-width: 720px) {
    :where(
      .reports-page,
      .financial-center-page,
      .cost-control-page,
      .audit-risk-page,
      .cx-settings-page,
      .cx-catalog-main,
      .cx-customer-result,
      .remaining-page,
      .growth-page,
      .inventory-page-card,
      .inventory-insight-card
    ) :where(.cx-table-wrap, .cx-smart-table-wrap) {
      --cx-smart-table-v2-max-h: min(70vh, 620px);
      border-radius: var(--cx-radius-lg) !important;
    }

    :where(
      .reports-page,
      .financial-center-page,
      .cost-control-page,
      .audit-risk-page,
      .cx-settings-page,
      .cx-catalog-main,
      .cx-customer-result,
      .remaining-page,
      .growth-page,
      .inventory-page-card,
      .inventory-insight-card
    ) :where(.cx-table thead th, .cx-smart-table thead th) {
      font-size: .8rem !important;
      padding-inline: .72rem !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: 118px;
    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(18px, 1.4vw, 24px) !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 14px 34px rgba(44,31,74,.075) !important;
    padding: clamp(.86rem, 1.1vw, 1.05rem) !important;
  }

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

  .cx-ui-contract-scope .cx-ui-kpi-card .cx-ui-kpi-glow {
    position: absolute;
    inset-block-start: .68rem;
    inset-inline-start: .68rem;
    inline-size: 2.15rem;
    block-size: 2.15rem;
    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.7rem; }
  .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.28rem, 1.8vw, 2.05rem) !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: .32rem;
    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;
    overflow: auto !important;
    scrollbar-gutter: stable both-edges;
    overscroll-behavior: contain;
  }
  .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: .4rem;
    font-size: .8rem;
    font-weight: 950;
  }
  .cx-ui-contract-scope .cx-ui-table-page-size select {
    min-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; }
  }
}