/**
 * Pixleas universal UI modes — chrome only (no page-option / business-logic changes).
 * Activated via html.ui-mode-{key} from UiModeHelper.
 */

/* Shared filter / panel tokens used by pages */
.pix-filter-panel {
  margin-bottom: 20px;
  padding: 16px 18px;
  overflow: visible;
  position: relative;
  z-index: 5;
}
.pix-filter-panel .contact-format-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: rgba(148, 163, 184, 0.15);
  border-radius: 8px;
  padding: 3px;
}
.pix-filter-panel .contact-format-toggles .tw-dw-btn {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  min-height: 32px;
  font-size: 12px;
  margin: 0;
}
.pix-filter-panel .contact-format-toggles .tw-dw-btn.active {
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}
.pix-filter-panel .contact-format-toggles input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pix-filter-panel .pix-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
}
.pix-filter-panel .pix-filter-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pix-filter-panel .pix-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.pix-filter-panel .pix-filter-grid,
.pix-filter-panel form.pix-filter-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
  margin: 0;
  width: 100%;
}
.pix-filter-panel .pix-filter-field {
  grid-column: span 3;
  min-width: 0;
  margin: 0;
}
.pix-filter-panel .pix-filter-field.pix-span-3,
.pix-filter-panel .pix-filter-field.cf-span-3 { grid-column: span 3; }
.pix-filter-panel .pix-filter-field.pix-span-4 { grid-column: span 4; }
.pix-filter-panel .pix-filter-field.pix-span-6 { grid-column: span 6; }
.pix-filter-panel .pix-filter-field.pix-span-12 { grid-column: span 12; }
.pix-filter-panel .pix-filter-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
}
.pix-filter-panel .pix-input-icon {
  position: relative;
}
.pix-filter-panel .pix-input-icon > i {
  position: absolute;
  top: 50%;
  inset-inline-start: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  opacity: 0.65;
}
.pix-filter-panel .pix-input-icon .form-control {
  padding-inline-start: 36px;
}
.pix-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pix-pill {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  background: transparent;
}
/* Desktop shell breakpoint aligns with Tailwind lg (1024) */
@media (max-width: 1023px) {
  .pix-filter-panel .pix-filter-field,
  .pix-filter-panel .pix-filter-field.pix-span-4 { grid-column: span 6; }
}
@media (max-width: 767px) {
  .pix-filter-panel .pix-filter-field,
  .pix-filter-panel .pix-filter-field.pix-span-4,
  .pix-filter-panel .pix-filter-field.pix-span-6 { grid-column: span 12; }
}

/* ========== SHARED DARK BASE (classic_dark / dark_oled / dark_motion) ==========
   Layout uses main / #scrollable-container / Tailwind — not only :is(#scrollable-container, main, .content-wrapper) */
html.ui-mode-classic_dark,
html.ui-mode-dark_oled,
html.ui-mode-dark_motion {
  color-scheme: dark;
  /* html had tw-bg-white / oklch white — showed as a strip above Main Header */
  background-color: var(--pix-dark-bg) !important;
  background-image: var(--pix-dark-bg-image, none) !important;
}

html.ui-mode-classic_dark body,
html.ui-mode-dark_oled body,
html.ui-mode-dark_motion body,
html.ui-mode-classic_dark .thetop,
html.ui-mode-dark_oled .thetop,
html.ui-mode-dark_motion .thetop,
html.ui-mode-classic_dark main,
html.ui-mode-dark_oled main,
html.ui-mode-dark_motion main,
html.ui-mode-classic_dark #scrollable-container,
html.ui-mode-dark_oled #scrollable-container,
html.ui-mode-dark_motion #scrollable-container,
html.ui-mode-classic_dark :is(#scrollable-container, main, .content-wrapper),
html.ui-mode-dark_oled :is(#scrollable-container, main, .content-wrapper),
html.ui-mode-dark_motion :is(#scrollable-container, main, .content-wrapper),
html.ui-mode-classic_dark .wrapper,
html.ui-mode-dark_oled .wrapper,
html.ui-mode-dark_motion .wrapper {
  background-color: var(--pix-dark-bg) !important;
  background-image: var(--pix-dark-bg-image, none) !important;
  color: var(--pix-dark-text) !important;
}

html.ui-mode-classic_dark body.tw-bg-gray-100,
html.ui-mode-dark_oled body.tw-bg-gray-100,
html.ui-mode-dark_motion body.tw-bg-gray-100,
html.ui-mode-classic_dark main.tw-bg-gray-100,
html.ui-mode-dark_oled main.tw-bg-gray-100,
html.ui-mode-dark_motion main.tw-bg-gray-100 {
  background-color: var(--pix-dark-bg) !important;
}

html.ui-mode-classic_dark body.tw-text-gray-900,
html.ui-mode-dark_oled body.tw-text-gray-900,
html.ui-mode-dark_motion body.tw-text-gray-900 {
  color: var(--pix-dark-text) !important;
}

/* Sidebar */
html.ui-mode-classic_dark .side-bar,
html.ui-mode-classic_dark .side-bar-modern,
html.ui-mode-dark_oled .side-bar,
html.ui-mode-dark_oled .side-bar-modern,
html.ui-mode-dark_motion .side-bar,
html.ui-mode-dark_motion .side-bar-modern {
  background: var(--pix-dark-sidebar) !important;
  border-color: var(--pix-dark-border) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45) !important;
}
html.ui-mode-classic_dark .sidebar-search-box,
html.ui-mode-dark_oled .sidebar-search-box,
html.ui-mode-dark_motion .sidebar-search-box {
  background: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  box-shadow: none !important;
}
html.ui-mode-classic_dark .sidebar-search-input,
html.ui-mode-dark_oled .sidebar-search-input,
html.ui-mode-dark_motion .sidebar-search-input {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .sidebar-search-input::placeholder,
html.ui-mode-dark_oled .sidebar-search-input::placeholder,
html.ui-mode-dark_motion .sidebar-search-input::placeholder {
  color: var(--pix-dark-muted) !important;
}
html.ui-mode-classic_dark .sidebar-nav-link,
html.ui-mode-dark_oled .sidebar-nav-link,
html.ui-mode-dark_motion .sidebar-nav-link,
html.ui-mode-classic_dark .sidebar-nav-group > a,
html.ui-mode-dark_oled .sidebar-nav-group > a,
html.ui-mode-dark_motion .sidebar-nav-group > a {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .sidebar-nav-link:hover,
html.ui-mode-dark_oled .sidebar-nav-link:hover,
html.ui-mode-dark_motion .sidebar-nav-link:hover,
html.ui-mode-classic_dark .sidebar-nav-link.active,
html.ui-mode-dark_oled .sidebar-nav-link.active,
html.ui-mode-dark_motion .sidebar-nav-link.active {
  background: var(--pix-dark-hover) !important;
  color: #fff !important;
}
html.ui-mode-classic_dark .sidebar-menu-panel,
html.ui-mode-dark_oled .sidebar-menu-panel,
html.ui-mode-dark_motion .sidebar-menu-panel {
  scrollbar-color: var(--pix-dark-border) transparent;
}

/* Panels / cards / filters */
html.ui-mode-classic_dark .box,
html.ui-mode-classic_dark .pix-filter-panel,
html.ui-mode-classic_dark .contact-filter-panel,
html.ui-mode-classic_dark .filter-box,
html.ui-mode-classic_dark .nav-tabs-custom,
html.ui-mode-classic_dark .info-box,
html.ui-mode-classic_dark .small-box,
html.ui-mode-classic_dark .modal-content,
html.ui-mode-classic_dark .panel,
html.ui-mode-classic_dark .callout,
html.ui-mode-classic_dark .well,
html.ui-mode-classic_dark .db-card,
html.ui-mode-classic_dark .cp-module-card,
html.ui-mode-classic_dark .cp-module-panel,
html.ui-mode-classic_dark .cp-module-table-panel,
html.ui-mode-classic_dark .cp-module-stat-card,
html.ui-mode-classic_dark .aal-settings-panel,
html.ui-mode-classic_dark .settings-panel,
html.ui-mode-classic_dark .analytics-panel,
html.ui-mode-classic_dark .tw-bg-white,
html.ui-mode-classic_dark .tw-rounded-xl.tw-bg-white,
html.ui-mode-dark_oled .box,
html.ui-mode-dark_oled .pix-filter-panel,
html.ui-mode-dark_oled .contact-filter-panel,
html.ui-mode-dark_oled .filter-box,
html.ui-mode-dark_oled .nav-tabs-custom,
html.ui-mode-dark_oled .info-box,
html.ui-mode-dark_oled .small-box,
html.ui-mode-dark_oled .modal-content,
html.ui-mode-dark_oled .panel,
html.ui-mode-dark_oled .callout,
html.ui-mode-dark_oled .well,
html.ui-mode-dark_oled .db-card,
html.ui-mode-dark_oled .cp-module-card,
html.ui-mode-dark_oled .cp-module-panel,
html.ui-mode-dark_oled .cp-module-table-panel,
html.ui-mode-dark_oled .cp-module-stat-card,
html.ui-mode-dark_oled .aal-settings-panel,
html.ui-mode-dark_oled .settings-panel,
html.ui-mode-dark_oled .analytics-panel,
html.ui-mode-dark_oled .tw-bg-white,
html.ui-mode-dark_oled .tw-rounded-xl.tw-bg-white,
html.ui-mode-dark_motion .box,
html.ui-mode-dark_motion .pix-filter-panel,
html.ui-mode-dark_motion .contact-filter-panel,
html.ui-mode-dark_motion .filter-box,
html.ui-mode-dark_motion .nav-tabs-custom,
html.ui-mode-dark_motion .info-box,
html.ui-mode-dark_motion .small-box,
html.ui-mode-dark_motion .modal-content,
html.ui-mode-dark_motion .panel,
html.ui-mode-dark_motion .callout,
html.ui-mode-dark_motion .well,
html.ui-mode-dark_motion .db-card,
html.ui-mode-dark_motion .cp-module-card,
html.ui-mode-dark_motion .cp-module-panel,
html.ui-mode-dark_motion .cp-module-table-panel,
html.ui-mode-dark_motion .cp-module-stat-card,
html.ui-mode-dark_motion .aal-settings-panel,
html.ui-mode-dark_motion .settings-panel,
html.ui-mode-dark_motion .analytics-panel,
html.ui-mode-dark_motion .tw-bg-white,
html.ui-mode-dark_motion .tw-rounded-xl.tw-bg-white {
  background: var(--pix-dark-panel) !important;
  border: 1px solid var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
  box-shadow: var(--pix-dark-shadow) !important;
}

/* Nested light chips / callout accents inside dark panels */
html.ui-mode-classic_dark .radial-item,
html.ui-mode-classic_dark .timeline-note-body,
html.ui-mode-classic_dark .bosta-timeline-content,
html.ui-mode-dark_oled .radial-item,
html.ui-mode-dark_oled .timeline-note-body,
html.ui-mode-dark_oled .bosta-timeline-content,
html.ui-mode-dark_motion .radial-item,
html.ui-mode-dark_motion .timeline-note-body,
html.ui-mode-dark_motion .bosta-timeline-content {
  background: var(--pix-dark-panel-2) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .panel-title-custom,
html.ui-mode-dark_oled .panel-title-custom,
html.ui-mode-dark_motion .panel-title-custom {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .callout-info,
html.ui-mode-dark_oled .callout-info,
html.ui-mode-dark_motion .callout-info {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}
html.ui-mode-classic_dark .callout-warning,
html.ui-mode-dark_oled .callout-warning,
html.ui-mode-dark_motion .callout-warning {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}
html.ui-mode-classic_dark .callout-danger,
html.ui-mode-dark_oled .callout-danger,
html.ui-mode-dark_motion .callout-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}
html.ui-mode-classic_dark .callout-success,
html.ui-mode-dark_oled .callout-success,
html.ui-mode-dark_motion .callout-success {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}
html.ui-mode-classic_dark .bosta-timeline-item.active .bosta-timeline-content,
html.ui-mode-dark_oled .bosta-timeline-item.active .bosta-timeline-content,
html.ui-mode-dark_motion .bosta-timeline-item.active .bosta-timeline-content {
  background: rgba(16, 185, 129, 0.12) !important;
}
html.ui-mode-classic_dark .bosta-timeline-item.completed .bosta-timeline-content,
html.ui-mode-dark_oled .bosta-timeline-item.completed .bosta-timeline-content,
html.ui-mode-dark_motion .bosta-timeline-item.completed .bosta-timeline-content {
  background: rgba(79, 70, 229, 0.15) !important;
}
html.ui-mode-classic_dark .cp-module-table-panel .table thead th,
html.ui-mode-classic_dark .cp-module-table-panel .table tbody tr:hover,
html.ui-mode-dark_oled .cp-module-table-panel .table thead th,
html.ui-mode-dark_oled .cp-module-table-panel .table tbody tr:hover,
html.ui-mode-dark_motion .cp-module-table-panel .table thead th,
html.ui-mode-dark_motion .cp-module-table-panel .table tbody tr:hover {
  background: var(--pix-dark-panel-2) !important;
  color: var(--pix-dark-text) !important;
}

html.ui-mode-classic_dark .box-header,
html.ui-mode-classic_dark .box-footer,
html.ui-mode-classic_dark .modal-header,
html.ui-mode-classic_dark .modal-footer,
html.ui-mode-classic_dark .nav-tabs-custom > .nav-tabs,
html.ui-mode-dark_oled .box-header,
html.ui-mode-dark_oled .box-footer,
html.ui-mode-dark_oled .modal-header,
html.ui-mode-dark_oled .modal-footer,
html.ui-mode-dark_oled .nav-tabs-custom > .nav-tabs,
html.ui-mode-dark_motion .box-header,
html.ui-mode-dark_motion .box-footer,
html.ui-mode-dark_motion .modal-header,
html.ui-mode-dark_motion .modal-footer,
html.ui-mode-dark_motion .nav-tabs-custom > .nav-tabs {
  background: var(--pix-dark-panel-2) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}

/* Product view popup + other admin modals (AdminLTE bg-gray / bg-green stay light otherwise) */
html.ui-mode-classic_dark :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) .modal-content,
html.ui-mode-dark_oled :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) .modal-content,
html.ui-mode-dark_motion :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) .modal-content {
  background: var(--pix-dark-panel) !important;
  background-color: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
  box-shadow: var(--pix-dark-shadow) !important;
}
html.ui-mode-classic_dark :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.modal-header, .modal-footer, .modal-body),
html.ui-mode-dark_oled :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.modal-header, .modal-footer, .modal-body),
html.ui-mode-dark_motion :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.modal-header, .modal-footer, .modal-body) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) .modal-header,
html.ui-mode-dark_oled :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) .modal-header,
html.ui-mode-dark_motion :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) .modal-header {
  background: var(--pix-dark-header, var(--pix-dark-panel-2)) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.modal-title, h1, h2, h3, h4, h5, b, strong, label, .invoice-col, p, span, td, th),
html.ui-mode-dark_oled :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.modal-title, h1, h2, h3, h4, h5, b, strong, label, .invoice-col, p, span, td, th),
html.ui-mode-dark_motion :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.modal-title, h1, h2, h3, h4, h5, b, strong, label, .invoice-col, p, span, td, th) {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.text-muted, .help-block, .close),
html.ui-mode-dark_oled :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.text-muted, .help-block, .close),
html.ui-mode-dark_motion :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.text-muted, .help-block, .close) {
  color: var(--pix-dark-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
html.ui-mode-classic_dark :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.bg-gray, .table.bg-gray, table.bg-gray),
html.ui-mode-dark_oled :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.bg-gray, .table.bg-gray, table.bg-gray),
html.ui-mode-dark_motion :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.bg-gray, .table.bg-gray, table.bg-gray) {
  background: var(--pix-dark-panel-2) !important;
  background-color: var(--pix-dark-panel-2) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.bg-green, tr.bg-green, .bg-green > th, .bg-green > td),
html.ui-mode-dark_oled :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.bg-green, tr.bg-green, .bg-green > th, .bg-green > td),
html.ui-mode-dark_motion :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.bg-green, tr.bg-green, .bg-green > th, .bg-green > td) {
  background: rgba(14, 165, 233, 0.28) !important;
  background-color: rgba(14, 165, 233, 0.28) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.table > thead > tr > th, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td),
