/**
 * Desktop table-heavy routes — premium density aligned with dashboard.
 * Unlayered; load late. Desktop only. body.use-new-ui.
 * Targets: orders, inventory, customers, expenses, reports, settings (profile-panel), reports-tools, data-check, COD.
 */

@media (min-width: 769px) {
  /* ---- Page chrome (#contentScroll) when a table-heavy route is active ---- */
  body.use-new-ui #contentScroll.content-scroll:has(.route-page.orders-page:not([hidden])),
  body.use-new-ui #contentScroll.content-scroll:has(.route-page.inventory-page:not([hidden])),
  body.use-new-ui #contentScroll.content-scroll:has(.route-page.customers-page:not([hidden])),
  body.use-new-ui #contentScroll.content-scroll:has(.route-page.expenses-page:not([hidden])),
  body.use-new-ui #contentScroll.content-scroll:has(.route-page.reports-tools-page:not([hidden])),
  body.use-new-ui #contentScroll.content-scroll:has(.route-page.proxy-manager:not([hidden])),
  body.use-new-ui #contentScroll.content-scroll:has(.route-page.reports-page:not([hidden])),
  body.use-new-ui #contentScroll.content-scroll:has(.route-page.profile-panel:not([hidden])),
  body.use-new-ui #contentScroll.content-scroll:has(.route-page.cod-page:not([hidden])) {
    background: transparent;
  }

  /* ---- Panels & table shells ---- */
  body.use-new-ui .orders-page .panel,
  body.use-new-ui .inventory-page .panel,
  body.use-new-ui .customers-page .panel,
  body.use-new-ui .expenses-page .panel,
  body.use-new-ui .reports-page .panel,
  body.use-new-ui .profile-panel .panel,
  body.use-new-ui .reports-tools-page .panel,
  body.use-new-ui .proxy-manager .panel,
  body.use-new-ui .cod-page .panel,
  body.use-new-ui .orders-page .table-wrap,
  body.use-new-ui .inventory-page .table-wrap,
  body.use-new-ui .customers-page .table-wrap,
  body.use-new-ui .expenses-page .table-wrap,
  body.use-new-ui .reports-page .table-wrap,
  body.use-new-ui .profile-panel .table-wrap,
  body.use-new-ui .reports-tools-page .table-wrap,
  body.use-new-ui .proxy-manager .table-wrap,
  body.use-new-ui .cod-page .table-wrap,
  body.use-new-ui .orders-page .orders-table-shell,
  body.use-new-ui .reports-tools-page .reports-table-wrap {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(205, 214, 228, 0.72);
    border-radius: 22px;
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.03),
      0 12px 28px rgba(15, 23, 42, 0.04);
  }

  body.use-new-ui .orders-page .table-wrap,
  body.use-new-ui .inventory-page .table-wrap,
  body.use-new-ui .customers-page .table-wrap,
  body.use-new-ui .expenses-page .table-wrap,
  body.use-new-ui .reports-page .table-wrap,
  body.use-new-ui .profile-panel .table-wrap,
  body.use-new-ui .reports-tools-page .table-wrap,
  body.use-new-ui .proxy-manager .table-wrap,
  body.use-new-ui .cod-page .table-wrap {
    overflow-x: auto;
  }

  /* ---- Table headers ---- */
  body.use-new-ui .orders-page thead th,
  body.use-new-ui .inventory-page thead th,
  body.use-new-ui .customers-page thead th,
  body.use-new-ui .expenses-page thead th,
  body.use-new-ui .reports-page thead th,
  body.use-new-ui .profile-panel thead th,
  body.use-new-ui .reports-tools-page thead th,
  body.use-new-ui .proxy-manager thead th,
  body.use-new-ui .cod-page thead th {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: var(--type-admin-base, 16px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #e2e8f0 !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    box-shadow: 0 1px 0 rgba(226, 232, 240, 0.95);
    vertical-align: middle !important;
  }

  /* ---- Table body: density + zebra + hover ---- */
  body.use-new-ui .orders-page tbody td,
  /* Kho tab SP: density → inventory-product-table-density.css (INVENTORY DENSITY PATCH ACTIVE) */
  body.use-new-ui .inventory-page:not(:has(.product-stock-table--inv-desk)) tbody td,
  body.use-new-ui .customers-page tbody td,
  body.use-new-ui .expenses-page tbody td,
  body.use-new-ui .reports-page tbody td,
  body.use-new-ui .profile-panel tbody td,
  body.use-new-ui .reports-tools-page tbody td,
  body.use-new-ui .proxy-manager tbody td,
  body.use-new-ui .cod-page tbody td {
    min-height: 48px !important;
    height: auto !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: var(--type-admin-base, 16px) !important;
    vertical-align: middle !important;
    line-height: 1.4;
  }

  body.use-new-ui .orders-page tbody tr:nth-child(even) td,
  body.use-new-ui .inventory-page tbody tr:nth-child(even) td,
  body.use-new-ui .customers-page tbody tr:nth-child(even) td,
  body.use-new-ui .expenses-page tbody tr:nth-child(even) td,
  body.use-new-ui .reports-page tbody tr:nth-child(even) td,
  body.use-new-ui .profile-panel tbody tr:nth-child(even) td,
  body.use-new-ui .reports-tools-page tbody tr:nth-child(even) td,
  body.use-new-ui .proxy-manager tbody tr:nth-child(even) td,
  body.use-new-ui .cod-page tbody tr:nth-child(even) td {
    background: rgba(248, 250, 252, 0.65);
  }

  body.use-new-ui .orders-page tbody tr:hover td,
  body.use-new-ui .inventory-page tbody tr:hover td,
  body.use-new-ui .customers-page tbody tr:hover td,
  body.use-new-ui .expenses-page tbody tr:hover td,
  body.use-new-ui .reports-page tbody tr:hover td,
  body.use-new-ui .profile-panel tbody tr:hover td,
  body.use-new-ui .reports-tools-page tbody tr:hover td,
  body.use-new-ui .proxy-manager tbody tr:hover td,
  body.use-new-ui .cod-page tbody tr:hover td {
    background: #f8fafc !important;
  }

  body.use-new-ui .orders-page .money-col,
  body.use-new-ui .orders-page .col-money,
  body.use-new-ui .inventory-page .money-col,
  body.use-new-ui .inventory-page .money-cell,
  body.use-new-ui .customers-page .money-cell,
  body.use-new-ui .expenses-page .money-col,
  body.use-new-ui .reports-page .money-col,
  body.use-new-ui .profile-panel .money-col,
  body.use-new-ui .reports-tools-page .money-col,
  body.use-new-ui .proxy-manager .money-col,
  body.use-new-ui .cod-page .money-col {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  /* ---- Action cells: compact pill buttons ---- */
  body.use-new-ui .orders-page .order-actions .btn,
  body.use-new-ui .orders-page .order-actions .btn.btn-xs,
  body.use-new-ui .inventory-page .batch-actions-cell .btn,
  body.use-new-ui .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) .product-actions-cell .btn,
  body.use-new-ui .customers-page .customer-actions-cell .btn,
  body.use-new-ui .expenses-page .finance-actions-cell .btn,
  body.use-new-ui .reports-tools-page .reports-export-card .btn,
  body.use-new-ui .reports-tools-page .reports-backup-table .btn,
  body.use-new-ui .reports-tools-page .reports-audit-table .btn,
  body.use-new-ui .proxy-manager .data-check-actions-cell .btn,
  body.use-new-ui .proxy-manager .data-check-page .data-check-actions-cell .btn,
  body.use-new-ui .cod-page .table-wrap td .btn {
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: var(--type-admin-base, 16px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  body.use-new-ui .orders-page .order-del-btn.danger,
  body.use-new-ui .inventory-page .btn.danger:not(.subtle),
  body.use-new-ui .customers-page .btn.danger:not(.subtle),
  body.use-new-ui .expenses-page .finance-actions-cell .btn.danger:not(.subtle),
  body.use-new-ui .reports-tools-page .btn.danger:not(.subtle),
  body.use-new-ui .proxy-manager .btn.danger:not(.subtle) {
    background: rgba(254, 242, 242, 0.95) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(252, 165, 165, 0.55) !important;
    box-shadow: none !important;
  }

  body.use-new-ui .orders-page .order-del-btn.danger:hover:not(:disabled),
  body.use-new-ui .expenses-page .finance-actions-cell .btn.danger:hover:not(:disabled) {
    background: rgba(254, 226, 226, 0.98) !important;
    border-color: rgba(248, 113, 113, 0.65) !important;
    color: #991b1b !important;
  }

  body.use-new-ui .orders-page .order-edit-btn,
  body.use-new-ui .inventory-page .btn.btn-xs.primary,
  body.use-new-ui .customers-page .customer-actions-cell .btn.primary {
    border: 1px solid rgba(59, 130, 246, 0.28);
  }

  /* ---- COD badge (orders + COD list) ---- */
  body.use-new-ui .orders-page .cod-badge,
  body.use-new-ui .cod-page .cod-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: var(--type-admin-base, 16px);
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
  }

  body.use-new-ui .orders-page .cod-badge.cod-positive,
  body.use-new-ui .cod-page .cod-badge.cod-positive {
    background: rgba(254, 243, 199, 0.85);
    border-color: rgba(251, 191, 36, 0.45);
    color: #92400e;
  }

  body.use-new-ui .orders-page .cod-badge.cod-zero,
  body.use-new-ui .cod-page .cod-badge.cod-zero {
    background: rgba(220, 252, 231, 0.75);
    border-color: rgba(74, 222, 128, 0.4);
    color: #166534;
  }

  /* ---- Order status select → pill-like ---- */
  body.use-new-ui .orders-page .order-status-select:not(.order-mo-status) {
    min-height: 28px;
    padding: 2px 28px 2px 10px;
    border-radius: 999px;
    font-size: var(--type-admin-base, 16px);
    font-weight: 650;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M3 4.5h6L6 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
  }

  body.use-new-ui .orders-page .order-status-select.status-done {
    background-color: rgba(220, 252, 231, 0.85);
    border-color: rgba(74, 222, 128, 0.45);
    color: #166534;
  }

  body.use-new-ui .orders-page .order-status-select.status-cod {
    background-color: rgba(254, 243, 199, 0.88);
    border-color: rgba(251, 191, 36, 0.5);
    color: #92400e;
  }

  body.use-new-ui .orders-page .order-status-select.status-pending {
    background-color: rgba(241, 245, 249, 0.95);
    border-color: #e2e8f0;
    color: #475569;
  }

  body.use-new-ui .orders-page .order-status-select.status-cancelled {
    background-color: rgba(254, 226, 226, 0.55);
    border-color: rgba(252, 165, 165, 0.45);
    color: #991b1b;
  }

  /* ---- statusBadge() — soft pills (Hoàn tất / COD / Chờ / Hết hàng…) ---- */
  body.use-new-ui .orders-page .status,
  body.use-new-ui .inventory-page .status,
  body.use-new-ui .customers-page .status,
  body.use-new-ui .expenses-page .status,
  body.use-new-ui .reports-tools-page .status,
  body.use-new-ui .proxy-manager .status,
  body.use-new-ui .cod-page .status {
    min-height: 0;
    padding: 3px 10px;
    font-size: var(--type-admin-base, 16px);
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 999px;
    line-height: 1.35;
  }

  body.use-new-ui .orders-page .status.paid,
  body.use-new-ui .inventory-page .status.paid,
  body.use-new-ui .customers-page .status.paid,
  body.use-new-ui .expenses-page .status.paid,
  body.use-new-ui .reports-tools-page .status.paid,
  body.use-new-ui .proxy-manager .status.paid,
  body.use-new-ui .cod-page .status.paid {
    background: rgba(220, 252, 231, 0.88);
    border-color: rgba(167, 243, 208, 0.85);
    color: #166534;
  }

  body.use-new-ui .orders-page .status.pending,
  body.use-new-ui .inventory-page .status.pending,
  body.use-new-ui .customers-page .status.pending,
  body.use-new-ui .expenses-page .status.pending,
  body.use-new-ui .reports-tools-page .status.pending,
  body.use-new-ui .proxy-manager .status.pending,
  body.use-new-ui .cod-page .status.pending {
    background: rgba(254, 249, 231, 0.95);
    border-color: rgba(253, 230, 138, 0.75);
    color: #a16207;
  }

  body.use-new-ui .orders-page .status.cancelled,
  body.use-new-ui .inventory-page .status.cancelled,
  body.use-new-ui .customers-page .status.cancelled,
  body.use-new-ui .expenses-page .status.cancelled,
  body.use-new-ui .reports-tools-page .status.cancelled,
  body.use-new-ui .proxy-manager .status.cancelled,
  body.use-new-ui .cod-page .status.cancelled {
    background: rgba(254, 242, 242, 0.92);
    border-color: rgba(252, 165, 165, 0.55);
    color: #b91c1c;
  }

  body.use-new-ui .orders-page .status.neutral,
  body.use-new-ui .inventory-page .status.neutral,
  body.use-new-ui .customers-page .status.neutral,
  body.use-new-ui .expenses-page .status.neutral,
  body.use-new-ui .reports-tools-page .status.neutral,
  body.use-new-ui .proxy-manager .status.neutral,
  body.use-new-ui .cod-page .status.neutral {
    background: rgba(241, 245, 249, 0.98);
    border-color: rgba(203, 213, 225, 0.85);
    color: #475569;
  }

  body.use-new-ui .orders-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.use-new-ui .inventory-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.use-new-ui .customers-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.use-new-ui .expenses-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.use-new-ui .reports-tools-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.use-new-ui .proxy-manager .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.use-new-ui .cod-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral) {
    background: rgba(248, 250, 252, 0.95);
    border-color: #e2e8f0;
    color: #64748b;
  }

  /* ---- Toolbars: 34px rhythm, search flex ---- */
  body.use-new-ui .orders-page .toolbar,
  body.use-new-ui .inventory-page .toolbar,
  body.use-new-ui .customers-page .toolbar,
  body.use-new-ui .expenses-page .toolbar,
  body.use-new-ui .reports-tools-page .toolbar,
  body.use-new-ui .proxy-manager .toolbar,
  body.use-new-ui .cod-page .cod-toolbar,
  body.use-new-ui .data-check-page .data-check-toolbar {
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }

  body.use-new-ui .orders-page .toolbar input,
  body.use-new-ui .orders-page .toolbar select,
  body.use-new-ui .orders-page .toolbar .btn,
  body.use-new-ui .inventory-page .toolbar input,
  body.use-new-ui .inventory-page .toolbar select,
  body.use-new-ui .inventory-page .toolbar .btn,
  body.use-new-ui .inventory-page .toolbar label,
  body.use-new-ui .customers-page .toolbar input,
  body.use-new-ui .customers-page .toolbar select,
  body.use-new-ui .customers-page .toolbar .btn,
  body.use-new-ui .expenses-page .toolbar input,
  body.use-new-ui .expenses-page .toolbar select,
  body.use-new-ui .expenses-page .toolbar .btn,
  body.use-new-ui .reports-tools-page .toolbar input,
  body.use-new-ui .reports-tools-page .toolbar select,
  body.use-new-ui .reports-tools-page .toolbar .btn,
  body.use-new-ui .proxy-manager .toolbar input,
  body.use-new-ui .proxy-manager .toolbar select,
  body.use-new-ui .proxy-manager .toolbar .btn,
  body.use-new-ui .cod-page .cod-toolbar input,
  body.use-new-ui .cod-page .cod-toolbar select,
  body.use-new-ui .cod-page .cod-toolbar .btn,
  body.use-new-ui .data-check-page .data-check-toolbar input,
  body.use-new-ui .data-check-page .data-check-toolbar select,
  body.use-new-ui .data-check-page .data-check-toolbar .btn {
    min-height: 34px !important;
    border-radius: 10px !important;
    box-sizing: border-box;
  }

  body.use-new-ui .cod-page #codQuickSearch {
    min-width: min(380px, 34vw) !important;
    flex: 1 1 240px !important;
  }

  body.use-new-ui .orders-page #hydraOrdersToolbar #ordersSearch {
    min-width: min(420px, 36vw) !important;
    flex: 1 1 280px !important;
  }

  body.use-new-ui .orders-page #hydraOrdersToolbar #addOrder,
  body.use-new-ui .inventory-page .toolbar .btn.primary:first-of-type,
  body.use-new-ui .customers-page .toolbar .btn.primary,
  body.use-new-ui .cod-page .table-wrap .btn.primary {
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.18);
    font-weight: 650;
  }

  /* ---- Action column: compact, no awkward wrap ---- */
  body.use-new-ui .orders-page .order-actions,
  body.use-new-ui .inventory-page .batch-actions-cell,
  body.use-new-ui .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) .product-actions-cell,
  body.use-new-ui .customers-page .customer-actions-cell,
  body.use-new-ui .expenses-page .finance-actions-cell,
  body.use-new-ui .proxy-manager .data-check-actions-cell,
  body.use-new-ui .cod-page .table-wrap td:last-child {
    width: 1%;
    white-space: nowrap;
  }

  /* COD: đủ chỗ cho 2 nút (table-layout:fixed hay cắt cột cuối) */
  body.use-new-ui .cod-page .table-wrap td.cod-actions-cell {
    width: auto;
    min-width: 220px;
    white-space: normal;
    text-align: right;
  }

  body.use-new-ui .cod-page .cod-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  /* ---- Tier / stock badges in customers (soft pills) ---- */
  body.use-new-ui .customers-page .customer-tier-badge,
  body.use-new-ui .inventory-page .stock-badge {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* ---- Dark ---- */
  body.dark.use-new-ui #contentScroll.content-scroll:has(.route-page.orders-page:not([hidden])),
  body.dark.use-new-ui #contentScroll.content-scroll:has(.route-page.inventory-page:not([hidden])),
  body.dark.use-new-ui #contentScroll.content-scroll:has(.route-page.customers-page:not([hidden])),
  body.dark.use-new-ui #contentScroll.content-scroll:has(.route-page.expenses-page:not([hidden])),
  body.dark.use-new-ui #contentScroll.content-scroll:has(.route-page.reports-tools-page:not([hidden])),
  body.dark.use-new-ui #contentScroll.content-scroll:has(.route-page.proxy-manager:not([hidden])),
  body.dark.use-new-ui #contentScroll.content-scroll:has(.route-page.cod-page:not([hidden])) {
    background: #0b1220;
    background-image: linear-gradient(180deg, #0f172a 0%, #0b1220 40%, #0b1220 100%);
  }

  body.dark.use-new-ui .orders-page .panel,
  body.dark.use-new-ui .inventory-page .panel,
  body.dark.use-new-ui .customers-page .panel,
  body.dark.use-new-ui .expenses-page .panel,
  body.dark.use-new-ui .reports-tools-page .panel,
  body.dark.use-new-ui .proxy-manager .panel,
  body.dark.use-new-ui .cod-page .panel,
  body.dark.use-new-ui .orders-page .table-wrap,
  body.dark.use-new-ui .inventory-page .table-wrap,
  body.dark.use-new-ui .customers-page .table-wrap,
  body.dark.use-new-ui .expenses-page .table-wrap,
  body.dark.use-new-ui .reports-tools-page .table-wrap,
  body.dark.use-new-ui .proxy-manager .table-wrap,
  body.dark.use-new-ui .cod-page .table-wrap,
  body.dark.use-new-ui .orders-page .orders-table-shell,
  body.dark.use-new-ui .reports-tools-page .reports-table-wrap {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(51, 65, 85, 0.55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }

  body.dark.use-new-ui .orders-page thead th,
  body.dark.use-new-ui .inventory-page thead th,
  body.dark.use-new-ui .customers-page thead th,
  body.dark.use-new-ui .expenses-page thead th,
  body.dark.use-new-ui .reports-tools-page thead th,
  body.dark.use-new-ui .proxy-manager thead th,
  body.dark.use-new-ui .cod-page thead th {
    background: rgba(30, 41, 59, 0.92) !important;
    color: #cbd5e1 !important;
    border-bottom-color: rgba(51, 65, 85, 0.65) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.5);
  }

  body.dark.use-new-ui .orders-page tbody tr:nth-child(even) td,
  body.dark.use-new-ui .inventory-page tbody tr:nth-child(even) td,
  body.dark.use-new-ui .customers-page tbody tr:nth-child(even) td,
  body.dark.use-new-ui .expenses-page tbody tr:nth-child(even) td,
  body.dark.use-new-ui .reports-tools-page tbody tr:nth-child(even) td,
  body.dark.use-new-ui .proxy-manager tbody tr:nth-child(even) td,
  body.dark.use-new-ui .cod-page tbody tr:nth-child(even) td {
    background: rgba(15, 23, 42, 0.35);
  }

  body.dark.use-new-ui .orders-page tbody tr:hover td,
  body.dark.use-new-ui .inventory-page tbody tr:hover td,
  body.dark.use-new-ui .customers-page tbody tr:hover td,
  body.dark.use-new-ui .expenses-page tbody tr:hover td,
  body.dark.use-new-ui .reports-tools-page tbody tr:hover td,
  body.dark.use-new-ui .proxy-manager tbody tr:hover td,
  body.dark.use-new-ui .cod-page tbody tr:hover td {
    background: rgba(51, 65, 85, 0.45) !important;
  }

  body.dark.use-new-ui .orders-page .status.paid,
  body.dark.use-new-ui .inventory-page .status.paid,
  body.dark.use-new-ui .customers-page .status.paid,
  body.dark.use-new-ui .expenses-page .status.paid,
  body.dark.use-new-ui .reports-tools-page .status.paid,
  body.dark.use-new-ui .proxy-manager .status.paid,
  body.dark.use-new-ui .cod-page .status.paid {
    background: rgba(6, 78, 59, 0.45);
    border-color: rgba(52, 211, 153, 0.35);
    color: #a7f3d0;
  }

  body.dark.use-new-ui .orders-page .status.pending,
  body.dark.use-new-ui .inventory-page .status.pending,
  body.dark.use-new-ui .customers-page .status.pending,
  body.dark.use-new-ui .expenses-page .status.pending,
  body.dark.use-new-ui .reports-tools-page .status.pending,
  body.dark.use-new-ui .proxy-manager .status.pending,
  body.dark.use-new-ui .cod-page .status.pending {
    background: rgba(113, 63, 18, 0.35);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fde68a;
  }

  body.dark.use-new-ui .orders-page .status.cancelled,
  body.dark.use-new-ui .inventory-page .status.cancelled,
  body.dark.use-new-ui .customers-page .status.cancelled,
  body.dark.use-new-ui .expenses-page .status.cancelled,
  body.dark.use-new-ui .reports-tools-page .status.cancelled,
  body.dark.use-new-ui .proxy-manager .status.cancelled,
  body.dark.use-new-ui .cod-page .status.cancelled {
    background: rgba(127, 29, 29, 0.35);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
  }

  body.dark.use-new-ui .orders-page .status.neutral,
  body.dark.use-new-ui .inventory-page .status.neutral,
  body.dark.use-new-ui .customers-page .status.neutral,
  body.dark.use-new-ui .expenses-page .status.neutral,
  body.dark.use-new-ui .reports-tools-page .status.neutral,
  body.dark.use-new-ui .proxy-manager .status.neutral,
  body.dark.use-new-ui .cod-page .status.neutral {
    background: rgba(30, 41, 59, 0.65);
    border-color: rgba(71, 85, 105, 0.55);
    color: #cbd5e1;
  }

  body.dark.use-new-ui .orders-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.dark.use-new-ui .inventory-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.dark.use-new-ui .customers-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.dark.use-new-ui .expenses-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.dark.use-new-ui .reports-tools-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.dark.use-new-ui .proxy-manager .status:not(.paid):not(.pending):not(.cancelled):not(.neutral),
  body.dark.use-new-ui .cod-page .status:not(.paid):not(.pending):not(.cancelled):not(.neutral) {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(51, 65, 85, 0.55);
    color: #94a3b8;
  }
}