html.ui-mode-dark_oled :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.table > thead > tr > th, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td),
html.ui-mode-dark_motion :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.table > thead > tr > th, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td) {
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
  background-color: transparent;
}
html.ui-mode-classic_dark :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.thumbnail, .img-thumbnail),
html.ui-mode-dark_oled :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.thumbnail, .img-thumbnail),
html.ui-mode-dark_motion :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.thumbnail, .img-thumbnail) {
  background: var(--pix-dark-input) !important;
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.btn-default, .btn.btn-default),
html.ui-mode-dark_oled :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.btn-default, .btn.btn-default),
html.ui-mode-dark_motion :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal, .modal) :is(.btn-default, .btn.btn-default) {
  background: var(--pix-dark-panel-2) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-dark_motion :is(#view_product_modal, .view_product_modal, .view_modal, .product_modal, #aps_stock_layer_modal) .modal-content {
  border-radius: 16px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Shipment tracking popup (Bosta / shipping) — match dark UI modes */
html.ui-mode-classic_dark .pixleas-track-modal,
html.ui-mode-dark_oled .pixleas-track-modal,
html.ui-mode-dark_motion .pixleas-track-modal {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pixleas-track-modal :is(.text-muted, .text-center.text-muted),
html.ui-mode-dark_oled .pixleas-track-modal :is(.text-muted, .text-center.text-muted),
html.ui-mode-dark_motion .pixleas-track-modal :is(.text-muted, .text-center.text-muted) {
  color: var(--pix-dark-muted) !important;
}
html.ui-mode-classic_dark .pixleas-track-modal__summary,
html.ui-mode-classic_dark .pixleas-track-modal__timeline-wrap,
html.ui-mode-classic_dark .bosta-path-timeline__card,
html.ui-mode-dark_oled .pixleas-track-modal__summary,
html.ui-mode-dark_oled .pixleas-track-modal__timeline-wrap,
html.ui-mode-dark_oled .bosta-path-timeline__card,
html.ui-mode-dark_motion .pixleas-track-modal__summary,
html.ui-mode-dark_motion .pixleas-track-modal__timeline-wrap,
html.ui-mode-dark_motion .bosta-path-timeline__card {
  background: var(--pix-dark-panel-2) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
  box-shadow: none !important;
}
html.ui-mode-classic_dark .pixleas-track-modal__row,
html.ui-mode-dark_oled .pixleas-track-modal__row,
html.ui-mode-dark_motion .pixleas-track-modal__row {
  color: var(--pix-dark-text) !important;
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .pixleas-track-modal__track,
html.ui-mode-dark_oled .pixleas-track-modal__track,
html.ui-mode-dark_motion .pixleas-track-modal__track {
  background: var(--pix-dark-input, var(--pix-dark-panel)) !important;
  border-color: rgba(239, 83, 80, 0.55) !important;
  color: #fca5a5 !important;
}
html.ui-mode-classic_dark .bosta-path-timeline::before,
html.ui-mode-dark_oled .bosta-path-timeline::before,
html.ui-mode-dark_motion .bosta-path-timeline::before {
  background: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .bosta-path-timeline__dot,
html.ui-mode-dark_oled .bosta-path-timeline__dot,
html.ui-mode-dark_motion .bosta-path-timeline__dot {
  background: #64748b !important;
  border-color: var(--pix-dark-panel-2) !important;
  box-shadow: 0 0 0 2px var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .bosta-path-timeline__item.is-done .bosta-path-timeline__dot,
html.ui-mode-dark_oled .bosta-path-timeline__item.is-done .bosta-path-timeline__dot,
html.ui-mode-dark_motion .bosta-path-timeline__item.is-done .bosta-path-timeline__dot {
  background: #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35) !important;
}
html.ui-mode-classic_dark .bosta-path-timeline__item.is-current .bosta-path-timeline__dot,
html.ui-mode-dark_oled .bosta-path-timeline__item.is-current .bosta-path-timeline__dot,
html.ui-mode-dark_motion .bosta-path-timeline__item.is-current .bosta-path-timeline__dot {
  background: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4) !important;
}
html.ui-mode-classic_dark .bosta-path-timeline__item.is-current .bosta-path-timeline__card,
html.ui-mode-dark_oled .bosta-path-timeline__item.is-current .bosta-path-timeline__card,
html.ui-mode-dark_motion .bosta-path-timeline__item.is-current .bosta-path-timeline__card {
  background: rgba(56, 189, 248, 0.12) !important;
  border-inline-start-color: #38bdf8 !important;
}
html.ui-mode-classic_dark .bosta-path-timeline__item.is-done .bosta-path-timeline__card,
html.ui-mode-dark_oled .bosta-path-timeline__item.is-done .bosta-path-timeline__card,
html.ui-mode-dark_motion .bosta-path-timeline__item.is-done .bosta-path-timeline__card {
  border-inline-start-color: #22c55e !important;
}
html.ui-mode-classic_dark .bosta-path-timeline__card-head small,
html.ui-mode-classic_dark .bosta-path-timeline__meta,
html.ui-mode-dark_oled .bosta-path-timeline__card-head small,
html.ui-mode-dark_oled .bosta-path-timeline__meta,
html.ui-mode-dark_motion .bosta-path-timeline__card-head small,
html.ui-mode-dark_motion .bosta-path-timeline__meta {
  color: var(--pix-dark-muted) !important;
}
html.ui-mode-classic_dark .bosta-path-timeline__note,
html.ui-mode-dark_oled .bosta-path-timeline__note,
html.ui-mode-dark_motion .bosta-path-timeline__note {
  background: var(--pix-dark-input, var(--pix-dark-panel)) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-muted) !important;
}
html.ui-mode-classic_dark .pixleas-track-modal :is(.alert-warning, .alert-info),
html.ui-mode-dark_oled .pixleas-track-modal :is(.alert-warning, .alert-info),
html.ui-mode-dark_motion .pixleas-track-modal :is(.alert-warning, .alert-info) {
  background: rgba(234, 179, 8, 0.12) !important;
  border-color: rgba(234, 179, 8, 0.35) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pixleas-track-modal .alert-info,
html.ui-mode-dark_oled .pixleas-track-modal .alert-info,
html.ui-mode-dark_motion .pixleas-track-modal .alert-info {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}
html.ui-mode-classic_dark .pixleas-track-modal .badge,
html.ui-mode-dark_oled .pixleas-track-modal .badge,
html.ui-mode-dark_motion .pixleas-track-modal .badge {
  background: var(--pix-dark-panel) !important;
  color: var(--pix-dark-text) !important;
  border: 1px solid var(--pix-dark-border);
}
html.ui-mode-classic_dark .pixleas-track-modal :is(.btn-default, .btn.btn-default),
html.ui-mode-dark_oled .pixleas-track-modal :is(.btn-default, .btn.btn-default),
html.ui-mode-dark_motion .pixleas-track-modal :is(.btn-default, .btn.btn-default) {
  background: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-dark_motion .view_modal .pixleas-track-modal__summary,
html.ui-mode-dark_motion .view_modal .pixleas-track-modal__timeline-wrap,
html.ui-mode-dark_motion .view_modal .bosta-path-timeline__card {
  border-radius: 14px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.ui-mode-classic_dark .box-title,
html.ui-mode-classic_dark .content-header h1,
html.ui-mode-classic_dark .content h1,
html.ui-mode-classic_dark .content h2,
html.ui-mode-classic_dark .content h3,
html.ui-mode-classic_dark .content h4,
html.ui-mode-classic_dark label,
html.ui-mode-classic_dark .control-label,
html.ui-mode-classic_dark .pix-filter-label,
html.ui-mode-classic_dark .pix-filter-title,
html.ui-mode-classic_dark .help-block,
html.ui-mode-classic_dark .text-muted,
html.ui-mode-dark_oled .box-title,
html.ui-mode-dark_oled .content-header h1,
html.ui-mode-dark_oled .content h1,
html.ui-mode-dark_oled .content h2,
html.ui-mode-dark_oled .content h3,
html.ui-mode-dark_oled .content h4,
html.ui-mode-dark_oled label,
html.ui-mode-dark_oled .control-label,
html.ui-mode-dark_oled .pix-filter-label,
html.ui-mode-dark_oled .pix-filter-title,
html.ui-mode-dark_oled .help-block,
html.ui-mode-dark_oled .text-muted,
html.ui-mode-dark_motion .box-title,
html.ui-mode-dark_motion .content-header h1,
html.ui-mode-dark_motion .content h1,
html.ui-mode-dark_motion .content h2,
html.ui-mode-dark_motion .content h3,
html.ui-mode-dark_motion .content h4,
html.ui-mode-dark_motion label,
html.ui-mode-dark_motion .control-label,
html.ui-mode-dark_motion .pix-filter-label,
html.ui-mode-dark_motion .pix-filter-title,
html.ui-mode-dark_motion .help-block,
html.ui-mode-dark_motion .text-muted {
  color: var(--pix-dark-text) !important;
}

html.ui-mode-classic_dark .help-block,
html.ui-mode-classic_dark .text-muted,
html.ui-mode-dark_oled .help-block,
html.ui-mode-dark_oled .text-muted,
html.ui-mode-dark_motion .help-block,
html.ui-mode-dark_motion .text-muted {
  color: var(--pix-dark-muted) !important;
}

/* Forms */
html.ui-mode-classic_dark .form-control,
html.ui-mode-classic_dark .select2-container--default .select2-selection--single,
html.ui-mode-classic_dark .select2-container--default .select2-selection--multiple,
html.ui-mode-classic_dark textarea,
html.ui-mode-classic_dark input[type="text"],
html.ui-mode-classic_dark input[type="number"],
html.ui-mode-classic_dark input[type="email"],
html.ui-mode-classic_dark input[type="password"],
html.ui-mode-classic_dark input[type="search"],
html.ui-mode-dark_oled .form-control,
html.ui-mode-dark_oled .select2-container--default .select2-selection--single,
html.ui-mode-dark_oled .select2-container--default .select2-selection--multiple,
html.ui-mode-dark_oled textarea,
html.ui-mode-dark_oled input[type="text"],
html.ui-mode-dark_oled input[type="number"],
html.ui-mode-dark_oled input[type="email"],
html.ui-mode-dark_oled input[type="password"],
html.ui-mode-dark_oled input[type="search"],
html.ui-mode-dark_motion .form-control,
html.ui-mode-dark_motion .select2-container--default .select2-selection--single,
html.ui-mode-dark_motion .select2-container--default .select2-selection--multiple,
html.ui-mode-dark_motion textarea,
html.ui-mode-dark_motion input[type="text"],
html.ui-mode-dark_motion input[type="number"],
html.ui-mode-dark_motion input[type="email"],
html.ui-mode-dark_motion input[type="password"],
html.ui-mode-dark_motion input[type="search"] {
  background: var(--pix-dark-input) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .select2-container--default .select2-selection--single .select2-selection__rendered,
html.ui-mode-dark_oled .select2-container--default .select2-selection--single .select2-selection__rendered,
html.ui-mode-dark_motion .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .select2-dropdown,
html.ui-mode-dark_oled .select2-dropdown,
html.ui-mode-dark_motion .select2-dropdown {
  background: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .select2-results__option,
html.ui-mode-dark_oled .select2-results__option,
html.ui-mode-dark_motion .select2-results__option {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .select2-results__option--highlighted[aria-selected],
html.ui-mode-dark_oled .select2-results__option--highlighted[aria-selected],
html.ui-mode-dark_motion .select2-results__option--highlighted[aria-selected] {
  background: var(--pix-dark-hover) !important;
  color: #fff !important;
}

/* Tables / DataTables */
html.ui-mode-classic_dark .table > thead > tr > th,
html.ui-mode-classic_dark table.dataTable thead th,
html.ui-mode-dark_oled .table > thead > tr > th,
html.ui-mode-dark_oled table.dataTable thead th,
html.ui-mode-dark_motion .table > thead > tr > th,
html.ui-mode-dark_motion table.dataTable thead th {
  background: var(--pix-dark-panel-2) !important;
  color: var(--pix-dark-text) !important;
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .table > tbody > tr > td,
html.ui-mode-classic_dark table.dataTable tbody td,
html.ui-mode-dark_oled .table > tbody > tr > td,
html.ui-mode-dark_oled table.dataTable tbody td,
html.ui-mode-dark_motion .table > tbody > tr > td,
html.ui-mode-dark_motion table.dataTable tbody td {
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
  background: transparent !important;
}
html.ui-mode-classic_dark .table-striped > tbody > tr:nth-of-type(odd),
html.ui-mode-dark_oled .table-striped > tbody > tr:nth-of-type(odd),
html.ui-mode-dark_motion .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}
/* HRM/Essentials section headers use th.bg-light-gray inside tbody */
html.ui-mode-classic_dark .bg-light-gray,
html.ui-mode-dark_oled .bg-light-gray,
html.ui-mode-dark_motion .bg-light-gray,
html.ui-mode-classic_dark .table > tbody > tr > th,
html.ui-mode-dark_oled .table > tbody > tr > th,
html.ui-mode-dark_motion .table > tbody > tr > th {
  background-color: var(--pix-dark-panel-2) !important;
  color: var(--pix-dark-text) !important;
  border-color: var(--pix-dark-border) !important;
}

/* Contact view / Advanced Ledger — AdminLTE .bg-gray rows + footer totals stay light otherwise */
html.ui-mode-classic_dark .bg-gray,
html.ui-mode-dark_oled .bg-gray,
html.ui-mode-dark_motion .bg-gray,
html.ui-mode-classic_dark tr.bg-gray,
html.ui-mode-dark_oled tr.bg-gray,
html.ui-mode-dark_motion tr.bg-gray,
html.ui-mode-classic_dark tr.footer-total,
html.ui-mode-dark_oled tr.footer-total,
html.ui-mode-dark_motion tr.footer-total {
  background: var(--pix-dark-panel-2) !important;
  background-color: var(--pix-dark-panel-2) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark tr.bg-gray > :is(th, td),
html.ui-mode-dark_oled tr.bg-gray > :is(th, td),
html.ui-mode-dark_motion tr.bg-gray > :is(th, td),
html.ui-mode-classic_dark tr.footer-total > :is(th, td),
html.ui-mode-dark_oled tr.footer-total > :is(th, td),
html.ui-mode-dark_motion tr.footer-total > :is(th, td),
html.ui-mode-classic_dark .table > tfoot > tr > :is(th, td),
html.ui-mode-dark_oled .table > tfoot > tr > :is(th, td),
html.ui-mode-dark_motion .table > tfoot > tr > :is(th, td) {
  background-color: transparent !important;
  color: var(--pix-dark-text) !important;
  border-color: var(--pix-dark-border) !important;
}

/* Contact ledger / Bosta hard-coded light greys on inline styles */
html.ui-mode-classic_dark [style*="background-color: #f1f5f9"],
html.ui-mode-classic_dark [style*="background-color:#f1f5f9"],
html.ui-mode-classic_dark [style*="background-color: #f4f4f4"],
html.ui-mode-classic_dark [style*="background-color:#f4f4f4"],
html.ui-mode-classic_dark [style*="background-color: #fcf8e3"],
html.ui-mode-classic_dark [style*="background-color:#fcf8e3"],
html.ui-mode-classic_dark [style*="background-color: #f8f9fa"],
html.ui-mode-classic_dark [style*="background-color:#f8f9fa"],
html.ui-mode-dark_oled [style*="background-color: #f1f5f9"],
html.ui-mode-dark_oled [style*="background-color:#f1f5f9"],
html.ui-mode-dark_oled [style*="background-color: #f4f4f4"],
html.ui-mode-dark_oled [style*="background-color:#f4f4f4"],
html.ui-mode-dark_oled [style*="background-color: #fcf8e3"],
html.ui-mode-dark_oled [style*="background-color:#fcf8e3"],
html.ui-mode-dark_oled [style*="background-color: #f8f9fa"],
html.ui-mode-dark_oled [style*="background-color:#f8f9fa"],
html.ui-mode-dark_motion [style*="background-color: #f1f5f9"],
html.ui-mode-dark_motion [style*="background-color:#f1f5f9"],
html.ui-mode-dark_motion [style*="background-color: #f4f4f4"],
html.ui-mode-dark_motion [style*="background-color:#f4f4f4"],
html.ui-mode-dark_motion [style*="background-color: #fcf8e3"],
html.ui-mode-dark_motion [style*="background-color:#fcf8e3"],
html.ui-mode-dark_motion [style*="background-color: #f8f9fa"],
html.ui-mode-dark_motion [style*="background-color:#f8f9fa"] {
  background-color: var(--pix-dark-panel-2) !important;
  color: var(--pix-dark-text) !important;
}

/* Beat page-local .table th { background: #f8f9fa } (Bosta shipments, etc.) */
html.ui-mode-classic_dark .table th,
html.ui-mode-dark_oled .table th,
html.ui-mode-dark_motion .table th {
  background-color: var(--pix-dark-panel-2) !important;
  border-bottom-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}

/* Contact ledger page CSS forces light DataTables / payments headers */
html.ui-mode-classic_dark .dataTable thead th,
html.ui-mode-dark_oled .dataTable thead th,
html.ui-mode-dark_motion .dataTable thead th,
html.ui-mode-classic_dark #contact_payments_table thead th,
html.ui-mode-dark_oled #contact_payments_table thead th,
html.ui-mode-dark_motion #contact_payments_table thead th {
  background-color: var(--pix-dark-panel-2) !important;
  color: var(--pix-dark-text) !important;
  border-bottom-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .dataTable tbody td,
html.ui-mode-dark_oled .dataTable tbody td,
html.ui-mode-dark_motion .dataTable tbody td,
html.ui-mode-classic_dark #contact_payments_table tbody td,
html.ui-mode-dark_oled #contact_payments_table tbody td,
html.ui-mode-dark_motion #contact_payments_table tbody td {
  color: var(--pix-dark-text) !important;
  border-bottom-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark #contact_payments_table tbody td .paid-amount,
html.ui-mode-dark_oled #contact_payments_table tbody td .paid-amount,
html.ui-mode-dark_motion #contact_payments_table tbody td .paid-amount {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .dt-buttons .btn,
html.ui-mode-dark_oled .dt-buttons .btn,
html.ui-mode-dark_motion .dt-buttons .btn {
  background-color: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .dt-buttons .btn:hover,
html.ui-mode-dark_oled .dt-buttons .btn:hover,
html.ui-mode-dark_motion .dt-buttons .btn:hover {
  background-color: var(--pix-dark-hover) !important;
  color: #fff !important;
  border-color: var(--pix-dark-accent) !important;
}
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_length,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_filter,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_info,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_length,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_filter,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_info,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_length,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_filter,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_info,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate {
  color: var(--pix-dark-muted) !important;
}

/* DataTables + Bootstrap / Laravel pagination buttons (all tables)
   Marker: pixleas_ui_datatables_pagination_dark_v1 */
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button a,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button a,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button a,
html.ui-mode-classic_dark .pagination > li > a,
html.ui-mode-classic_dark .pagination > li > span,
html.ui-mode-dark_oled .pagination > li > a,
html.ui-mode-dark_oled .pagination > li > span,
html.ui-mode-dark_motion .pagination > li > a,
html.ui-mode-dark_motion .pagination > li > span,
html.ui-mode-classic_dark .page-link,
html.ui-mode-dark_oled .page-link,
html.ui-mode-dark_motion .page-link {
  background: var(--pix-dark-panel-2) !important;
  background-color: var(--pix-dark-panel-2) !important;
  border: 1px solid var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
  box-shadow: none !important;
  outline: none !important;
}
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover a,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button:hover a,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button:hover a,
html.ui-mode-classic_dark .pagination > li > a:hover,
html.ui-mode-classic_dark .pagination > li > span:hover,
html.ui-mode-dark_oled .pagination > li > a:hover,
html.ui-mode-dark_oled .pagination > li > span:hover,
html.ui-mode-dark_motion .pagination > li > a:hover,
html.ui-mode-dark_motion .pagination > li > span:hover,
html.ui-mode-classic_dark .page-link:hover,
html.ui-mode-dark_oled .page-link:hover,
html.ui-mode-dark_motion .page-link:hover {
  background: var(--pix-dark-hover) !important;
  background-color: var(--pix-dark-hover) !important;
  border-color: var(--pix-dark-accent, #38bdf8) !important;
  color: #fff !important;
}
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button.active,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button.active,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button.active,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button.active a,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button.active a,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button.active a,
html.ui-mode-classic_dark .pagination > .active > a,
html.ui-mode-classic_dark .pagination > .active > span,
html.ui-mode-classic_dark .pagination > .active > a:hover,
html.ui-mode-classic_dark .pagination > .active > span:hover,
html.ui-mode-dark_oled .pagination > .active > a,
html.ui-mode-dark_oled .pagination > .active > span,
html.ui-mode-dark_oled .pagination > .active > a:hover,
html.ui-mode-dark_oled .pagination > .active > span:hover,
html.ui-mode-dark_motion .pagination > .active > a,
html.ui-mode-dark_motion .pagination > .active > span,
html.ui-mode-dark_motion .pagination > .active > a:hover,
html.ui-mode-dark_motion .pagination > .active > span:hover,
html.ui-mode-classic_dark .page-item.active .page-link,
html.ui-mode-dark_oled .page-item.active .page-link,
html.ui-mode-dark_motion .page-item.active .page-link {
  background: var(--pix-dark-accent, #38bdf8) !important;
  background-color: var(--pix-dark-accent, #38bdf8) !important;
  border-color: var(--pix-dark-accent, #38bdf8) !important;
  color: #0b1220 !important;
  font-weight: 700 !important;
}
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled a,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button.disabled a,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button.disabled a,
html.ui-mode-classic_dark .pagination > .disabled > a,
html.ui-mode-classic_dark .pagination > .disabled > span,
html.ui-mode-dark_oled .pagination > .disabled > a,
html.ui-mode-dark_oled .pagination > .disabled > span,
html.ui-mode-dark_motion .pagination > .disabled > a,
html.ui-mode-dark_motion .pagination > .disabled > span,
html.ui-mode-classic_dark .page-item.disabled .page-link,
html.ui-mode-dark_oled .page-item.disabled .page-link,
html.ui-mode-dark_motion .page-item.disabled .page-link {
  background: var(--pix-dark-panel) !important;
  background-color: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-muted) !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_length select,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_length select,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_length select,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_filter input,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_filter input,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_filter input {
  background: var(--pix-dark-input, var(--pix-dark-panel-2)) !important;
  border: 1px solid var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_length label,
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_filter label,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_length label,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_filter label,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_length label,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_filter label {
  color: var(--pix-dark-muted) !important;
}
/* DataTables default light button gradient override */
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button {
  background-image: none !important;
}
html.ui-mode-classic_dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.ui-mode-dark_oled .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.ui-mode-dark_motion .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-image: none !important;
}

/* Tabs */
html.ui-mode-classic_dark .nav-tabs-custom > .nav-tabs > li > a,
html.ui-mode-dark_oled .nav-tabs-custom > .nav-tabs > li > a,
html.ui-mode-dark_motion .nav-tabs-custom > .nav-tabs > li > a {
  color: var(--pix-dark-muted) !important;
}
html.ui-mode-classic_dark .nav-tabs-custom > .nav-tabs > li.active > a,
html.ui-mode-dark_oled .nav-tabs-custom > .nav-tabs > li.active > a,
html.ui-mode-dark_motion .nav-tabs-custom > .nav-tabs > li.active > a {
  background: var(--pix-dark-panel) !important;
  color: #fff !important;
  border-bottom-color: var(--pix-dark-accent) !important;
}
html.ui-mode-classic_dark .nav-tabs-custom > .tab-content,
html.ui-mode-dark_oled .nav-tabs-custom > .tab-content,
html.ui-mode-dark_motion .nav-tabs-custom > .tab-content {
  background: var(--pix-dark-panel) !important;
  color: var(--pix-dark-text) !important;
}

/* Module header / footer / pills */
html.ui-mode-classic_dark .cp-module-header,
html.ui-mode-dark_oled .cp-module-header,
html.ui-mode-dark_motion .cp-module-header {
  background: var(--pix-dark-header) !important;
  border-color: var(--pix-dark-border) !important;
  color: #fff !important;
}
html.ui-mode-classic_dark .cp-module-header h2,
html.ui-mode-classic_dark .cp-module-subtitle,
html.ui-mode-dark_oled .cp-module-header h2,
html.ui-mode-dark_oled .cp-module-subtitle,
html.ui-mode-dark_motion .cp-module-header h2,
html.ui-mode-dark_motion .cp-module-subtitle {
  color: #fff !important;
}
html.ui-mode-classic_dark .main-footer,
html.ui-mode-dark_oled .main-footer,
html.ui-mode-dark_motion .main-footer,
html.ui-mode-classic_dark footer,
html.ui-mode-dark_oled footer,
html.ui-mode-dark_motion footer {
  background: var(--pix-dark-sidebar) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-muted) !important;
}
html.ui-mode-classic_dark .pix-pill,
html.ui-mode-dark_oled .pix-pill,
html.ui-mode-dark_motion .pix-pill {
  border-color: var(--pix-dark-border);
  color: var(--pix-dark-text);
  background: var(--pix-dark-input);
}
html.ui-mode-classic_dark .pix-pill.active,
html.ui-mode-dark_oled .pix-pill.active,
html.ui-mode-dark_motion .pix-pill.active {
  background: color-mix(in srgb, var(--pix-dark-accent) 22%, transparent);
  border-color: var(--pix-dark-accent);
  color: #fff;
}
html.ui-mode-classic_dark .pix-filter-panel .contact-format-toggles,
html.ui-mode-dark_oled .pix-filter-panel .contact-format-toggles,
html.ui-mode-dark_motion .pix-filter-panel .contact-format-toggles {
  background: var(--pix-dark-input) !important;
}
html.ui-mode-classic_dark .pix-filter-panel .contact-format-toggles .tw-dw-btn,
html.ui-mode-dark_oled .pix-filter-panel .contact-format-toggles .tw-dw-btn,
html.ui-mode-dark_motion .pix-filter-panel .contact-format-toggles .tw-dw-btn {
  color: var(--pix-dark-muted) !important;
}
html.ui-mode-classic_dark .pix-filter-panel .contact-format-toggles .tw-dw-btn.active,
html.ui-mode-dark_oled .pix-filter-panel .contact-format-toggles .tw-dw-btn.active,
html.ui-mode-dark_motion .pix-filter-panel .contact-format-toggles .tw-dw-btn.active {
  background: var(--pix-dark-panel) !important;
  color: #fff !important;
}

/* User dropdown in header stays readable */
html.ui-mode-classic_dark .tw-dw-dropdown ul,
html.ui-mode-dark_oled .tw-dw-dropdown ul,
html.ui-mode-dark_motion .tw-dw-dropdown ul {
  background: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .tw-dw-dropdown ul a,
html.ui-mode-classic_dark .tw-dw-dropdown ul p,
html.ui-mode-dark_oled .tw-dw-dropdown ul a,
html.ui-mode-dark_oled .tw-dw-dropdown ul p,
html.ui-mode-dark_motion .tw-dw-dropdown ul a,
html.ui-mode-dark_motion .tw-dw-dropdown ul p {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .tw-dw-dropdown ul a:hover,
html.ui-mode-dark_oled .tw-dw-dropdown ul a:hover,
html.ui-mode-dark_motion .tw-dw-dropdown ul a:hover {
  background: var(--pix-dark-hover) !important;
}

/* ========== classic_dark tokens ========== */
html.ui-mode-classic_dark {
  --pix-dark-bg: #0f172a;
  --pix-dark-bg-image: none;
  --pix-dark-sidebar: #111827;
  --pix-dark-panel: #1e293b;
  --pix-dark-panel-2: #243044;
  --pix-dark-input: #0b1220;
  --pix-dark-border: #334155;
  --pix-dark-text: #e2e8f0;
  --pix-dark-muted: #94a3b8;
  --pix-dark-hover: #334155;
  --pix-dark-accent: #14b8a6;
  --pix-dark-header: linear-gradient(135deg, #0f172a, #1e293b);
  --pix-dark-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
html.ui-mode-classic_dark .box,
html.ui-mode-classic_dark .pix-filter-panel,
html.ui-mode-classic_dark .nav-tabs-custom {
  border-radius: 8px !important;
}

/* ========== glass3d (light + motion) ========== */
html.ui-mode-glass3d body,
html.ui-mode-glass3d :is(#scrollable-container, main, .content-wrapper) {
  background: linear-gradient(160deg, #e8eef7 0%, #f4f7fb 45%, #eef2f7 100%) !important;
}
html.ui-mode-glass3d :is(#scrollable-container, main, .content-wrapper) .box,
html.ui-mode-glass3d .pix-filter-panel,
html.ui-mode-glass3d .contact-filter-panel,
html.ui-mode-glass3d .filter-box {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Compact Option-A header stays transparent; glass applies to tabs/panels, not title bar */
html.ui-mode-glass3d .cp-module-header,
html.ui-mode-glass3d .pix-module-header {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.ui-mode-glass3d .tw-dw-btn,
html.ui-mode-glass3d .btn {
  border-radius: 10px !important;
}
html.ui-mode-glass3d .pix-pill {
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.7);
  color: #334155;
}
html.ui-mode-glass3d .pix-pill.active {
  background: color-mix(in srgb, var(--theme-700, #0f766e) 16%, #fff);
  border-color: var(--theme-700, #0f766e);
  color: var(--theme-800, #115e59);
}

/* ========== dark_motion tokens + glass panels ========== */
html.ui-mode-dark_motion {
  --pix-dark-bg: #070b14;
  --pix-dark-bg-image: radial-gradient(1200px 600px at 10% -10%, #16324a 0%, #0b1220 45%, #070b14 100%);
  --pix-dark-sidebar: #07111f;
  --pix-dark-panel: rgba(15, 23, 42, 0.88);
  --pix-dark-panel-2: rgba(30, 41, 59, 0.95);
  --pix-dark-input: rgba(2, 6, 23, 0.85);
  --pix-dark-border: rgba(56, 189, 248, 0.28);
  --pix-dark-text: #e2e8f0;
  --pix-dark-muted: #93c5fd;
  --pix-dark-hover: rgba(14, 165, 233, 0.28);
  --pix-dark-accent: #38bdf8;
  --pix-dark-header: linear-gradient(135deg, #0c4a6e, #082f49);
  --pix-dark-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(34, 211, 238, 0.08);
}
html.ui-mode-dark_motion .box,
html.ui-mode-dark_motion .pix-filter-panel,
html.ui-mode-dark_motion .nav-tabs-custom,
html.ui-mode-dark_motion .modal-content {
  border-radius: 16px !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ========== modern ========== */
html.ui-mode-modern body,
html.ui-mode-modern :is(#scrollable-container, main, .content-wrapper) {
  background: #f8fafc !important;
}
html.ui-mode-modern :is(#scrollable-container, main, .content-wrapper) .box,
html.ui-mode-modern .pix-filter-panel,
html.ui-mode-modern .contact-filter-panel,
html.ui-mode-modern .filter-box {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
html.ui-mode-modern .form-control {
  border-radius: 8px !important;
  border-color: #cbd5e1 !important;
  height: 38px;
}
html.ui-mode-modern .tw-dw-btn,
html.ui-mode-modern .btn {
  border-radius: 8px !important;
  font-weight: 600;
}
html.ui-mode-modern .pix-pill {
  border-color: #cbd5e1;
  background: #fff;
  color: #475569;
}
html.ui-mode-modern .pix-pill.active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
}
html.ui-mode-modern .cp-module-header {
  border-radius: 10px !important;
}

/* ========== fresh ========== */
html.ui-mode-fresh body,
html.ui-mode-fresh :is(#scrollable-container, main, .content-wrapper) {
  background: #f4f2ef !important;
}
html.ui-mode-fresh :is(#scrollable-container, main, .content-wrapper) .box,
html.ui-mode-fresh .pix-filter-panel,
html.ui-mode-fresh .contact-filter-panel,
html.ui-mode-fresh .filter-box {
  background: #f7f5f2 !important;
  border: 1px solid #e7e2db !important;
  border-radius: 18px !important;
  box-shadow: 8px 8px 16px #ddd6ce, -8px -8px 16px #ffffff !important;
}
html.ui-mode-fresh .form-control {
  border-radius: 12px !important;
  background: #f7f5f2 !important;
  border: 1px solid #e7e2db !important;
  box-shadow: inset 3px 3px 6px #e4ddd4, inset -3px -3px 6px #fff;
}
html.ui-mode-fresh .pix-pill {
  border-radius: 999px;
  border-color: #e7e2db;
  background: #f7f5f2;
  color: #44403c;
  box-shadow: 3px 3px 6px #e4ddd4, -3px -3px 6px #fff;
}
html.ui-mode-fresh .pix-pill.active {
  background: #fff7ed;
  border-color: #f97316;
  color: #c2410c;
  box-shadow: inset 2px 2px 4px #e7e2db;
}
html.ui-mode-fresh .cp-module-header {
  background: linear-gradient(135deg, #292524, #1c1917) !important;
  border-radius: 18px !important;
}

/* ========== dark_oled tokens ========== */
html.ui-mode-dark_oled {
  --pix-dark-bg: #000000;
  --pix-dark-bg-image: none;
  --pix-dark-sidebar: #050505;
  --pix-dark-panel: #0a0a0a;
  --pix-dark-panel-2: #111111;
  --pix-dark-input: #111111;
  --pix-dark-border: #262626;
  --pix-dark-text: #e5e7eb;
  --pix-dark-muted: #9ca3af;
  --pix-dark-hover: rgba(34, 211, 238, 0.18);
  --pix-dark-accent: #22d3ee;
  --pix-dark-header: linear-gradient(135deg, #050505, #0a0a0a);
  --pix-dark-shadow: 0 0 0 1px rgba(34, 211, 238, 0.1), 0 8px 24px rgba(0, 0, 0, 0.85);
}

/* Remap Phase-1 surface tokens so POS empty cart / shared components follow dark UI
   Marker: pixleas_ui_surface_tokens_dark_v1 */
html.ui-mode-classic_dark,
html.ui-mode-dark_oled,
html.ui-mode-dark_motion {
  --pix-surface: var(--pix-dark-panel);
  --pix-surface-muted: var(--pix-dark-panel-2);
  --pix-border: var(--pix-dark-border);
  --pix-text: var(--pix-dark-text);
  --pix-text-muted: var(--pix-dark-muted);
  --pix-shadow: var(--pix-dark-shadow);
  --pix-shadow-lg: var(--pix-dark-shadow);
  --pix-box-header-bg: var(--pix-dark-panel-2);
  --pix-modal-header-bg: var(--pix-dark-panel-2);
  --pix-dt-scroll-bg: var(--pix-dark-panel-2);
}
html.ui-mode-dark_oled .box,
html.ui-mode-dark_oled .pix-filter-panel,
html.ui-mode-dark_oled .nav-tabs-custom {
  border-radius: 12px !important;
}
html.ui-mode-dark_oled .table > thead > tr > th,
html.ui-mode-dark_oled table.dataTable thead th {
  color: #67e8f9 !important;
}

/* ========== compact_retail ========== */
html.ui-mode-compact_retail body,
html.ui-mode-compact_retail :is(#scrollable-container, main, .content-wrapper) {
  background: #f3f4f6 !important;
}
html.ui-mode-compact_retail :is(#scrollable-container, main, .content-wrapper) .box,
html.ui-mode-compact_retail .pix-filter-panel,
html.ui-mode-compact_retail .contact-filter-panel,
html.ui-mode-compact_retail .filter-box {
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  padding: 12px !important;
}
html.ui-mode-compact_retail :is(#scrollable-container, main, .content-wrapper) .box-header,
html.ui-mode-compact_retail .cp-module-header {
  padding: 10px 14px !important;
}
html.ui-mode-compact_retail .cp-module-header h2 {
  font-size: 1.2rem !important;
}
html.ui-mode-compact_retail .form-control {
  height: 34px !important;
  border-radius: 4px !important;
  font-size: 13px;
}
html.ui-mode-compact_retail .tw-dw-btn,
html.ui-mode-compact_retail .btn {
  min-height: 32px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
}
html.ui-mode-compact_retail .pix-pill {
  padding: 4px 10px;
  font-size: 11px;
  border-color: #d1d5db;
}
html.ui-mode-compact_retail .pix-pill.active {
  background: #ecfdf5;
  border-color: #10b981;
  color: #047857;
}
html.ui-mode-compact_retail .table > thead > tr > th,
html.ui-mode-compact_retail .table > tbody > tr > td {
  padding: 8px 10px !important;
  font-size: 13px !important;
}

/* ========== soft_saas ========== */
html.ui-mode-soft_saas body,
html.ui-mode-soft_saas :is(#scrollable-container, main, .content-wrapper) {
  background: #f1f5f9 !important;
}
html.ui-mode-soft_saas :is(#scrollable-container, main, .content-wrapper) .box,
html.ui-mode-soft_saas .pix-filter-panel,
html.ui-mode-soft_saas .contact-filter-panel,
html.ui-mode-soft_saas .filter-box {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  padding: 20px !important;
}
html.ui-mode-soft_saas .form-control {
  border-radius: 12px !important;
  border-color: #e2e8f0 !important;
  height: 40px;
}
html.ui-mode-soft_saas .tw-dw-btn,
html.ui-mode-soft_saas .btn {
  border-radius: 12px !important;
}
html.ui-mode-soft_saas .pix-pill {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #475569;
}
html.ui-mode-soft_saas .pix-pill.active {
  background: #e0e7ff;
  border-color: #6366f1;
  color: #4338ca;
}
html.ui-mode-soft_saas .cp-module-header {
  border-radius: 20px !important;
  background: linear-gradient(135deg, #312e81, #1e1b4b) !important;
}

/* ========== Motion (glass3d + dark_motion only) ========== */
@media (prefers-reduced-motion: no-preference) {
  html.ui-mode-glass3d :is(#scrollable-container, main, .content-wrapper) .box,
  html.ui-mode-glass3d .pix-filter-panel,
  html.ui-mode-glass3d .contact-filter-panel,
  html.ui-mode-glass3d .filter-box,
  html.ui-mode-glass3d .cp-module-header,
  html.ui-mode-glass3d .offer-tools-header,
  html.ui-mode-glass3d .small-box,
  html.ui-mode-dark_motion :is(#scrollable-container, main, .content-wrapper) .box,
  html.ui-mode-dark_motion .pix-filter-panel,
  html.ui-mode-dark_motion .contact-filter-panel,
  html.ui-mode-dark_motion .filter-box,
  html.ui-mode-dark_motion .cp-module-header,
  html.ui-mode-dark_motion .offer-tools-header,
  html.ui-mode-dark_motion .small-box,
  html.ui-mode-dark_motion :is(.vd-stat-card, .promo-card, .ap-stat-card, .pd-stat-card, .premium-card, .analytics-stat-card) {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }

  html.ui-mode-glass3d :is(#scrollable-container, main, .content-wrapper) .box:hover,
  html.ui-mode-glass3d .pix-filter-panel:hover,
  html.ui-mode-glass3d .contact-filter-panel:hover,
  html.ui-mode-glass3d .filter-box:hover,
  html.ui-mode-glass3d .small-box:hover,
  html.ui-mode-dark_motion :is(#scrollable-container, main, .content-wrapper) .box:hover,
  html.ui-mode-dark_motion .pix-filter-panel:hover,
  html.ui-mode-dark_motion .contact-filter-panel:hover,
  html.ui-mode-dark_motion .filter-box:hover,
  html.ui-mode-dark_motion .small-box:hover,
  html.ui-mode-dark_motion :is(.vd-stat-card, .promo-card, .ap-stat-card, .pd-stat-card, .premium-card, .analytics-stat-card):hover {
    transform: translateY(-3px);
  }

  html.ui-mode-glass3d :is(#scrollable-container, main, .content-wrapper) .box:hover,
  html.ui-mode-glass3d .pix-filter-panel:hover,
  html.ui-mode-glass3d .contact-filter-panel:hover {
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }

  html.ui-mode-dark_motion :is(#scrollable-container, main, .content-wrapper) .box:hover,
  html.ui-mode-dark_motion .pix-filter-panel:hover,
  html.ui-mode-dark_motion .contact-filter-panel:hover {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 24px rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.35) !important;
  }

  html.ui-mode-glass3d .tw-dw-btn,
  html.ui-mode-glass3d .btn,
  html.ui-mode-glass3d .pix-pill,
  html.ui-mode-dark_motion .tw-dw-btn,
  html.ui-mode-dark_motion .btn,
  html.ui-mode-dark_motion .pix-pill {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }

  html.ui-mode-glass3d .tw-dw-btn:hover,
  html.ui-mode-glass3d .btn:hover,
  html.ui-mode-glass3d .pix-pill:hover,
  html.ui-mode-dark_motion .tw-dw-btn:hover,
  html.ui-mode-dark_motion .btn:hover,
  html.ui-mode-dark_motion .pix-pill:hover {
    transform: translateY(-1px);
  }

  html.ui-mode-glass3d .tw-dw-btn:active,
  html.ui-mode-glass3d .btn:active,
  html.ui-mode-glass3d .pix-pill:active,
  html.ui-mode-dark_motion .tw-dw-btn:active,
  html.ui-mode-dark_motion .btn:active,
  html.ui-mode-dark_motion .pix-pill:active {
    transform: scale(0.97);
  }

  html.ui-mode-glass3d .table tbody tr,
  html.ui-mode-dark_motion .table tbody tr {
    transition: background-color 0.15s ease, transform 0.15s ease;
  }

  html.ui-mode-glass3d .table tbody tr:hover,
  html.ui-mode-dark_motion .table tbody tr:hover {
    background-color: rgba(14, 165, 233, 0.06) !important;
  }

  /* Keep POS motion subtle */
  html.ui-mode-glass3d.aui-page-pos :is(#scrollable-container, main, .content-wrapper) .box:hover,
  html.ui-mode-dark_motion.aui-page-pos :is(#scrollable-container, main, .content-wrapper) .box:hover,
  body.lockscreen.ui-mode-glass3d :is(#scrollable-container, main, .content-wrapper) .box:hover,
  body.lockscreen.ui-mode-dark_motion :is(#scrollable-container, main, .content-wrapper) .box:hover {
    transform: none;
  }
}

/* Login / auth cards */
html.ui-mode-classic_dark .login-box,
html.ui-mode-dark_motion .login-box,
html.ui-mode-dark_oled .login-box {
  background: #1e293b;
  border-radius: 12px;
  color: #e2e8f0;
}

/* Dark UiModes: keep auth panel off pure #fff (matches app chrome) */
html.ui-mode-classic_dark .px-login-panel,
html.ui-mode-dark_oled .px-login-panel,
html.ui-mode-dark_motion .px-login-panel {
  --px-ink: #e2e8f0;
  --px-muted: #94a3b8;
  --px-panel: #1e293b;
  --px-line: rgba(148, 163, 184, 0.28);
  background: var(--px-panel) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45) !important;
  color: var(--px-ink);
}
html.ui-mode-classic_dark .px-login-panel h2,
html.ui-mode-dark_oled .px-login-panel h2,
html.ui-mode-dark_motion .px-login-panel h2 {
  color: var(--px-ink) !important;
}
html.ui-mode-classic_dark .px-login-field input[type="text"],
html.ui-mode-classic_dark .px-login-field input[type="password"],
html.ui-mode-dark_oled .px-login-field input[type="text"],
html.ui-mode-dark_oled .px-login-field input[type="password"],
html.ui-mode-dark_motion .px-login-field input[type="text"],
html.ui-mode-dark_motion .px-login-field input[type="password"] {
  background: #0f172a !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #e2e8f0 !important;
}
html.ui-mode-classic_dark .px-login-remember,
html.ui-mode-classic_dark .px-login-register,
html.ui-mode-classic_dark .px-login-forgot,
html.ui-mode-dark_oled .px-login-remember,
html.ui-mode-dark_oled .px-login-register,
html.ui-mode-dark_oled .px-login-forgot,
html.ui-mode-dark_motion .px-login-remember,
html.ui-mode-dark_motion .px-login-register,
html.ui-mode-dark_motion .px-login-forgot {
  color: #94a3b8 !important;
}

html.ui-mode-glass3d .login-box,
html.ui-mode-glass3d .px-login-panel {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
html.ui-mode-soft_saas .login-box,
html.ui-mode-modern .login-box,
html.ui-mode-soft_saas .px-login-panel,
html.ui-mode-modern .px-login-panel,
html.ui-mode-fresh .px-login-panel {
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

/* Auth page: no horizontal overflow on narrow viewports */
.px-auth-page,
.px-auth-main,
.px-login {
  max-width: 100%;
  box-sizing: border-box;
}
html.ui-mode-compact_retail .px-login-panel {
  padding: 1.1rem 1rem;
  border-radius: 12px;
}
html.ui-mode-compact_retail .px-login-field input[type="text"],
html.ui-mode-compact_retail .px-login-field input[type="password"],
html.ui-mode-compact_retail .px-login-submit {
  height: 42px;
}

/* ========== Dark fixes: export buttons / sidebar active / business settings ========== */
html.ui-mode-classic_dark .dt-buttons .dt-button,
html.ui-mode-classic_dark .buttons-html5,
html.ui-mode-classic_dark .buttons-print,
html.ui-mode-classic_dark .buttons-collection,
html.ui-mode-classic_dark .buttons-colvis,
html.ui-mode-classic_dark .buttons-excel,
html.ui-mode-classic_dark .buttons-csv,
html.ui-mode-classic_dark .buttons-pdf,
html.ui-mode-classic_dark .btn-default,
html.ui-mode-classic_dark a.btn-default,
html.ui-mode-classic_dark .tw-dw-btn-outline,
html.ui-mode-classic_dark .tw-dw-btn.tw-dw-btn-outline,
html.ui-mode-dark_oled .dt-buttons .dt-button,
html.ui-mode-dark_oled .buttons-html5,
html.ui-mode-dark_oled .buttons-print,
html.ui-mode-dark_oled .buttons-collection,
html.ui-mode-dark_oled .buttons-colvis,
html.ui-mode-dark_oled .buttons-excel,
html.ui-mode-dark_oled .buttons-csv,
html.ui-mode-dark_oled .buttons-pdf,
html.ui-mode-dark_oled .btn-default,
html.ui-mode-dark_oled a.btn-default,
html.ui-mode-dark_oled .tw-dw-btn-outline,
html.ui-mode-dark_oled .tw-dw-btn.tw-dw-btn-outline,
html.ui-mode-dark_motion .dt-buttons .dt-button,
html.ui-mode-dark_motion .buttons-html5,
html.ui-mode-dark_motion .buttons-print,
html.ui-mode-dark_motion .buttons-collection,
html.ui-mode-dark_motion .buttons-colvis,
html.ui-mode-dark_motion .buttons-excel,
html.ui-mode-dark_motion .buttons-csv,
html.ui-mode-dark_motion .buttons-pdf,
html.ui-mode-dark_motion .btn-default,
html.ui-mode-dark_motion a.btn-default,
html.ui-mode-dark_motion .tw-dw-btn-outline,
html.ui-mode-dark_motion .tw-dw-btn.tw-dw-btn-outline {
  background: var(--pix-dark-panel-2) !important;
  background-color: var(--pix-dark-panel-2) !important;
  color: #f8fafc !important;
  border: 1px solid var(--pix-dark-border) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
html.ui-mode-classic_dark .dt-buttons .dt-button:hover,
html.ui-mode-classic_dark .buttons-html5:hover,
html.ui-mode-classic_dark .btn-default:hover,
html.ui-mode-dark_oled .dt-buttons .dt-button:hover,
html.ui-mode-dark_oled .buttons-html5:hover,
html.ui-mode-dark_oled .btn-default:hover,
html.ui-mode-dark_motion .dt-buttons .dt-button:hover,
html.ui-mode-dark_motion .buttons-html5:hover,
html.ui-mode-dark_motion .btn-default:hover {
  background: var(--pix-dark-hover) !important;
  color: #fff !important;
  border-color: var(--pix-dark-accent) !important;
}
html.ui-mode-classic_dark .dt-buttons .dt-button *,
html.ui-mode-classic_dark .buttons-html5 *,
html.ui-mode-dark_oled .dt-buttons .dt-button *,
html.ui-mode-dark_oled .buttons-html5 *,
html.ui-mode-dark_motion .dt-buttons .dt-button *,
html.ui-mode-dark_motion .buttons-html5 * {
  color: inherit !important;
}

/* Sidebar parent open / active — light-on-dark, readable */
html.ui-mode-classic_dark .side-bar .sidebar-nav-link,
html.ui-mode-classic_dark #side-bar .sidebar-nav-link,
html.ui-mode-dark_oled .side-bar .sidebar-nav-link,
html.ui-mode-dark_oled #side-bar .sidebar-nav-link,
html.ui-mode-dark_motion .side-bar .sidebar-nav-link,
html.ui-mode-dark_motion #side-bar .sidebar-nav-link {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .side-bar .sidebar-icon-wrap,
html.ui-mode-classic_dark #side-bar .sidebar-icon-wrap,
html.ui-mode-dark_oled .side-bar .sidebar-icon-wrap,
html.ui-mode-dark_oled #side-bar .sidebar-icon-wrap,
html.ui-mode-dark_motion .side-bar .sidebar-icon-wrap,
html.ui-mode-dark_motion #side-bar .sidebar-icon-wrap {
  background: var(--pix-dark-input) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
  box-shadow: none !important;
}
html.ui-mode-classic_dark .side-bar .theme-sidebar-active,
html.ui-mode-classic_dark .side-bar .sidebar-nav-parent-open,
html.ui-mode-classic_dark .side-bar .sidebar-nav-parent.theme-sidebar-active,
html.ui-mode-classic_dark #side-bar .theme-sidebar-active,
html.ui-mode-classic_dark #side-bar .sidebar-nav-parent-open,
html.ui-mode-classic_dark #side-bar .sidebar-nav-parent.theme-sidebar-active,
html.ui-mode-dark_oled .side-bar .theme-sidebar-active,
html.ui-mode-dark_oled .side-bar .sidebar-nav-parent-open,
html.ui-mode-dark_oled .side-bar .sidebar-nav-parent.theme-sidebar-active,
html.ui-mode-dark_oled #side-bar .theme-sidebar-active,
html.ui-mode-dark_oled #side-bar .sidebar-nav-parent-open,
html.ui-mode-dark_oled #side-bar .sidebar-nav-parent.theme-sidebar-active,
html.ui-mode-dark_motion .side-bar .theme-sidebar-active,
html.ui-mode-dark_motion .side-bar .sidebar-nav-parent-open,
html.ui-mode-dark_motion .side-bar .sidebar-nav-parent.theme-sidebar-active,
html.ui-mode-dark_motion #side-bar .theme-sidebar-active,
html.ui-mode-dark_motion #side-bar .sidebar-nav-parent-open,
html.ui-mode-dark_motion #side-bar .sidebar-nav-parent.theme-sidebar-active {
  background: color-mix(in srgb, var(--pix-dark-accent) 28%, var(--pix-dark-panel)) !important;
  border-color: var(--pix-dark-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pix-dark-accent) 35%, transparent) !important;
}
html.ui-mode-classic_dark .side-bar .theme-sidebar-active .sidebar-nav-label,
html.ui-mode-classic_dark .side-bar .sidebar-nav-parent-open .sidebar-nav-label,
html.ui-mode-classic_dark #side-bar .theme-sidebar-active .sidebar-nav-label,
html.ui-mode-dark_oled .side-bar .theme-sidebar-active .sidebar-nav-label,
html.ui-mode-dark_oled .side-bar .sidebar-nav-parent-open .sidebar-nav-label,
html.ui-mode-dark_oled #side-bar .theme-sidebar-active .sidebar-nav-label,
html.ui-mode-dark_motion .side-bar .theme-sidebar-active .sidebar-nav-label,
html.ui-mode-dark_motion .side-bar .sidebar-nav-parent-open .sidebar-nav-label,
html.ui-mode-dark_motion #side-bar .theme-sidebar-active .sidebar-nav-label {
  color: #ffffff !important;
}
html.ui-mode-classic_dark .side-bar .theme-sidebar-active .sidebar-icon-wrap,
html.ui-mode-classic_dark .side-bar .sidebar-nav-parent-open .sidebar-icon-wrap,
html.ui-mode-classic_dark #side-bar .theme-sidebar-active .sidebar-icon-wrap,
html.ui-mode-dark_oled .side-bar .theme-sidebar-active .sidebar-icon-wrap,
html.ui-mode-dark_oled .side-bar .sidebar-nav-parent-open .sidebar-icon-wrap,
html.ui-mode-dark_oled #side-bar .theme-sidebar-active .sidebar-icon-wrap,
html.ui-mode-dark_motion .side-bar .theme-sidebar-active .sidebar-icon-wrap,
html.ui-mode-dark_motion .side-bar .sidebar-nav-parent-open .sidebar-icon-wrap,
html.ui-mode-dark_motion #side-bar .theme-sidebar-active .sidebar-icon-wrap {
  background: color-mix(in srgb, var(--pix-dark-accent) 35%, #000) !important;
  border-color: var(--pix-dark-accent) !important;
  color: #ffffff !important;
}
html.ui-mode-classic_dark .side-bar .theme-sidebar-active .sidebar-chevron,
html.ui-mode-classic_dark .side-bar .sidebar-nav-parent-open .sidebar-chevron,
html.ui-mode-dark_oled .side-bar .theme-sidebar-active .sidebar-chevron,
html.ui-mode-dark_oled .side-bar .sidebar-nav-parent-open .sidebar-chevron,
html.ui-mode-dark_motion .side-bar .theme-sidebar-active .sidebar-chevron,
html.ui-mode-dark_motion .side-bar .sidebar-nav-parent-open .sidebar-chevron {
  color: #ffffff !important;
}
html.ui-mode-classic_dark .side-bar .theme-sidebar-hover:hover,
html.ui-mode-classic_dark #side-bar .theme-sidebar-hover:hover,
html.ui-mode-dark_oled .side-bar .theme-sidebar-hover:hover,
html.ui-mode-dark_oled #side-bar .theme-sidebar-hover:hover,
html.ui-mode-dark_motion .side-bar .theme-sidebar-hover:hover,
html.ui-mode-dark_motion #side-bar .theme-sidebar-hover:hover {
  background: var(--pix-dark-hover) !important;
  border-color: var(--pix-dark-border) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
html.ui-mode-classic_dark .side-bar .sidebar-child-link,
html.ui-mode-classic_dark #side-bar .sidebar-child-link,
html.ui-mode-dark_oled .side-bar .sidebar-child-link,
html.ui-mode-dark_oled #side-bar .sidebar-child-link,
html.ui-mode-dark_motion .side-bar .sidebar-child-link,
html.ui-mode-dark_motion #side-bar .sidebar-child-link {
  color: var(--pix-dark-muted) !important;
}
html.ui-mode-classic_dark .side-bar .theme-sidebar-child-active,
html.ui-mode-classic_dark #side-bar .theme-sidebar-child-active,
html.ui-mode-dark_oled .side-bar .theme-sidebar-child-active,
html.ui-mode-dark_oled #side-bar .theme-sidebar-child-active,
html.ui-mode-dark_motion .side-bar .theme-sidebar-child-active,
html.ui-mode-dark_motion #side-bar .theme-sidebar-child-active {
  background: color-mix(in srgb, var(--pix-dark-accent) 18%, transparent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
html.ui-mode-classic_dark .side-bar .theme-sidebar-child-active::before,
html.ui-mode-classic_dark #side-bar .theme-sidebar-child-active::before,
html.ui-mode-dark_oled .side-bar .theme-sidebar-child-active::before,
html.ui-mode-dark_oled #side-bar .theme-sidebar-child-active::before,
html.ui-mode-dark_motion .side-bar .theme-sidebar-child-active::before,
html.ui-mode-dark_motion #side-bar .theme-sidebar-child-active::before {
  background: var(--pix-dark-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pix-dark-accent) 25%, transparent) !important;
}
html.ui-mode-classic_dark .side-bar .sidebar-submenu-inner::before,
html.ui-mode-dark_oled .side-bar .sidebar-submenu-inner::before,
html.ui-mode-dark_motion .side-bar .sidebar-submenu-inner::before {
  background: linear-gradient(180deg, var(--pix-dark-accent), var(--pix-dark-border)) !important;
}
html.ui-mode-classic_dark .side-bar .theme-sidebar-child-hover:hover,
html.ui-mode-classic_dark #side-bar .theme-sidebar-child-hover:hover,
html.ui-mode-dark_oled .side-bar .theme-sidebar-child-hover:hover,
html.ui-mode-dark_oled #side-bar .theme-sidebar-child-hover:hover,
html.ui-mode-dark_motion .side-bar .theme-sidebar-child-hover:hover,
html.ui-mode-dark_motion #side-bar .theme-sidebar-child-hover:hover {
  background: var(--pix-dark-hover) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Business Settings page (pos-tab layout stays white unless overridden) */
html.ui-mode-classic_dark .content-header h1,
html.ui-mode-classic_dark .tw-text-black,
html.ui-mode-dark_oled .content-header h1,
html.ui-mode-dark_oled .tw-text-black,
html.ui-mode-dark_motion .content-header h1,
html.ui-mode-dark_motion .tw-text-black {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark div.pos-tab-container,
html.ui-mode-dark_oled div.pos-tab-container,
html.ui-mode-dark_motion div.pos-tab-container {
  background-color: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  box-shadow: var(--pix-dark-shadow) !important;
}
html.ui-mode-classic_dark div.pos-tab-menu div.list-group > a,
html.ui-mode-dark_oled div.pos-tab-menu div.list-group > a,
html.ui-mode-dark_motion div.pos-tab-menu div.list-group > a {
  background: var(--pix-dark-panel-2) !important;
  color: var(--pix-dark-text) !important;
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark div.pos-tab-menu div.list-group > a .fa,
html.ui-mode-classic_dark div.pos-tab-menu div.list-group > a .glyphicon,
html.ui-mode-dark_oled div.pos-tab-menu div.list-group > a .fa,
html.ui-mode-dark_oled div.pos-tab-menu div.list-group > a .glyphicon,
html.ui-mode-dark_motion div.pos-tab-menu div.list-group > a .fa,
html.ui-mode-dark_motion div.pos-tab-menu div.list-group > a .glyphicon {
  color: var(--pix-dark-accent) !important;
}
html.ui-mode-classic_dark div.pos-tab-menu div.list-group > a.active,
html.ui-mode-classic_dark div.pos-tab-menu div.list-group > a.active .fa,
html.ui-mode-classic_dark div.pos-tab-menu div.list-group > a.active .glyphicon,
html.ui-mode-dark_oled div.pos-tab-menu div.list-group > a.active,
html.ui-mode-dark_oled div.pos-tab-menu div.list-group > a.active .fa,
html.ui-mode-dark_oled div.pos-tab-menu div.list-group > a.active .glyphicon,
html.ui-mode-dark_motion div.pos-tab-menu div.list-group > a.active,
html.ui-mode-dark_motion div.pos-tab-menu div.list-group > a.active .fa,
html.ui-mode-dark_motion div.pos-tab-menu div.list-group > a.active .glyphicon {
  background: linear-gradient(to right, var(--pix-dark-accent), color-mix(in srgb, var(--pix-dark-accent) 55%, #000)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
html.ui-mode-classic_dark div.pos-tab-content,
html.ui-mode-dark_oled div.pos-tab-content,
html.ui-mode-dark_motion div.pos-tab-content {
  background-color: var(--pix-dark-panel) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pos-tab-content .form-group label,
html.ui-mode-classic_dark .pos-tab-content h3,
html.ui-mode-classic_dark .pos-tab-content h4,
html.ui-mode-dark_oled .pos-tab-content .form-group label,
html.ui-mode-dark_oled .pos-tab-content h3,
html.ui-mode-dark_oled .pos-tab-content h4,
html.ui-mode-dark_motion .pos-tab-content .form-group label,
html.ui-mode-dark_motion .pos-tab-content h3,
html.ui-mode-dark_motion .pos-tab-content h4 {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .list-group-item,
html.ui-mode-dark_oled .list-group-item,
html.ui-mode-dark_motion .list-group-item {
  background-color: var(--pix-dark-panel-2) !important;
  color: var(--pix-dark-text) !important;
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .widget,
html.ui-mode-classic_dark .box.box-solid,
html.ui-mode-dark_oled .widget,
html.ui-mode-dark_oled .box.box-solid,
html.ui-mode-dark_motion .widget,
html.ui-mode-dark_motion .box.box-solid {
  background: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .tw-bg-white,
html.ui-mode-classic_dark .tw-ring-gray-200,
html.ui-mode-dark_oled .tw-bg-white,
html.ui-mode-dark_oled .tw-ring-gray-200,
html.ui-mode-dark_motion .tw-bg-white,
html.ui-mode-dark_motion .tw-ring-gray-200 {
  background-color: var(--pix-dark-panel) !important;
  --tw-ring-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .tw-bg-gray-50,
html.ui-mode-classic_dark .tw-bg-slate-50,
html.ui-mode-dark_oled .tw-bg-gray-50,
html.ui-mode-dark_oled .tw-bg-slate-50,
html.ui-mode-dark_motion .tw-bg-gray-50,
html.ui-mode-dark_motion .tw-bg-slate-50 {
  background-color: var(--pix-dark-panel-2, #151b24) !important;
}
html.ui-mode-classic_dark .tw-border-gray-200,
html.ui-mode-dark_oled .tw-border-gray-200,
html.ui-mode-dark_motion .tw-border-gray-200 {
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .tw-text-gray-400,
html.ui-mode-classic_dark .tw-text-gray-500,
html.ui-mode-classic_dark .tw-text-gray-600,
html.ui-mode-dark_oled .tw-text-gray-400,
html.ui-mode-dark_oled .tw-text-gray-500,
html.ui-mode-dark_oled .tw-text-gray-600,
html.ui-mode-dark_motion .tw-text-gray-400,
html.ui-mode-dark_motion .tw-text-gray-500,
html.ui-mode-dark_motion .tw-text-gray-600 {
  color: var(--pix-dark-muted, #94a3b8) !important;
}
/* KPI / card amounts — were near-black on remapped dark .tw-bg-white panels */
html.ui-mode-classic_dark .tw-text-gray-700,
html.ui-mode-classic_dark .tw-text-gray-800,
html.ui-mode-classic_dark .tw-text-gray-900,
html.ui-mode-dark_oled .tw-text-gray-700,
html.ui-mode-dark_oled .tw-text-gray-800,
html.ui-mode-dark_oled .tw-text-gray-900,
html.ui-mode-dark_motion .tw-text-gray-700,
html.ui-mode-dark_motion .tw-text-gray-800,
html.ui-mode-dark_motion .tw-text-gray-900 {
  color: var(--pix-dark-text) !important;
}

/* Home dashboard KPI cards (Total Sell, Net, Invoice Due, …)
   Marker: pixleas_ui_home_kpi_dark_v1 */
html.ui-mode-classic_dark .pix-home-kpi,
html.ui-mode-dark_oled .pix-home-kpi,
html.ui-mode-dark_motion .pix-home-kpi {
  background: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px rgba(0, 0, 0, 0.35) !important;
  color: var(--pix-dark-text) !important;
  --tw-ring-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .pix-home-kpi .tw-text-gray-500,
html.ui-mode-dark_oled .pix-home-kpi .tw-text-gray-500,
html.ui-mode-dark_motion .pix-home-kpi .tw-text-gray-500 {
  color: var(--pix-dark-muted, #94a3b8) !important;
}
html.ui-mode-classic_dark .pix-home-kpi .tw-text-gray-900,
html.ui-mode-classic_dark .pix-home-kpi .total_sell,
html.ui-mode-classic_dark .pix-home-kpi .net,
html.ui-mode-classic_dark .pix-home-kpi .invoice_due,
html.ui-mode-classic_dark .pix-home-kpi .total_sell_return,
html.ui-mode-classic_dark .pix-home-kpi .total_purchase,
html.ui-mode-classic_dark .pix-home-kpi .purchase_due,
html.ui-mode-classic_dark .pix-home-kpi .total_purchase_return,
html.ui-mode-classic_dark .pix-home-kpi .total_expense,
html.ui-mode-dark_oled .pix-home-kpi .tw-text-gray-900,
html.ui-mode-dark_oled .pix-home-kpi .total_sell,
html.ui-mode-dark_oled .pix-home-kpi .net,
html.ui-mode-dark_oled .pix-home-kpi .invoice_due,
html.ui-mode-dark_oled .pix-home-kpi .total_sell_return,
html.ui-mode-dark_oled .pix-home-kpi .total_purchase,
html.ui-mode-dark_oled .pix-home-kpi .purchase_due,
html.ui-mode-dark_oled .pix-home-kpi .total_purchase_return,
html.ui-mode-dark_oled .pix-home-kpi .total_expense,
html.ui-mode-dark_motion .pix-home-kpi .tw-text-gray-900,
html.ui-mode-dark_motion .pix-home-kpi .total_sell,
html.ui-mode-dark_motion .pix-home-kpi .net,
html.ui-mode-dark_motion .pix-home-kpi .invoice_due,
html.ui-mode-dark_motion .pix-home-kpi .total_sell_return,
html.ui-mode-dark_motion .pix-home-kpi .total_purchase,
html.ui-mode-dark_motion .pix-home-kpi .purchase_due,
html.ui-mode-dark_motion .pix-home-kpi .total_purchase_return,
html.ui-mode-dark_motion .pix-home-kpi .total_expense {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pix-home-kpi .tw-bg-sky-100,
html.ui-mode-dark_oled .pix-home-kpi .tw-bg-sky-100,
html.ui-mode-dark_motion .pix-home-kpi .tw-bg-sky-100,
html.ui-mode-classic_dark .pix-home-kpi .bg-sky-100,
html.ui-mode-dark_oled .pix-home-kpi .bg-sky-100,
html.ui-mode-dark_motion .pix-home-kpi .bg-sky-100 {
  background-color: rgba(14, 165, 233, 0.18) !important;
  color: #7dd3fc !important;
}
html.ui-mode-classic_dark .pix-home-kpi .tw-bg-green-100,
html.ui-mode-dark_oled .pix-home-kpi .tw-bg-green-100,
html.ui-mode-dark_motion .pix-home-kpi .tw-bg-green-100 {
  background-color: rgba(34, 197, 94, 0.18) !important;
  color: #86efac !important;
}
html.ui-mode-classic_dark .pix-home-kpi .tw-bg-yellow-100,
html.ui-mode-dark_oled .pix-home-kpi .tw-bg-yellow-100,
html.ui-mode-dark_motion .pix-home-kpi .tw-bg-yellow-100 {
  background-color: rgba(234, 179, 8, 0.18) !important;
  color: #fde047 !important;
}
html.ui-mode-classic_dark .pix-home-kpi .tw-bg-red-100,
html.ui-mode-dark_oled .pix-home-kpi .tw-bg-red-100,
html.ui-mode-dark_motion .pix-home-kpi .tw-bg-red-100 {
  background-color: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}
html.ui-mode-classic_dark .pix-home-kpi-band,
html.ui-mode-dark_oled .pix-home-kpi-band,
html.ui-mode-dark_motion .pix-home-kpi-band {
  background: transparent !important;
}
html.ui-mode-classic_dark .pix-home-kpi-band .tw-bg-gray-100,
html.ui-mode-dark_oled .pix-home-kpi-band .tw-bg-gray-100,
html.ui-mode-dark_motion .pix-home-kpi-band .tw-bg-gray-100 {
  background: var(--pix-dark-bg) !important;
}

/* Home sales charts (Last 30 Days / Current FY) — Highcharts + light panel leftovers
   Marker: pixleas_ui_home_charts_dark_v1 */
html.ui-mode-classic_dark .pix-home-chart-card,
html.ui-mode-dark_oled .pix-home-chart-card,
html.ui-mode-dark_motion .pix-home-chart-card {
  background: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pix-home-chart-title,
html.ui-mode-dark_oled .pix-home-chart-title,
html.ui-mode-dark_motion .pix-home-chart-title {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pix-home-chart-icon,
html.ui-mode-dark_oled .pix-home-chart-icon,
html.ui-mode-dark_motion .pix-home-chart-icon {
  border-color: var(--pix-dark-border) !important;
  background: var(--pix-dark-panel-2, #151b24) !important;
}
html.ui-mode-classic_dark .pix-home-chart-panel,
html.ui-mode-dark_oled .pix-home-chart-panel,
html.ui-mode-dark_motion .pix-home-chart-panel {
  background: var(--pix-dark-panel-2, #151b24) !important;
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-container,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-container,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-container,
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-root,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-root,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-root {
  background: transparent !important;
}
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-background,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-background,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-background {
  fill: var(--pix-dark-panel-2, #151b24) !important;
}
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-plot-border,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-plot-border,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-plot-border,
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-plot-background,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-plot-background,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-plot-background {
  fill: transparent !important;
  stroke: transparent !important;
}
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-axis-labels text,
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-axis-title,
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-legend-item text,
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-title,
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-subtitle,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-axis-labels text,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-axis-title,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-legend-item text,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-title,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-subtitle,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-axis-labels text,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-axis-title,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-legend-item text,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-title,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-subtitle {
  fill: var(--pix-dark-text, #e5e7eb) !important;
  color: var(--pix-dark-text, #e5e7eb) !important;
}
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-grid-line,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-grid-line,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-grid-line {
  stroke: rgba(148, 163, 184, 0.18) !important;
}
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-axis-line,
html.ui-mode-classic_dark .pix-home-chart-panel .highcharts-tick,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-axis-line,
html.ui-mode-dark_oled .pix-home-chart-panel .highcharts-tick,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-axis-line,
html.ui-mode-dark_motion .pix-home-chart-panel .highcharts-tick {
  stroke: var(--pix-dark-border, #334155) !important;
}

/* ========== POS sale: footer bar + cart chrome follow UI modes ==========
   Marker: pixleas_ui_pos_footer_modes_v1
   (H1–H4 SkinCss retired — these rules replace aui-page-pos footer theming) */

/* Dark modes */
html.ui-mode-classic_dark,
html.ui-mode-dark_oled,
html.ui-mode-dark_motion {
  --pix-pos-totals-bg: #0f1419;
  --pix-pos-totals-border: rgba(255, 255, 255, 0.1);
  --pix-pos-totals-gap-bg: rgba(255, 255, 255, 0.08);
  --pix-pos-cell-bg: #151b24;
  --pix-pos-label: #94a3b8;
  --pix-pos-value: #f3f4f6;
  --pix-pos-value-danger: #fca5a5;
  --pix-pos-value-loyalty: #c4b5fd;
  --pix-pos-edit: #5eead4;
  --pix-pos-payable-bg: linear-gradient(135deg, #064e3b 0%, #0f766e 100%);
  --pix-pos-payable-border: rgba(52, 211, 153, 0.35);
  --pix-pos-payable-label: #a7f3d0;
  --pix-pos-payable-value: #ecfdf5;
  --pix-pos-footer-bg: #111827;
  --pix-pos-footer-border: rgba(255, 255, 255, 0.1);
  --pix-pos-footer-text: #e5e7eb;
  --pix-pos-footer-muted: #e5e7eb;
  --pix-pos-footer-divider: rgba(255, 255, 255, 0.18);
  --pix-pos-footer-cancel-bg: rgba(127, 29, 29, 0.25);
  --pix-pos-footer-cancel-border: #f87171;
  --pix-pos-footer-cancel-text: #fca5a5;
  --pix-pos-footer-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
}

html.ui-mode-classic_dark #pos_table thead th,
html.ui-mode-dark_oled #pos_table thead th,
html.ui-mode-dark_motion #pos_table thead th,
html.ui-mode-classic_dark #pos_table th[class*="pos-th"],
html.ui-mode-dark_oled #pos_table th[class*="pos-th"],
html.ui-mode-dark_motion #pos_table th[class*="pos-th"] {
  background: #121820 !important;
  background-color: #121820 !important;
  color: #94a3b8 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.ui-mode-classic_dark #pos_table tbody tr.product_row,
html.ui-mode-dark_oled #pos_table tbody tr.product_row,
html.ui-mode-dark_motion #pos_table tbody tr.product_row,
html.ui-mode-classic_dark #pos_table tbody tr.product_row > td,
html.ui-mode-dark_oled #pos_table tbody tr.product_row > td,
html.ui-mode-dark_motion #pos_table tbody tr.product_row > td {
  background: #151b24 !important;
  background-color: #151b24 !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.ui-mode-classic_dark #pos_table tbody tr.product_row:hover > td,
html.ui-mode-dark_oled #pos_table tbody tr.product_row:hover > td,
html.ui-mode-dark_motion #pos_table tbody tr.product_row:hover > td {
  background: #1c2430 !important;
}

/* POS empty cart + cart shell (lockscreen) — was stuck on white --pix-surface / tw-bg-white
   Marker: pixleas_ui_pos_empty_cart_dark_v1 */
html.ui-mode-classic_dark body.lockscreen .tw-bg-white,
html.ui-mode-dark_oled body.lockscreen .tw-bg-white,
html.ui-mode-dark_motion body.lockscreen .tw-bg-white,
html.ui-mode-classic_dark body.lockscreen .tw-rounded-2xl.tw-bg-white,
html.ui-mode-dark_oled body.lockscreen .tw-rounded-2xl.tw-bg-white,
html.ui-mode-dark_motion body.lockscreen .tw-rounded-2xl.tw-bg-white,
html.ui-mode-classic_dark body.lockscreen .pos_product_div,
html.ui-mode-dark_oled body.lockscreen .pos_product_div,
html.ui-mode-dark_motion body.lockscreen .pos_product_div,
html.ui-mode-classic_dark body.lockscreen .pos_product_div table,
html.ui-mode-dark_oled body.lockscreen .pos_product_div table,
html.ui-mode-dark_motion body.lockscreen .pos_product_div table,
html.ui-mode-classic_dark body.lockscreen #pos_table,
html.ui-mode-dark_oled body.lockscreen #pos_table,
html.ui-mode-dark_motion body.lockscreen #pos_table {
  background: var(--pix-dark-panel) !important;
  background-color: var(--pix-dark-panel) !important;
  color: var(--pix-dark-text) !important;
  border-color: var(--pix-dark-border) !important;
  box-shadow: var(--pix-dark-shadow) !important;
}
html.ui-mode-classic_dark body.lockscreen #pos_table tbody tr.pos-empty-state-row > td,
html.ui-mode-dark_oled body.lockscreen #pos_table tbody tr.pos-empty-state-row > td,
html.ui-mode-dark_motion body.lockscreen #pos_table tbody tr.pos-empty-state-row > td,
html.ui-mode-classic_dark .pos-empty-state-cell,
html.ui-mode-dark_oled .pos-empty-state-cell,
html.ui-mode-dark_motion .pos-empty-state-cell {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pos-empty-state,
html.ui-mode-dark_oled .pos-empty-state,
html.ui-mode-dark_motion .pos-empty-state {
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(56, 189, 248, 0.08), transparent 70%),
    var(--pix-dark-panel) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pos-empty-state-icon,
html.ui-mode-dark_oled .pos-empty-state-icon,
html.ui-mode-dark_motion .pos-empty-state-icon {
  background: var(--pix-dark-panel-2) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-muted) !important;
  box-shadow: none !important;
}
html.ui-mode-classic_dark .pos-empty-state-title,
html.ui-mode-dark_oled .pos-empty-state-title,
html.ui-mode-dark_motion .pos-empty-state-title {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pos-empty-state-hint,
html.ui-mode-dark_oled .pos-empty-state-hint,
html.ui-mode-dark_motion .pos-empty-state-hint {
  color: var(--pix-dark-muted) !important;
}
html.ui-mode-classic_dark body.lockscreen #pos_table > tbody > tr > td,
html.ui-mode-dark_oled body.lockscreen #pos_table > tbody > tr > td,
html.ui-mode-dark_motion body.lockscreen #pos_table > tbody > tr > td {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Edit Shipping + Bosta return/exchange popups (POS)
   Marker: pixleas_ui_pos_shipping_bosta_dark_v1 */
html.ui-mode-classic_dark #posShippingModal .modal-content,
html.ui-mode-dark_oled #posShippingModal .modal-content,
html.ui-mode-dark_motion #posShippingModal .modal-content,
html.ui-mode-classic_dark #pixleas_bosta_reverse_host .modal-content,
html.ui-mode-dark_oled #pixleas_bosta_reverse_host .modal-content,
html.ui-mode-dark_motion #pixleas_bosta_reverse_host .modal-content,
html.ui-mode-classic_dark .pixleas-bosta-reverse-modal,
html.ui-mode-dark_oled .pixleas-bosta-reverse-modal,
html.ui-mode-dark_motion .pixleas-bosta-reverse-modal {
  background: var(--pix-dark-panel) !important;
  background-color: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
  box-shadow: var(--pix-dark-shadow) !important;
}
html.ui-mode-classic_dark #posShippingModal :is(.modal-header, .modal-footer, .modal-body),
html.ui-mode-dark_oled #posShippingModal :is(.modal-header, .modal-footer, .modal-body),
html.ui-mode-dark_motion #posShippingModal :is(.modal-header, .modal-footer, .modal-body),
html.ui-mode-classic_dark #pixleas_bosta_reverse_host :is(.modal-header, .modal-footer, .modal-body),
html.ui-mode-dark_oled #pixleas_bosta_reverse_host :is(.modal-header, .modal-footer, .modal-body),
html.ui-mode-dark_motion #pixleas_bosta_reverse_host :is(.modal-header, .modal-footer, .modal-body),
html.ui-mode-classic_dark .pixleas-bosta-reverse-modal :is(.modal-header, .modal-footer, .modal-body),
html.ui-mode-dark_oled .pixleas-bosta-reverse-modal :is(.modal-header, .modal-footer, .modal-body),
html.ui-mode-dark_motion .pixleas-bosta-reverse-modal :is(.modal-header, .modal-footer, .modal-body) {
  background: transparent !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark #posShippingModal .modal-header,
html.ui-mode-dark_oled #posShippingModal .modal-header,
html.ui-mode-dark_motion #posShippingModal .modal-header,
html.ui-mode-classic_dark #pixleas_bosta_reverse_host .modal-header,
html.ui-mode-dark_oled #pixleas_bosta_reverse_host .modal-header,
html.ui-mode-dark_motion #pixleas_bosta_reverse_host .modal-header,
html.ui-mode-classic_dark .pixleas-bosta-reverse-modal .modal-header,
html.ui-mode-dark_oled .pixleas-bosta-reverse-modal .modal-header,
html.ui-mode-dark_motion .pixleas-bosta-reverse-modal .modal-header {
  background: var(--pix-dark-header, var(--pix-dark-panel-2)) !important;
}
html.ui-mode-classic_dark #posShippingModal :is(label, h3, h4, h5, .modal-title, .help-block, .text-muted),
html.ui-mode-dark_oled #posShippingModal :is(label, h3, h4, h5, .modal-title, .help-block, .text-muted),
html.ui-mode-dark_motion #posShippingModal :is(label, h3, h4, h5, .modal-title, .help-block, .text-muted),
html.ui-mode-classic_dark #pixleas_bosta_reverse_host :is(label, h3, h4, h5, .modal-title, .help-block, .text-muted, th, td),
html.ui-mode-dark_oled #pixleas_bosta_reverse_host :is(label, h3, h4, h5, .modal-title, .help-block, .text-muted, th, td),
html.ui-mode-dark_motion #pixleas_bosta_reverse_host :is(label, h3, h4, h5, .modal-title, .help-block, .text-muted, th, td),
html.ui-mode-classic_dark .pixleas-bosta-reverse-modal :is(label, h3, h4, h5, .modal-title, .help-block, .text-muted, th, td),
html.ui-mode-dark_oled .pixleas-bosta-reverse-modal :is(label, h3, h4, h5, .modal-title, .help-block, .text-muted, th, td),
html.ui-mode-dark_motion .pixleas-bosta-reverse-modal :is(label, h3, h4, h5, .modal-title, .help-block, .text-muted, th, td) {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark #posShippingModal :is(.form-control, select, textarea, .select2-container--default .select2-selection--single),
html.ui-mode-dark_oled #posShippingModal :is(.form-control, select, textarea, .select2-container--default .select2-selection--single),
html.ui-mode-dark_motion #posShippingModal :is(.form-control, select, textarea, .select2-container--default .select2-selection--single),
html.ui-mode-classic_dark #pixleas_bosta_reverse_host :is(.form-control, select, textarea, .select2-container--default .select2-selection--single),
html.ui-mode-dark_oled #pixleas_bosta_reverse_host :is(.form-control, select, textarea, .select2-container--default .select2-selection--single),
html.ui-mode-dark_motion #pixleas_bosta_reverse_host :is(.form-control, select, textarea, .select2-container--default .select2-selection--single),
html.ui-mode-classic_dark .pixleas-bosta-reverse-modal :is(.form-control, select, textarea),
html.ui-mode-dark_oled .pixleas-bosta-reverse-modal :is(.form-control, select, textarea),
html.ui-mode-dark_motion .pixleas-bosta-reverse-modal :is(.form-control, select, textarea) {
  background: var(--pix-dark-input, var(--pix-dark-panel-2)) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark #pixleas_bosta_reverse_host .table,
html.ui-mode-dark_oled #pixleas_bosta_reverse_host .table,
html.ui-mode-dark_motion #pixleas_bosta_reverse_host .table,
html.ui-mode-classic_dark .pixleas-bosta-reverse-modal .table,
html.ui-mode-dark_oled .pixleas-bosta-reverse-modal .table,
html.ui-mode-dark_motion .pixleas-bosta-reverse-modal .table {
  background: transparent !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark #pixleas_bosta_reverse_host .table > :is(thead, tbody) > tr > :is(th, td),
html.ui-mode-dark_oled #pixleas_bosta_reverse_host .table > :is(thead, tbody) > tr > :is(th, td),
html.ui-mode-dark_motion #pixleas_bosta_reverse_host .table > :is(thead, tbody) > tr > :is(th, td),
html.ui-mode-classic_dark .pixleas-bosta-reverse-modal .table > :is(thead, tbody) > tr > :is(th, td),
html.ui-mode-dark_oled .pixleas-bosta-reverse-modal .table > :is(thead, tbody) > tr > :is(th, td),
html.ui-mode-dark_motion .pixleas-bosta-reverse-modal .table > :is(thead, tbody) > tr > :is(th, td) {
  background: var(--pix-dark-panel-2) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pixleas-bosta-reverse-summary,
html.ui-mode-dark_oled .pixleas-bosta-reverse-summary,
html.ui-mode-dark_motion .pixleas-bosta-reverse-summary {
  background: var(--pix-dark-panel-2) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}

/* Bosta shipment / return cards inside Edit Shipping (hardcoded light greens in blade) */
html.ui-mode-classic_dark .pixleas-bosta-sent-card,
html.ui-mode-dark_oled .pixleas-bosta-sent-card,
html.ui-mode-dark_motion .pixleas-bosta-sent-card,
html.ui-mode-classic_dark .pixleas-bosta-relink-card,
html.ui-mode-dark_oled .pixleas-bosta-relink-card,
html.ui-mode-dark_motion .pixleas-bosta-relink-card {
  background: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pixleas-bosta-sent-card__header,
html.ui-mode-dark_oled .pixleas-bosta-sent-card__header,
html.ui-mode-dark_motion .pixleas-bosta-sent-card__header {
  background: rgba(34, 197, 94, 0.14) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}
html.ui-mode-classic_dark .pixleas-bosta-sent-card__title,
html.ui-mode-dark_oled .pixleas-bosta-sent-card__title,
html.ui-mode-dark_motion .pixleas-bosta-sent-card__title {
  color: #86efac !important;
}
html.ui-mode-classic_dark .pixleas-bosta-sent-card__badge,
html.ui-mode-dark_oled .pixleas-bosta-sent-card__badge,
html.ui-mode-dark_motion .pixleas-bosta-sent-card__badge {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #7dd3fc !important;
}
html.ui-mode-classic_dark .pixleas-bosta-sent-card__label,
html.ui-mode-dark_oled .pixleas-bosta-sent-card__label,
html.ui-mode-dark_motion .pixleas-bosta-sent-card__label {
  color: var(--pix-dark-muted) !important;
}
html.ui-mode-classic_dark .pixleas-bosta-sent-card__value,
html.ui-mode-dark_oled .pixleas-bosta-sent-card__value,
html.ui-mode-dark_motion .pixleas-bosta-sent-card__value {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pixleas-bosta-sent-card__track,
html.ui-mode-dark_oled .pixleas-bosta-sent-card__track,
html.ui-mode-dark_motion .pixleas-bosta-sent-card__track {
  background: var(--pix-dark-input, var(--pix-dark-panel-2)) !important;
  border-color: rgba(248, 113, 113, 0.55) !important;
  color: #fca5a5 !important;
}
html.ui-mode-classic_dark .pixleas-bosta-sent-card__footer,
html.ui-mode-dark_oled .pixleas-bosta-sent-card__footer,
html.ui-mode-dark_motion .pixleas-bosta-sent-card__footer {
  background: rgba(234, 179, 8, 0.12) !important;
  border-color: rgba(234, 179, 8, 0.35) !important;
  color: #fde047 !important;
}
html.ui-mode-classic_dark .pixleas-bosta-reverse-history,
html.ui-mode-dark_oled .pixleas-bosta-reverse-history,
html.ui-mode-dark_motion .pixleas-bosta-reverse-history {
  background: var(--pix-dark-panel-2) !important;
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .pixleas-bosta-reverse-history__title,
html.ui-mode-dark_oled .pixleas-bosta-reverse-history__title,
html.ui-mode-dark_motion .pixleas-bosta-reverse-history__title,
html.ui-mode-classic_dark .pixleas-bosta-reverse-history__row,
html.ui-mode-dark_oled .pixleas-bosta-reverse-history__row,
html.ui-mode-dark_motion .pixleas-bosta-reverse-history__row {
  color: var(--pix-dark-text) !important;
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .pixleas-bosta-relink-card__header,
html.ui-mode-dark_oled .pixleas-bosta-relink-card__header,
html.ui-mode-dark_motion .pixleas-bosta-relink-card__header {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .pixleas-bosta-relink-card__title,
html.ui-mode-dark_oled .pixleas-bosta-relink-card__title,
html.ui-mode-dark_motion .pixleas-bosta-relink-card__title {
  color: #7dd3fc !important;
}

html.ui-mode-classic_dark .pos_form_totals,
html.ui-mode-dark_oled .pos_form_totals,
html.ui-mode-dark_motion .pos_form_totals {
  background: var(--pix-pos-totals-bg) !important;
  border-top-color: var(--pix-pos-totals-border) !important;
}

html.ui-mode-classic_dark .pos-form-actions,
html.ui-mode-dark_oled .pos-form-actions,
html.ui-mode-dark_motion .pos-form-actions {
  background: var(--pix-pos-footer-bg) !important;
  border-top-color: var(--pix-pos-footer-border) !important;
  color: var(--pix-pos-footer-text) !important;
  box-shadow: var(--pix-pos-footer-shadow) !important;
}

html.ui-mode-classic_dark .pos-form-actions .pos-footer-btn--muted,
html.ui-mode-dark_oled .pos-form-actions .pos-footer-btn--muted,
html.ui-mode-dark_motion .pos-form-actions .pos-footer-btn--muted,
html.ui-mode-classic_dark .pos-form-actions .tw-text-gray-700,
html.ui-mode-dark_oled .pos-form-actions .tw-text-gray-700,
html.ui-mode-dark_motion .pos-form-actions .tw-text-gray-700 {
  color: var(--pix-pos-footer-muted) !important;
}

/* Glass / motion light accents on footer */
html.ui-mode-glass3d {
  --pix-pos-footer-bg: rgba(255, 255, 255, 0.82);
  --pix-pos-footer-border: rgba(148, 163, 184, 0.35);
  --pix-pos-footer-shadow: 0 -8px 28px rgba(15, 23, 42, 0.12);
}
html.ui-mode-glass3d .pos-form-actions {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.ui-mode-modern,
html.ui-mode-fresh,
html.ui-mode-soft_saas {
  --pix-pos-footer-bg: #f8fafc;
  --pix-pos-footer-border: rgba(148, 163, 184, 0.3);
  --pix-pos-footer-text: #0f172a;
  --pix-pos-footer-muted: #334155;
}

html.ui-mode-compact_retail {
  --pix-pos-footer-bg: #eef2ff;
  --pix-pos-footer-border: rgba(99, 102, 241, 0.25);
  --pix-pos-footer-text: #1e1b4b;
  --pix-pos-footer-muted: #312e81;
}
html.ui-mode-compact_retail .pos-form-actions-inner {
  min-height: 40px !important;
  padding: 3px 6px !important;
}

/* ========== Contact address book (PixleasShipping) — follow UiMode ========== */
.pixleas-contact-addresses {
  margin-top: 4px;
}
.pixleas-addr-card {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--pix-panel, #fff);
}
.pixleas-addr-card-header {
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--theme-800, #0f766e), var(--theme-700, #0d9488));
  color: #fff;
}
.pixleas-addr-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff !important;
}
.pixleas-addr-card-body {
  padding: 12px 14px;
}
.pixleas-addr-form {
  background: var(--pix-panel-2, #f8fafc);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  padding: 12px;
}
.pixleas-addr-item {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--pix-panel, #fff);
  position: relative;
}
.pixleas-addr-location-wrap {
  position: relative;
  margin-bottom: 8px;
}
.pixleas-loc-results {
  display: none;
  position: absolute;
  z-index: 1060;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow: auto;
  background: var(--pix-panel, #fff);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  margin-top: 4px;
}
.pixleas-loc-item {
  cursor: pointer;
}

html.ui-mode-classic_dark .pixleas-addr-card,
html.ui-mode-dark_oled .pixleas-addr-card,
html.ui-mode-dark_motion .pixleas-addr-card,
html.ui-mode-classic_dark .pixleas-addr-item,
html.ui-mode-dark_oled .pixleas-addr-item,
html.ui-mode-dark_motion .pixleas-addr-item,
html.ui-mode-classic_dark .pixleas-loc-results,
html.ui-mode-dark_oled .pixleas-loc-results,
html.ui-mode-dark_motion .pixleas-loc-results {
  background: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
  box-shadow: none !important;
}
html.ui-mode-classic_dark .pixleas-addr-card-header,
html.ui-mode-dark_oled .pixleas-addr-card-header,
html.ui-mode-dark_motion .pixleas-addr-card-header {
  background: var(--pix-dark-panel-2) !important;
  border-bottom: 1px solid var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pixleas-addr-card-title,
html.ui-mode-dark_oled .pixleas-addr-card-title,
html.ui-mode-dark_motion .pixleas-addr-card-title {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pixleas-addr-form,
html.ui-mode-dark_oled .pixleas-addr-form,
html.ui-mode-dark_motion .pixleas-addr-form {
  background: var(--pix-dark-panel-2) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pixleas-addr-form label,
html.ui-mode-dark_oled .pixleas-addr-form label,
html.ui-mode-dark_motion .pixleas-addr-form label,
html.ui-mode-classic_dark .pixleas-addr-item,
html.ui-mode-dark_oled .pixleas-addr-item,
html.ui-mode-dark_motion .pixleas-addr-item,
html.ui-mode-classic_dark .pixleas-addr-empty,
html.ui-mode-dark_oled .pixleas-addr-empty,
html.ui-mode-dark_motion .pixleas-addr-empty {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark .pixleas-loc-item,
html.ui-mode-dark_oled .pixleas-loc-item,
html.ui-mode-dark_motion .pixleas-loc-item,
html.ui-mode-classic_dark .pixleas-loc-results .list-group-item,
html.ui-mode-dark_oled .pixleas-loc-results .list-group-item,
html.ui-mode-dark_motion .pixleas-loc-results .list-group-item {
  background: var(--pix-dark-panel) !important;
  color: var(--pix-dark-text) !important;
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark .pixleas-loc-item:hover,
html.ui-mode-dark_oled .pixleas-loc-item:hover,
html.ui-mode-dark_motion .pixleas-loc-item:hover {
  background: var(--pix-dark-hover) !important;
  color: #fff !important;
}
html.ui-mode-classic_dark .pixleas-addr-form .input-group-addon,
html.ui-mode-dark_oled .pixleas-addr-form .input-group-addon,
html.ui-mode-dark_motion .pixleas-addr-form .input-group-addon {
  background: var(--pix-dark-input) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-muted) !important;
}

/* ========== Report page chrome (organize standard) ==========
   Header ~25% content width → Filters → KPIs / table / chart
*/
.pix-report-header-row {
  margin-bottom: 16px;
}
.pix-report-header {
  width: 25%;
  min-width: 220px;
  max-width: 360px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--theme-800, #1e3a5f) 0%, var(--theme-900, #0f172a) 55%, var(--theme-700, #334155) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.pix-report-header::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.pix-report-header-main {
  position: relative;
  z-index: 1;
}
.pix-report-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff !important;
}
.pix-report-title i {
  margin-inline-end: 8px;
  opacity: 0.95;
}
.pix-report-subtitle {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78) !important;
}
.pix-report-header-actions {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
@media (max-width: 991px) {
  .pix-report-header {
    width: 40%;
    max-width: none;
  }
}
@media (max-width: 767px) {
  .pix-report-header {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* ========== Reports Dark Motion (full page audit) ==========
   Beats page-scoped #fff / #0f172a / Tailwind / common inline styles.
*/
html.ui-mode-dark_motion .pix-report-header {
  background: var(--pix-dark-header, linear-gradient(135deg, #0c4a6e, #082f49)) !important;
  box-shadow: var(--pix-dark-shadow) !important;
  border: 1px solid rgba(34, 211, 238, 0.15);
}

html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) {
  background-color: transparent !important;
  color: var(--pix-dark-text) !important;
}

/* Panels / cards / charts / tabs shells */
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .pl-kpi-card, .kpi-card, .table-card, .chart-container, .chart-container .box,
  .anomaly-alert-panel, .ai-advisor-card, .ai-insight-item, .abc-card, .abc-settings-card,
  .filter-card, .tabs-card, .nav-tabs-custom, .box, .panel, .modal-content, .info-box, .small-box
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .pl-kpi-card, .kpi-card, .table-card, .chart-container, .chart-container .box,
  .anomaly-alert-panel, .ai-advisor-card, .ai-insight-item, .abc-card, .abc-settings-card,
  .filter-card, .tabs-card, .nav-tabs-custom, .box, .panel, .modal-content, .info-box, .small-box
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .pl-kpi-card, .kpi-card, .table-card, .chart-container, .chart-container .box,
  .anomaly-alert-panel, .ai-advisor-card, .ai-insight-item, .abc-card, .abc-settings-card,
  .filter-card, .tabs-card, .nav-tabs-custom, .box, .panel, .modal-content, .info-box, .small-box
) {
  background: var(--pix-dark-panel) !important;
  background-color: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
  box-shadow: var(--pix-dark-shadow) !important;
}

/* Text on report pages (labels, values, titles) */
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .pl-kpi-value, .kpi-value, .pl-kpi-label, .kpi-label, .pl-kpi-note,
  .box-title, .box-header, h1, h2, h3, h4, h5, p, span, td, th, label, .control-label,
  .anomaly-alert-title, .anomaly-alert-list, .ai-advisor-body, .text-muted, .help-block
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .pl-kpi-value, .kpi-value, .pl-kpi-label, .kpi-label, .pl-kpi-note,
  .box-title, .box-header, h1, h2, h3, h4, h5, p, span, td, th, label, .control-label,
  .anomaly-alert-title, .anomaly-alert-list, .ai-advisor-body, .text-muted, .help-block
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .pl-kpi-value, .kpi-value, .pl-kpi-label, .kpi-label, .pl-kpi-note,
  .box-title, .box-header, h1, h2, h3, h4, h5, p, span, td, th, label, .control-label,
  .anomaly-alert-title, .anomaly-alert-list, .ai-advisor-body, .text-muted, .help-block
) {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .pl-kpi-label, .kpi-label, .pl-kpi-note, .text-muted, .help-block, small
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .pl-kpi-label, .kpi-label, .pl-kpi-note, .text-muted, .help-block, small
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .pl-kpi-label, .kpi-label, .pl-kpi-note, .text-muted, .help-block, small
) {
  color: var(--pix-dark-muted) !important;
}

/* Keep accent header bars on AI advisor */
html.ui-mode-classic_dark .reports-pl-page .ai-advisor-header,
html.ui-mode-dark_oled .reports-pl-page .ai-advisor-header,
html.ui-mode-dark_motion .reports-pl-page .ai-advisor-header {
  background: linear-gradient(90deg, #0c4a6e 0%, #0369a1 100%) !important;
  color: #fff !important;
}
html.ui-mode-classic_dark .reports-pl-page .ai-advisor-header *,
html.ui-mode-dark_oled .reports-pl-page .ai-advisor-header *,
html.ui-mode-dark_motion .reports-pl-page .ai-advisor-header * {
  color: #fff !important;
}

html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) .pl-quick-ranges,
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) .pl-quick-ranges,
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) .pl-quick-ranges {
  border-top-color: var(--pix-dark-border) !important;
}

/* Tables */
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  table.dataTable thead th, .table > thead > tr > th, thead th
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  table.dataTable thead th, .table > thead > tr > th, thead th
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  table.dataTable thead th, .table > thead > tr > th, thead th
) {
  background: var(--pix-dark-panel-2) !important;
  color: var(--pix-dark-text) !important;
  border-color: var(--pix-dark-border) !important;
}
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  table.dataTable tbody td, .table > tbody > tr > td, tbody td, tfoot td
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  table.dataTable tbody td, .table > tbody > tr > td, tbody td, tfoot td
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  table.dataTable tbody td, .table > tbody > tr > td, tbody td, tfoot td
) {
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
  background-color: transparent !important;
}
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) .table-striped > tbody > tr:nth-of-type(odd),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) .table-striped > tbody > tr:nth-of-type(odd),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Tailwind light utilities inside report pages */
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-bg-white, .tw-bg-slate-50, .tw-bg-gray-50, .tw-bg-gray-100
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-bg-white, .tw-bg-slate-50, .tw-bg-gray-50, .tw-bg-gray-100
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-bg-white, .tw-bg-slate-50, .tw-bg-gray-50, .tw-bg-gray-100
) {
  background-color: var(--pix-dark-panel) !important;
}
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-text-black, .tw-text-slate-800, .tw-text-slate-900, .tw-text-gray-800, .tw-text-gray-900, .tw-text-gray-700
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-text-black, .tw-text-slate-800, .tw-text-slate-900, .tw-text-gray-800, .tw-text-gray-900, .tw-text-gray-700
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-text-black, .tw-text-slate-800, .tw-text-slate-900, .tw-text-gray-800, .tw-text-gray-900, .tw-text-gray-700
) {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-text-slate-500, .tw-text-slate-600, .tw-text-gray-500, .tw-text-gray-600, .tw-text-gray-400
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-text-slate-500, .tw-text-slate-600, .tw-text-gray-500, .tw-text-gray-600, .tw-text-gray-400
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-text-slate-500, .tw-text-slate-600, .tw-text-gray-500, .tw-text-gray-600, .tw-text-gray-400
) {
  color: var(--pix-dark-muted) !important;
}
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-border-slate-100, .tw-border-slate-200, .tw-border-gray-100, .tw-border-gray-200
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-border-slate-100, .tw-border-slate-200, .tw-border-gray-100, .tw-border-gray-200
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  .tw-border-slate-100, .tw-border-slate-200, .tw-border-gray-100, .tw-border-gray-200
) {
  border-color: var(--pix-dark-border) !important;
}

/* Common inline light backgrounds/colors used in report blades */
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background-color:#fff"],
  [style*="background-color: #fff"],
  [style*="background:#ffffff"],
  [style*="background: #ffffff"],
  [style*="background-color:#ffffff"],
  [style*="background-color: #ffffff"],
  [style*="background:#f8fafc"],
  [style*="background: #f8fafc"],
  [style*="background-color:#f8fafc"],
  [style*="background-color: #f8fafc"],
  [style*="background:#f1f5f9"],
  [style*="background: #f1f5f9"],
  [style*="background-color:#f1f5f9"],
  [style*="background-color: #f1f5f9"],
  [style*="background:#eff6ff"],
  [style*="background: #eff6ff"]
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background-color:#fff"],
  [style*="background-color: #fff"],
  [style*="background:#ffffff"],
  [style*="background: #ffffff"],
  [style*="background-color:#ffffff"],
  [style*="background-color: #ffffff"],
  [style*="background:#f8fafc"],
  [style*="background: #f8fafc"],
  [style*="background-color:#f8fafc"],
  [style*="background-color: #f8fafc"],
  [style*="background:#f1f5f9"],
  [style*="background: #f1f5f9"],
  [style*="background-color:#f1f5f9"],
  [style*="background-color: #f1f5f9"],
  [style*="background:#eff6ff"],
  [style*="background: #eff6ff"]
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background-color:#fff"],
  [style*="background-color: #fff"],
  [style*="background:#ffffff"],
  [style*="background: #ffffff"],
  [style*="background-color:#ffffff"],
  [style*="background-color: #ffffff"],
  [style*="background:#f8fafc"],
  [style*="background: #f8fafc"],
  [style*="background-color:#f8fafc"],
  [style*="background-color: #f8fafc"],
  [style*="background:#f1f5f9"],
  [style*="background: #f1f5f9"],
  [style*="background-color:#f1f5f9"],
  [style*="background-color: #f1f5f9"],
  [style*="background:#eff6ff"],
  [style*="background: #eff6ff"]
) {
  background: var(--pix-dark-panel) !important;
  background-color: var(--pix-dark-panel) !important;
}
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  [style*="color:#0f172a"],
  [style*="color: #0f172a"],
  [style*="color:#1e293b"],
  [style*="color: #1e293b"],
  [style*="color:#334155"],
  [style*="color: #334155"]
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  [style*="color:#0f172a"],
  [style*="color: #0f172a"],
  [style*="color:#1e293b"],
  [style*="color: #1e293b"],
  [style*="color:#334155"],
  [style*="color: #334155"]
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  [style*="color:#0f172a"],
  [style*="color: #0f172a"],
  [style*="color:#1e293b"],
  [style*="color: #1e293b"],
  [style*="color:#334155"],
  [style*="color: #334155"]
) {
  color: var(--pix-dark-text) !important;
}
html.ui-mode-classic_dark :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  [style*="border: 1px solid #e2e8f0"],
  [style*="border:1px solid #e2e8f0"],
  [style*="border: 1px solid #f1f5f9"],
  [style*="border:1px solid #f1f5f9"],
  [style*="border-color: #e2e8f0"],
  [style*="border-bottom: 2px solid #f1f5f9"],
  [style*="border-bottom:2px solid #f1f5f9"]
),
html.ui-mode-dark_oled :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  [style*="border: 1px solid #e2e8f0"],
  [style*="border:1px solid #e2e8f0"],
  [style*="border: 1px solid #f1f5f9"],
  [style*="border:1px solid #f1f5f9"],
  [style*="border-color: #e2e8f0"],
  [style*="border-bottom: 2px solid #f1f5f9"],
  [style*="border-bottom:2px solid #f1f5f9"]
),
html.ui-mode-dark_motion :is(.reports-pl-page, .abc-analysis-page, .restaurant-report-page) :is(
  [style*="border: 1px solid #e2e8f0"],
  [style*="border:1px solid #e2e8f0"],
  [style*="border: 1px solid #f1f5f9"],
  [style*="border:1px solid #f1f5f9"],
  [style*="border-color: #e2e8f0"],
  [style*="border-bottom: 2px solid #f1f5f9"],
  [style*="border-bottom:2px solid #f1f5f9"]
) {
  border-color: var(--pix-dark-border) !important;
}

/* ABC matrix cells — keep semantic tint, darken base */
html.ui-mode-dark_motion .abc-analysis-page .matrix-cell-dead,
html.ui-mode-classic_dark .abc-analysis-page .matrix-cell-dead,
html.ui-mode-dark_oled .abc-analysis-page .matrix-cell-dead {
  background-color: var(--pix-dark-panel-2) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-muted) !important;
}

/* Core report content section (when using compact header) */
html.ui-mode-classic_dark .content .box,
html.ui-mode-dark_oled .content .box,
html.ui-mode-dark_motion .content .box {
  background: var(--pix-dark-panel) !important;
  border-color: var(--pix-dark-border) !important;
  color: var(--pix-dark-text) !important;
}

/* Hide legacy reports refresh bar if any leftover markup exists */
.reports-navbar-wrapper:empty {
  display: none !important;
}

/* ========== MODULE CHROME (Option A) — header + pill tabs ==========
 * Structure is shared; looks come from --pix-chrome-* tokens per ui-mode.
 * Classes: .pix-module-header / .cp-module-header, .pix-module-tabs (+ legacy *-section-tabs)
 */
:root,
html {
  --pix-chrome-title: #111827;
  --pix-chrome-subtitle: #6b7280;
  --pix-chrome-header-bg: transparent;
  --pix-chrome-header-border: transparent;
  --pix-chrome-header-shadow: none;
  --pix-chrome-header-radius: 0;
  --pix-chrome-header-padding: 0 0 10px;
  --pix-chrome-header-margin: 0 0 12px;
  --pix-chrome-tab-bg: #ffffff;
  --pix-chrome-tab-border: #e2e8f0;
  --pix-chrome-tab-text: #334155;
  --pix-chrome-tab-hover-border: var(--theme-700, #1a6b7a);
  --pix-chrome-tab-hover-text: var(--theme-800, #0f4c5c);
  --pix-chrome-tab-active-bg: linear-gradient(135deg, var(--theme-800, #0f4c5c), var(--theme-700, #1a6b7a));
  --pix-chrome-tab-active-border: transparent;
  --pix-chrome-tab-active-text: #ffffff;
  --pix-chrome-tab-radius: 999px;
  --pix-chrome-tab-backdrop: none;
  --pix-chrome-tab-shadow: none;
  --pix-chrome-action-border: #d1d5db;
  --pix-chrome-action-text: #374151;
}

html.ui-mode-classic_dark,
html.ui-mode-dark_oled,
html.ui-mode-dark_motion {
  --pix-chrome-title: var(--pix-dark-text, #e2e8f0);
  --pix-chrome-subtitle: var(--pix-dark-muted, #93c5fd);
  --pix-chrome-tab-bg: var(--pix-dark-panel, #1e293b);
  --pix-chrome-tab-border: var(--pix-dark-border, #334155);
  --pix-chrome-tab-text: var(--pix-dark-text, #e2e8f0);
  --pix-chrome-tab-hover-border: var(--pix-dark-accent, #38bdf8);
  --pix-chrome-tab-hover-text: var(--pix-dark-accent, #38bdf8);
  --pix-chrome-tab-active-bg: rgba(14, 165, 233, 0.28);
  --pix-chrome-tab-active-border: rgba(56, 189, 248, 0.45);
  --pix-chrome-tab-active-text: var(--pix-dark-accent, #38bdf8);
  --pix-chrome-action-border: var(--pix-dark-border, #334155);
  --pix-chrome-action-text: var(--pix-dark-text, #e2e8f0);
}

html.ui-mode-dark_motion {
  --pix-chrome-tab-backdrop: blur(12px);
  --pix-chrome-tab-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

html.ui-mode-glass3d {
  --pix-chrome-tab-bg: rgba(255, 255, 255, 0.72);
  --pix-chrome-tab-border: rgba(148, 163, 184, 0.45);
  --pix-chrome-tab-text: #334155;
  --pix-chrome-tab-backdrop: blur(14px);
  --pix-chrome-tab-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  --pix-chrome-tab-active-bg: color-mix(in srgb, var(--theme-700, #0f766e) 18%, #fff);
  --pix-chrome-tab-active-border: var(--theme-700, #0f766e);
  --pix-chrome-tab-active-text: var(--theme-800, #115e59);
}

html.ui-mode-modern,
html.ui-mode-soft_saas {
  --pix-chrome-tab-radius: 10px;
}

html.ui-mode-fresh {
  --pix-chrome-tab-active-bg: linear-gradient(135deg, #059669, #10b981);
}

html.ui-mode-compact_retail {
  --pix-chrome-header-padding: 0 0 6px;
  --pix-chrome-header-margin: 0 0 8px;
}

/* Match AdminLTE .content gutter (15px) — headers/tabs often sit outside .content */
.pix-module-chrome {
  margin-block: 8px 4px;
  margin-inline: 15px;
}


.pix-module-header,
.cp-module-header {
  background: var(--pix-chrome-header-bg) !important;
  border: none !important;
  border-color: var(--pix-chrome-header-border) !important;
  border-radius: var(--pix-chrome-header-radius) !important;
  padding: var(--pix-chrome-header-padding) !important;
  margin: var(--pix-chrome-header-margin) !important;
  color: inherit;
  box-shadow: var(--pix-chrome-header-shadow) !important;
}

.pix-module-header h2,
.cp-module-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pix-chrome-title) !important;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pix-module-header h2 .cp-module-header-icon,
.pix-module-header h2 .pix-module-header-icon,
.cp-module-header h2 .cp-module-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: inherit;
}

.pix-module-subtitle,
.cp-module-subtitle {
  margin: 4px 0 0;
  color: var(--pix-chrome-subtitle) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.pix-module-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.pix-module-header-actions .btn,
.pix-module-header-actions .btn-default,
.pix-module-header-actions .btn-pix-chrome {
  background: transparent;
  border: 1px solid var(--pix-chrome-action-border);
  color: var(--pix-chrome-action-text);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  line-height: 1.4;
}

.pix-module-tabs,
.bosta-section-tabs,
.essentials-section-tabs,
.superadmin-section-tabs,
.asm-plans-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block: 0 12px;
  margin-inline: 15px;
  padding: 0;
  list-style: none;
}

/* Already inside padded .content — don't double the sidebar gutter */
.content .pix-module-chrome,
.content .pix-module-tabs,
.content .bosta-section-tabs,
.content .essentials-section-tabs,
.content .superadmin-section-tabs,
.content .asm-plans-section-tabs {
  margin-inline: 0;
}

@media (max-width: 767px) {
  .pix-module-chrome,
  .pix-module-tabs,
  .bosta-section-tabs,
  .essentials-section-tabs,
  .superadmin-section-tabs {
    margin-inline: 10px;
  }
  .content .pix-module-chrome,
  .content .pix-module-tabs,
  .content .bosta-section-tabs,
  .content .essentials-section-tabs,
  .content .superadmin-section-tabs,
  .content .asm-plans-section-tabs {
    margin-inline: 0;
  }
}


.pix-module-tabs a,
.bosta-section-tabs a,
.essentials-section-tabs a,
.superadmin-section-tabs a,
.asm-plans-section-tabs a,
.asm-hub-topnav .navbar-nav > li > a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem !important;
  border-radius: var(--pix-chrome-tab-radius) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid var(--pix-chrome-tab-border) !important;
  background: var(--pix-chrome-tab-bg) !important;
  color: var(--pix-chrome-tab-text) !important;
  line-height: 1.4;
  backdrop-filter: var(--pix-chrome-tab-backdrop);
  -webkit-backdrop-filter: var(--pix-chrome-tab-backdrop);
  box-shadow: var(--pix-chrome-tab-shadow);
}

.pix-module-tabs a:hover,
.bosta-section-tabs a:hover,
.essentials-section-tabs a:hover,
.superadmin-section-tabs a:hover,
.asm-plans-section-tabs a:hover,
.asm-hub-topnav .navbar-nav > li > a:hover,
.asm-hub-topnav .navbar-nav > li > a:focus {
  border-color: var(--pix-chrome-tab-hover-border) !important;
  color: var(--pix-chrome-tab-hover-text) !important;
}

.pix-module-tabs a.active,
.bosta-section-tabs a.active,
.essentials-section-tabs a.active,
.superadmin-section-tabs a.active,
.asm-plans-section-tabs li.active a,
.asm-hub-topnav .navbar-nav > li.active > a,
.asm-hub-topnav .asm-hub-parent.active > a,
.asm-hub-topnav .asm-hub-parent.open > a {
  background: var(--pix-chrome-tab-active-bg) !important;
  border-color: var(--pix-chrome-tab-active-border) !important;
  color: var(--pix-chrome-tab-active-text) !important;
}

@media (prefers-reduced-motion: no-preference) {
  html.ui-mode-dark_motion .pix-module-tabs a,
  html.ui-mode-dark_motion .bosta-section-tabs a,
  html.ui-mode-dark_motion .essentials-section-tabs a,
  html.ui-mode-dark_motion .superadmin-section-tabs a,
  html.ui-mode-glass3d .pix-module-tabs a,
  html.ui-mode-glass3d .bosta-section-tabs a {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  html.ui-mode-dark_motion .pix-module-tabs a:hover,
  html.ui-mode-glass3d .pix-module-tabs a:hover {
    transform: translateY(-1px);
  }
}

/*
 * Core AdminLTE .content-header → same Option-A look as To Do (pix-module-header).
 * Applies to Products, Sales, Purchases, Contacts, Settings, etc. without per-blade edits.
 * POS lockscreen layout is excluded.
 */
body:not(.lockscreen) .content-header {
  background: var(--pix-chrome-header-bg) !important;
  border: none !important;
  border-color: var(--pix-chrome-header-border) !important;
  border-radius: var(--pix-chrome-header-radius) !important;
  padding: var(--pix-chrome-header-padding) !important;
  /* top 0 — was 8px and left a gap under Main Header */
  margin-block: 0 12px !important;
  margin-inline: 15px !important;
  box-shadow: var(--pix-chrome-header-shadow) !important;
  color: inherit;
}

body:not(.lockscreen) .content .content-header {
  margin-inline: 0 !important;
}

body:not(.lockscreen) .content-header > h1,
body:not(.lockscreen) .content-header h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--pix-chrome-title) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

body:not(.lockscreen) .content-header h1 > small,
body:not(.lockscreen) .content-header h1 small {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--pix-chrome-subtitle) !important;
}

/* Override common Tailwind utilities on core page titles */
body:not(.lockscreen) .content-header h1.tw-text-black,
body:not(.lockscreen) .content-header h1.tw-text-gray-900,
body:not(.lockscreen) .content-header .tw-text-black {
  color: var(--pix-chrome-title) !important;
}
body:not(.lockscreen) .content-header h1 small.tw-text-gray-700,
body:not(.lockscreen) .content-header h1 .tw-text-gray-700,
body:not(.lockscreen) .content-header .tw-text-gray-700 {
  color: var(--pix-chrome-subtitle) !important;
}

body:not(.lockscreen) .content-header > .breadcrumb {
  display: none !important;
}

@media (max-width: 767px) {
  body:not(.lockscreen) .content-header {
    margin-inline: 10px !important;
  }
  body:not(.lockscreen) .content .content-header {
    margin-inline: 0 !important;
  }
}

/* Print: never let dark UiMode wash out invoice */
@media print {
  html.ui-mode-classic_dark,
  html.ui-mode-dark_oled,
  html.ui-mode-dark_motion,
  html.ui-mode-classic_dark body,
  html.ui-mode-dark_oled body,
  html.ui-mode-dark_motion body,
  html.ui-mode-classic_dark #receipt_section,
  html.ui-mode-dark_oled #receipt_section,
  html.ui-mode-dark_motion #receipt_section,
  html.ui-mode-classic_dark #receipt_section *,
  html.ui-mode-dark_oled #receipt_section *,
  html.ui-mode-dark_motion #receipt_section * {
    background: #fff !important;
    background-color: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .pix-report-header-row {
    display: none !important;
  }
}