/* ViyaBook Premium SaaS Theme
   Global visual layer only. It does not change Firebase/data behavior. */

:root {
  --vb-premium-bg: #f4f7fb;
  --vb-premium-bg-2: #eaf1fb;
  --vb-premium-card: rgba(255, 255, 255, 0.75);
  --vb-premium-card-strong: rgba(255, 255, 255, 0.9);
  --vb-premium-sidebar: rgba(255, 255, 255, 0.72);
  --vb-premium-text: #0f172a;
  --vb-premium-muted: #64748b;
  --vb-premium-border: rgba(148, 163, 184, 0.28);
  --vb-premium-blue: #2563ff;
  --vb-premium-blue-2: #60a5fa;
  --vb-premium-green: #10b981;
  --vb-premium-red: #ef4444;
  --vb-premium-warning: #f59e0b;
  --vb-premium-shadow: 0 24px 70px rgba(15, 23, 42, 0.11);
  --vb-premium-shadow-soft: 0 12px 34px rgba(15, 23, 42, 0.08);
  --vb-premium-radius: 24px;
  --vb-premium-radius-lg: 24px;
  --vb-premium-radius-sm: 16px;
  --vb-premium-blur: blur(18px);
  --vb-premium-font: Inter, Poppins, "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

html[data-theme="dark"] {
  --vb-premium-bg: #07111f;
  --vb-premium-bg-2: #0b1729;
  --vb-premium-card: rgba(15, 23, 42, 0.88);
  --vb-premium-card-strong: rgba(15, 23, 42, 0.96);
  --vb-premium-sidebar: #081120;
  --vb-premium-text: #f8fafc;
  --vb-premium-text-soft: #cbd5e1;
  --vb-premium-muted: #94a3b8;
  --vb-premium-border: rgba(148, 163, 184, 0.12);
  --vb-premium-blue: #2563ff;
  --vb-premium-blue-2: #3b82f6;
  --vb-premium-green: #22c55e;
  --vb-premium-red: #ef4444;
  --vb-premium-warning: #f59e0b;
  --vb-premium-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
  --vb-premium-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
}

html {
  color-scheme: light;
}

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

body {
  font-family: var(--vb-premium-font) !important;
  color: var(--vb-premium-text) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(59, 130, 246, 0.18), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(16, 185, 129, 0.14), transparent 26%),
    linear-gradient(135deg, var(--vb-premium-bg), var(--vb-premium-bg-2)) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 70%);
  z-index: -1;
}

html[data-theme="dark"] body::before {
  background-image:
    linear-gradient(rgba(148,163,184,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.08) 1px, transparent 1px);
}

.app,
.dashboard-shell,
.shell {
  background: transparent !important;
}

.main,
.main-content,
.shell > main,
.content {
  color: var(--vb-premium-text) !important;
}

body .sidebar,
body aside.sidebar,
body .viya-sidebar,
body .side {
  margin: 18px 0 18px 18px !important;
  height: calc(100vh - 36px) !important;
  min-height: calc(100vh - 36px) !important;
  border-radius: 28px !important;
  border: 1px solid var(--vb-premium-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.42)),
    var(--vb-premium-sidebar) !important;
  box-shadow: var(--vb-premium-shadow) !important;
  backdrop-filter: var(--vb-premium-blur) !important;
  -webkit-backdrop-filter: var(--vb-premium-blur) !important;
  color: var(--vb-premium-text) !important;
  overflow: hidden auto !important;
}

html[data-theme="dark"] body .sidebar,
html[data-theme="dark"] body aside.sidebar,
html[data-theme="dark"] body .viya-sidebar,
html[data-theme="dark"] body .side {
  background:
    linear-gradient(180deg, rgba(31,41,55,0.8), rgba(17,24,39,0.72)),
    var(--vb-premium-sidebar) !important;
}

.sidebar-brand,
.brand {
  color: var(--vb-premium-text) !important;
}

.vb-brand-name,
.brand h1,
.brand h2 {
  color: var(--vb-premium-text) !important;
}

.vb-brand-tag,
.brand p,
.brand small {
  color: var(--vb-premium-muted) !important;
}

.business-switcher,
.business-trigger,
.sidebar-footer,
.help-card {
  border-color: var(--vb-premium-border) !important;
  background: rgba(255,255,255,0.36) !important;
  backdrop-filter: var(--vb-premium-blur) !important;
  -webkit-backdrop-filter: var(--vb-premium-blur) !important;
}

html[data-theme="dark"] .business-switcher,
html[data-theme="dark"] .business-trigger,
html[data-theme="dark"] .sidebar-footer,
html[data-theme="dark"] .help-card {
  background: rgba(15,23,42,0.48) !important;
}

.business-current,
.business-arrow {
  color: var(--vb-premium-text) !important;
}

.sidebar-nav a,
.viya-sidebar-nav a,
.nav a,
.menu a,
.settings-link {
  color: var(--vb-premium-muted) !important;
  border: 1px solid transparent !important;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
}

.sidebar-nav a:hover,
.viya-sidebar-nav a:hover,
.nav a:hover,
.menu a:hover,
.settings-link:hover {
  color: var(--vb-premium-text) !important;
  background: rgba(37, 99, 255, 0.09) !important;
  transform: translateX(3px);
}

.sidebar-nav a.active,
.viya-sidebar-nav a.active,
.nav a.active,
.menu a.active,
.settings-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--vb-premium-blue), #1d4ed8) !important;
  box-shadow: 0 16px 36px rgba(37, 99, 255, 0.28) !important;
}

.viya-app-header,
.topbar,
.dashboard-topbar,
.header,
.top {
  position: sticky;
  top: 14px;
  z-index: 40;
  border: 1px solid var(--vb-premium-border) !important;
  border-radius: 28px !important;
  background: var(--vb-premium-card) !important;
  box-shadow: var(--vb-premium-shadow-soft) !important;
  backdrop-filter: var(--vb-premium-blur) !important;
  -webkit-backdrop-filter: var(--vb-premium-blur) !important;
  padding: 12px 14px !important;
}

.search,
.top-search,
.search-box,
.search-main,
.product-search,
.table-select,
.user-pill,
.profile,
.icon-btn,
.top-btn,
.top-action,
.business-option {
  border: 1px solid var(--vb-premium-border) !important;
  background: var(--vb-premium-card-strong) !important;
  color: var(--vb-premium-text) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05) !important;
  backdrop-filter: var(--vb-premium-blur) !important;
  -webkit-backdrop-filter: var(--vb-premium-blur) !important;
}

input,
select,
textarea {
  color: var(--vb-premium-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--vb-premium-muted), transparent 18%) !important;
}

.card,
.panel,
.mini-card,
.content-card,
.summary-card,
.metric-card,
.stat-card,
.role-card,
.plan-card,
.export-card,
.order-panel,
.menu-panel,
.product-card,
.modal-card,
.login-card,
.login-panel,
.vb-login-card,
.vb-login-card-new,
.table-wrap {
  border: 1px solid var(--vb-premium-border) !important;
  border-radius: var(--vb-premium-radius) !important;
  background: var(--vb-premium-card) !important;
  box-shadow: var(--vb-premium-shadow-soft) !important;
  backdrop-filter: var(--vb-premium-blur) !important;
  -webkit-backdrop-filter: var(--vb-premium-blur) !important;
  color: var(--vb-premium-text) !important;
}

.card,
.summary-card,
.metric-card,
.stat-card,
.product-card,
.quick-link-card,
.mini-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.card:hover,
.summary-card:hover,
.metric-card:hover,
.stat-card:hover,
.product-card:hover,
.quick-link-card:hover,
.mini-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vb-premium-shadow) !important;
  border-color: rgba(37, 99, 255, 0.32) !important;
}

.btn,
button,
.primary-button,
.btn-primary,
.add-product-main,
.pay-order,
.save-order,
.export-btn,
.view-btn,
.add-biz-btn {
  border-radius: 16px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.btn:hover,
button:hover,
.primary-button:hover,
.btn-primary:hover,
.add-product-main:hover,
.pay-order:hover,
.save-order:hover,
.export-btn:hover,
.view-btn:hover,
.add-biz-btn:hover {
  transform: translateY(-1px);
}

.btn-primary,
.primary-button,
.add-product-main,
.pay-order,
.export-btn,
.add-biz-btn {
  color: #fff !important;
  background: linear-gradient(135deg, var(--vb-premium-blue), #1d4ed8) !important;
  box-shadow: 0 16px 36px rgba(37, 99, 255, 0.28) !important;
}

.btn-light,
.btn-secondary,
.ghost,
.print-order,
.pdf-order,
.save-order,
.biz-open-btn,
.customer-tool-btn,
.add-customer,
.scan-bill-btn {
  color: var(--vb-premium-blue) !important;
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(37, 99, 255, 0.24) !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .ghost,
html[data-theme="dark"] .print-order,
html[data-theme="dark"] .pdf-order,
html[data-theme="dark"] .save-order,
html[data-theme="dark"] .biz-open-btn,
html[data-theme="dark"] .customer-tool-btn,
html[data-theme="dark"] .add-customer,
html[data-theme="dark"] .scan-bill-btn {
  background: rgba(15,23,42,0.55) !important;
}

.btn-danger,
.danger,
.delete,
.customer-tool-btn.danger {
  color: var(--vb-premium-red) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}

thead th,
th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--vb-premium-muted) !important;
  background: rgba(148, 163, 184, 0.1) !important;
  border: 0 !important;
}

td {
  background: var(--vb-premium-card) !important;
  border-top: 1px solid var(--vb-premium-border) !important;
  border-bottom: 1px solid var(--vb-premium-border) !important;
  color: var(--vb-premium-text) !important;
}

tbody tr:hover td {
  background: rgba(37, 99, 255, 0.07) !important;
}

tbody tr td:first-child {
  border-left: 1px solid var(--vb-premium-border) !important;
  border-radius: 14px 0 0 14px !important;
}

tbody tr td:last-child {
  border-right: 1px solid var(--vb-premium-border) !important;
  border-radius: 0 14px 14px 0 !important;
}

.modal,
.modal-bg,
.viya-modal-backdrop {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  background: rgba(15, 23, 42, 0.38) !important;
}

.viya-theme-toggle {
  min-height: 42px;
  border: 1px solid var(--vb-premium-border);
  border-radius: 999px;
  color: var(--vb-premium-text);
  background: var(--vb-premium-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: var(--vb-premium-shadow-soft);
  backdrop-filter: var(--vb-premium-blur);
  -webkit-backdrop-filter: var(--vb-premium-blur);
}

.viya-theme-toggle {
  width: 100%;
  margin-bottom: 10px;
}

.logout-button,
.viya-logout {
  border-radius: 16px !important;
  border: 1px solid var(--vb-premium-border) !important;
  color: var(--vb-premium-text) !important;
  background: rgba(255,255,255,0.42) !important;
}

html[data-theme="dark"] .logout-button,
html[data-theme="dark"] .viya-logout {
  background: rgba(15,23,42,0.48) !important;
}

.viya-auth-page,
.login-page,
.page-shell,
.vb-login-page {
  background:
    radial-gradient(circle at 20% 20%, rgba(37, 99, 255, 0.26), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(16, 185, 129, 0.2), transparent 28%),
    linear-gradient(135deg, var(--vb-premium-bg), var(--vb-premium-bg-2)) !important;
}

.login-card,
.login-panel,
.vb-login-card,
.vb-login-card-new {
  max-width: 460px;
}

@media (max-width: 1023px) {
  body .sidebar,
  body aside.sidebar,
  body .viya-sidebar,
  body .side {
    margin: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    border-radius: 0 28px 28px 0 !important;
  }

  .viya-app-header,
  .topbar,
  .dashboard-topbar,
  .header,
  .top {
    top: 8px;
    border-radius: 20px !important;
  }
}

@media (max-width: 720px) {
  .main,
  .main-content,
  .shell > main {
    padding: 14px !important;
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    position: static;
  }
}

input,
select,
textarea,
.input-box,
.search-box,
.search-input,
.filter-input,
.form-control,
.form-input,
.select-control,
.dropdown,
.dropdown-menu,
.profile-menu,
.menu,
.cart-panel,
.order-panel,
.payment-panel,
.checkout-panel,
.settings-panel,
.settings-section,
.invoice-panel,
.trip-panel,
.pos-panel,
.cash-drawer-panel {
  border-color: var(--vb-premium-border) !important;
  color: var(--vb-premium-text) !important;
  background-color: var(--vb-premium-card) !important;
  backdrop-filter: var(--vb-premium-blur);
  -webkit-backdrop-filter: var(--vb-premium-blur);
}

input::placeholder,
textarea::placeholder {
  color: var(--vb-premium-muted) !important;
  opacity: 0.78;
}

option {
  color: var(--vb-premium-text);
  background: var(--vb-premium-bg-2);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input-box,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .filter-input,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .select-control,
html[data-theme="dark"] .dropdown,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .profile-menu,
html[data-theme="dark"] .menu,
html[data-theme="dark"] .cart-panel,
html[data-theme="dark"] .order-panel,
html[data-theme="dark"] .payment-panel,
html[data-theme="dark"] .checkout-panel,
html[data-theme="dark"] .settings-panel,
html[data-theme="dark"] .settings-section,
html[data-theme="dark"] .invoice-panel,
html[data-theme="dark"] .trip-panel,
html[data-theme="dark"] .pos-panel,
html[data-theme="dark"] .cash-drawer-panel {
  background-color: rgba(15, 23, 42, 0.74) !important;
  color: var(--vb-premium-text) !important;
}

html[data-theme="dark"] option {
  color: #f8fafc !important;
  background: #0b1120 !important;
}

.viya-modal-card,
.modal-content,
.modal-box,
.dialog,
.popup,
.toast,
.viya-toast {
  border: 1px solid var(--vb-premium-border) !important;
  border-radius: var(--vb-premium-radius-lg) !important;
  background: var(--vb-premium-card-strong) !important;
  color: var(--vb-premium-text) !important;
  box-shadow: var(--vb-premium-shadow) !important;
  backdrop-filter: var(--vb-premium-blur) !important;
  -webkit-backdrop-filter: var(--vb-premium-blur) !important;
}

button,
.btn,
.button,
.primary-button,
.secondary-button,
.danger-button,
.success-button,
.ghost-button {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

button:not(:disabled):hover,
.btn:not(:disabled):hover,
.button:not(:disabled):hover,
.primary-button:not(:disabled):hover,
.secondary-button:not(:disabled):hover,
.danger-button:not(:disabled):hover,
.success-button:not(:disabled):hover,
.ghost-button:not(:disabled):hover {
  transform: translateY(-1px);
}

button:disabled,
.btn:disabled,
.button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* True premium dark mode. Keep this block last so it wins over page-specific CSS. */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #0b1120 !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 14% 8%, rgba(37, 99, 255, 0.22), transparent 30%),
    radial-gradient(circle at 86% 0%, rgba(14, 165, 233, 0.14), transparent 28%),
    linear-gradient(135deg, #0b1120 0%, #111827 100%) !important;
}

html[data-theme="dark"] body::before {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px) !important;
}

html[data-theme="dark"] .app,
html[data-theme="dark"] .dashboard-shell,
html[data-theme="dark"] .shell,
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .main,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .dashboard-content,
html[data-theme="dark"] .settings-content,
html[data-theme="dark"] .checkout-content,
html[data-theme="dark"] .invoice-content,
html[data-theme="dark"] .trip-content,
html[data-theme="dark"] .sales-content,
html[data-theme="dark"] main {
  background: transparent !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body .sidebar,
html[data-theme="dark"] body aside.sidebar,
html[data-theme="dark"] body .viya-sidebar,
html[data-theme="dark"] body .side {
  background:
    linear-gradient(180deg, rgba(8, 17, 32, 0.96), rgba(8, 17, 32, 0.9)),
    #081120 !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .viya-app-header,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .dashboard-topbar,
html[data-theme="dark"] .header,
html[data-theme="dark"] .top,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .app-header {
  background: rgba(17, 24, 39, 0.92) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .overview-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .business-card,
html[data-theme="dark"] .business-summary,
html[data-theme="dark"] .recent-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .quick-link-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-section,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .export-card,
html[data-theme="dark"] .trip-card,
html[data-theme="dark"] .invoice-card,
html[data-theme="dark"] .customer-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .expense-card,
html[data-theme="dark"] .staff-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .checkout-card,
html[data-theme="dark"] .cart-panel,
html[data-theme="dark"] .order-panel,
html[data-theme="dark"] .payment-panel,
html[data-theme="dark"] .menu-panel,
html[data-theme="dark"] .pos-panel,
html[data-theme="dark"] .cash-drawer-panel,
html[data-theme="dark"] .invoice-panel,
html[data-theme="dark"] .trip-panel,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .login-panel,
html[data-theme="dark"] .vb-login-card,
html[data-theme="dark"] .vb-login-card-new {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html[data-theme="dark"] .card *,
html[data-theme="dark"] .panel *,
html[data-theme="dark"] .kpi-card *,
html[data-theme="dark"] .metric-card *,
html[data-theme="dark"] .stat-card *,
html[data-theme="dark"] .summary-card *,
html[data-theme="dark"] .dashboard-card *,
html[data-theme="dark"] .business-summary *,
html[data-theme="dark"] .recent-card *,
html[data-theme="dark"] .settings-card *,
html[data-theme="dark"] .trip-card *,
html[data-theme="dark"] .invoice-card *,
html[data-theme="dark"] .checkout-card *,
html[data-theme="dark"] .order-panel *,
html[data-theme="dark"] .payment-panel * {
  color: inherit;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .metric-title,
html[data-theme="dark"] .stat-title,
html[data-theme="dark"] .business-name,
html[data-theme="dark"] .profile-name,
html[data-theme="dark"] .user-name {
  color: #f8fafc !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .description,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .card-subtitle,
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .stat-label {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .value,
html[data-theme="dark"] .amount,
html[data-theme="dark"] .total,
html[data-theme="dark"] .balance,
html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .kpi-value,
html[data-theme="dark"] .summary-value,
html[data-theme="dark"] .number,
html[data-theme="dark"] .count,
html[data-theme="dark"] strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .caption,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb *,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .empty-state p {
  color: #94a3b8 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input-box,
html[data-theme="dark"] .search,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .top-search,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .select-control,
html[data-theme="dark"] .filter-input,
html[data-theme="dark"] .filter-select,
html[data-theme="dark"] .dropdown,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .profile-menu,
html[data-theme="dark"] .business-option,
html[data-theme="dark"] .user-pill,
html[data-theme="dark"] .profile,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .top-btn,
html[data-theme="dark"] .top-action {
  background: rgba(17, 24, 39, 0.82) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .search-input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .data-table {
  background: transparent !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] thead tr,
html[data-theme="dark"] thead th,
html[data-theme="dark"] th {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="dark"] tbody,
html[data-theme="dark"] tbody tr {
  background: transparent !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] td {
  background: rgba(15, 23, 42, 0.78) !important;
  color: #f8fafc !important;
  border-top: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="dark"] tbody tr:hover td,
html[data-theme="dark"] tr:hover td {
  background: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .button-primary,
html[data-theme="dark"] .add-product-main,
html[data-theme="dark"] .pay-order,
html[data-theme="dark"] .complete-sale,
html[data-theme="dark"] .export-btn,
html[data-theme="dark"] .add-biz-btn {
  background: linear-gradient(135deg, #2563ff, #3b82f6) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 16px 36px rgba(37, 99, 255, 0.28) !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .primary-button:hover,
html[data-theme="dark"] .btn.primary:hover,
html[data-theme="dark"] .button-primary:hover {
  background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .ghost,
html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .print-order,
html[data-theme="dark"] .pdf-order,
html[data-theme="dark"] .save-order,
html[data-theme="dark"] .biz-open-btn,
html[data-theme="dark"] .customer-tool-btn,
html[data-theme="dark"] .add-customer,
html[data-theme="dark"] .scan-bill-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .danger,
html[data-theme="dark"] .danger-button,
html[data-theme="dark"] .delete,
html[data-theme="dark"] .customer-tool-btn.danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
  color: #fecaca !important;
}

html[data-theme="dark"] .success,
html[data-theme="dark"] .success-button,
html[data-theme="dark"] .status-paid,
html[data-theme="dark"] .badge-success {
  background: rgba(34, 197, 94, 0.14) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  color: #86efac !important;
}

html[data-theme="dark"] .warning,
html[data-theme="dark"] .status-pending,
html[data-theme="dark"] .badge-warning {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  color: #fde68a !important;
}

html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-bg,
html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .viya-modal-backdrop {
  background: rgba(2, 6, 23, 0.72) !important;
}

html[data-theme="dark"] .viya-modal-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .popup {
  background: rgba(15, 23, 42, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .divider,
html[data-theme="dark"] .line,
html[data-theme="dark"] .border,
html[data-theme="dark"] .section-divider {
  border-color: rgba(148, 163, 184, 0.12) !important;
  background-color: rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="dark"] canvas,
html[data-theme="dark"] .chart,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .chart-container {
  background: transparent !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .white,
html[data-theme="dark"] .white-card,
html[data-theme="dark"] .surface,
html[data-theme="dark"] .surface-card,
html[data-theme="dark"] .light-card,
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="#f3f4f6"],
html[data-theme="dark"] [style*="#f8fafc"],
html[data-theme="dark"] [style*="#ffffff"] {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] [style*="color:#111"],
html[data-theme="dark"] [style*="color: #111"],
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color: #0f172a"],
html[data-theme="dark"] [style*="color:#1f2937"],
html[data-theme="dark"] [style*="color: #1f2937"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color: #334155"] {
  color: #f8fafc !important;
}

html[data-theme="dark"] .bg-muted,
html[data-theme="dark"] .muted-card,
html[data-theme="dark"] .soft-bg,
html[data-theme="dark"] .gray-card,
html[data-theme="dark"] .grey-card,
html[data-theme="dark"] [style*="#f9fafb"],
html[data-theme="dark"] [style*="#f1f5f9"],
html[data-theme="dark"] [style*="#e5e7eb"],
html[data-theme="dark"] [style*="#e2e8f0"] {
  background: rgba(17, 24, 39, 0.82) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .metric,
html[data-theme="dark"] .metrics > *,
html[data-theme="dark"] .quick-actions button,
html[data-theme="dark"] .date-btn,
html[data-theme="dark"] .export-btn,
html[data-theme="dark"] .start-card,
html[data-theme="dark"] .summary-tile,
html[data-theme="dark"] .drawer-alert,
html[data-theme="dark"] .held-row,
html[data-theme="dark"] .sale-actions,
html[data-theme="dark"] .result-row,
html[data-theme="dark"] .add-custom,
html[data-theme="dark"] .scan-btn,
html[data-theme="dark"] .pay-btn,
html[data-theme="dark"] .trip-tab,
html[data-theme="dark"] .trip-card-box,
html[data-theme="dark"] .detail-stat,
html[data-theme="dark"] .donut-box,
html[data-theme="dark"] .detail-table-card,
html[data-theme="dark"] .trip-modal-card,
html[data-theme="dark"] .more-menu,
html[data-theme="dark"] .more-menu button,
html[data-theme="dark"] .close,
html[data-theme="dark"] .select,
html[data-theme="dark"] .input,
html[data-theme="dark"] .money-input,
html[data-theme="dark"] .received-input,
html[data-theme="dark"] .actual-input,
html[data-theme="dark"] .qty,
html[data-theme="dark"] .qty button {
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] button,
html[data-theme="dark"] a.btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .primary,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] .quick-actions button.primary,
html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .button-primary,
html[data-theme="dark"] #addTripBtn,
html[data-theme="dark"] #completeSaleBtn,
html[data-theme="dark"] #holdSaleTopBtn {
  background: linear-gradient(135deg, #2563ff, #3b82f6) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 16px 36px rgba(37, 99, 255, 0.3) !important;
}

html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .danger,
html[data-theme="dark"] #clearCartBtn,
html[data-theme="dark"] #closeDrawerBtn,
html[data-theme="dark"] .delete-btn {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fecaca !important;
}

html[data-theme="dark"] .pay-btn.active,
html[data-theme="dark"] .trip-tab.active,
html[data-theme="dark"] .btn-light.active,
html[data-theme="dark"] .grid.active,
html[data-theme="dark"] .list.active {
  background: rgba(37, 99, 255, 0.18) !important;
  border-color: rgba(59, 130, 246, 0.75) !important;
  color: #bfdbfe !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.55), 0 12px 32px rgba(37, 99, 255, 0.14) !important;
}

html[data-theme="dark"] button:disabled,
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .button:disabled,
html[data-theme="dark"] .pay-btn:disabled {
  background: rgba(30, 41, 59, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
  color: #94a3b8 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .micon,
html[data-theme="dark"] .kpi-icon,
html[data-theme="dark"] .blue,
html[data-theme="dark"] .orange,
html[data-theme="dark"] .green,
html[data-theme="dark"] .purple,
html[data-theme="dark"] .bg-blue,
html[data-theme="dark"] .bg-green,
html[data-theme="dark"] .bg-orange,
html[data-theme="dark"] .bg-purple {
  background: rgba(37, 99, 255, 0.12) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.18) !important;
}

html[data-theme="dark"] .bg-green,
html[data-theme="dark"] .green:not(.btn):not(button) {
  color: #86efac !important;
}

html[data-theme="dark"] .bg-orange,
html[data-theme="dark"] .orange:not(.btn):not(button) {
  color: #fdba74 !important;
}

html[data-theme="dark"] .bg-purple,
html[data-theme="dark"] .purple:not(.btn):not(button) {
  color: #c4b5fd !important;
}

html[data-theme="dark"] .active.pill,
html[data-theme="dark"] .pill.active,
html[data-theme="dark"] .status-pill.open {
  background: rgba(34, 197, 94, 0.16) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.24) !important;
}

html[data-theme="dark"] .completed,
html[data-theme="dark"] .paid {
  background: rgba(37, 99, 255, 0.16) !important;
  color: #bfdbfe !important;
}

html[data-theme="dark"] .onhold,
html[data-theme="dark"] .unpaid,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .status-pill {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #fde68a !important;
  border: 1px solid rgba(245, 158, 11, 0.24) !important;
}

html[data-theme="dark"] .view-btn,
html[data-theme="dark"] .link-btn,
html[data-theme="dark"] a {
  color: #93c5fd !important;
}

html[data-theme="dark"] .field label,
html[data-theme="dark"] .quick-item,
html[data-theme="dark"] .drawer-grid,
html[data-theme="dark"] .drawer-alert span,
html[data-theme="dark"] .start-card p,
html[data-theme="dark"] .summary-tile span,
html[data-theme="dark"] .item-sub,
html[data-theme="dark"] .small,
html[data-theme="dark"] .info-row span:first-child {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .donut:after {
  background: #0b1120 !important;
}

body .sidebar,
body aside.sidebar,
body .viya-sidebar,
body .app-sidebar {
  background: linear-gradient(180deg, #071427 0%, #081b33 45%, #020817 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #f8fafc !important;
}

.sidebar-footer {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

.business-switcher,
.business-trigger,
.viya-theme-toggle,
.switch-options,
.logout-button,
.viya-logout {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

.business-current,
.business-arrow,
.business-option,
.toggle-label,
.switch-option,
.switch-options button {
  color: #cbd5e1 !important;
}

.business-icon {
  background: rgba(255,255,255,0.06) !important;
  color: #f8fafc !important;
}

/* Universal ViyaBook dark system. This is the final shared dark layer for every page. */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #07111f !important;
  color: #f8fafc !important;
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 14% 8%, rgba(37, 99, 255, 0.18), transparent 28%),
    radial-gradient(circle at 86% 0%, rgba(59, 130, 246, 0.10), transparent 28%),
    linear-gradient(135deg, #07111f 0%, #0b1729 45%, #020817 100%) !important;
}

html[data-theme="dark"] body .sidebar,
html[data-theme="dark"] body aside.sidebar,
html[data-theme="dark"] body .viya-sidebar,
html[data-theme="dark"] body .app-sidebar,
html[data-theme="dark"] body .side {
  background: linear-gradient(180deg, #071427 0%, #081b33 45%, #020817 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .app,
html[data-theme="dark"] .dashboard-shell,
html[data-theme="dark"] .shell,
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .layout,
html[data-theme="dark"] .dashboard-layout,
html[data-theme="dark"] .main,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .viya-main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] main {
  background: transparent !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .viya-app-header,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .dashboard-topbar,
html[data-theme="dark"] .top,
html[data-theme="dark"] .header,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .top-row,
html[data-theme="dark"] .customer-head,
html[data-theme="dark"] .settings-title,
html[data-theme="dark"] .panel-head {
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 35px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .menu,
html[data-theme="dark"] .settings-menu,
html[data-theme="dark"] .typecard,
html[data-theme="dark"] .type-card,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table-shell,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .layout-card,
html[data-theme="dark"] .items-card,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .quick-link-card,
html[data-theme="dark"] .business-summary,
html[data-theme="dark"] .business-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-panel,
html[data-theme="dark"] .settings-section,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .export-card,
html[data-theme="dark"] .trip-card,
html[data-theme="dark"] .trip-card-box,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .invoice-card,
html[data-theme="dark"] .customer-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .products-card,
html[data-theme="dark"] .expense-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .staff-card,
html[data-theme="dark"] .checkout-card,
html[data-theme="dark"] .cart-panel,
html[data-theme="dark"] .order-panel,
html[data-theme="dark"] .payment-panel,
html[data-theme="dark"] .menu-panel,
html[data-theme="dark"] .items-panel,
html[data-theme="dark"] .pos-panel,
html[data-theme="dark"] .cash-drawer-panel,
html[data-theme="dark"] .drawer-alert,
html[data-theme="dark"] .summary-tile,
html[data-theme="dark"] .start-card,
html[data-theme="dark"] .detail-stat,
html[data-theme="dark"] .detail-table-card,
html[data-theme="dark"] .donut-box,
html[data-theme="dark"] .upload,
html[data-theme="dark"] .toggle,
html[data-theme="dark"] .pref,
html[data-theme="dark"] .preview-topbar,
html[data-theme="dark"] .vb-mini-card,
html[data-theme="dark"] .vb-floating-card,
html[data-theme="dark"] .vb-phone-card,
html[data-theme="dark"] .vb-chart-card,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .trip-modal-card,
html[data-theme="dark"] .viya-business-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .login-panel,
html[data-theme="dark"] .vb-login-card,
html[data-theme="dark"] .vb-login-card-new {
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 35px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .topbar-title h1,
html[data-theme="dark"] .panel-head h2 {
  color: #f8fafc !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] span,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .small,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .description,
html[data-theme="dark"] .label,
html[data-theme="dark"] .kpi-title,
html[data-theme="dark"] .stat-card-title,
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .summary-tile span {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .muted-2,
html[data-theme="dark"] .caption,
html[data-theme="dark"] .crumb,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .empty-row,
html[data-theme="dark"] .placeholder {
  color: #94a3b8 !important;
}

html[data-theme="dark"] strong,
html[data-theme="dark"] .value,
html[data-theme="dark"] .amount,
html[data-theme="dark"] .total,
html[data-theme="dark"] .balance,
html[data-theme="dark"] .kpi-value,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .summary-value,
html[data-theme="dark"] .number,
html[data-theme="dark"] .count {
  color: #ffffff !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] option,
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .switcher,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .filter-input,
html[data-theme="dark"] .filter-select,
html[data-theme="dark"] .money-input,
html[data-theme="dark"] .received-input,
html[data-theme="dark"] .actual-input,
html[data-theme="dark"] .search,
html[data-theme="dark"] .search-main,
html[data-theme="dark"] .top-search,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .viya-header-search,
html[data-theme="dark"] .dropdown,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .add-menu,
html[data-theme="dark"] .action-menu,
html[data-theme="dark"] .more-menu,
html[data-theme="dark"] .profile-menu,
html[data-theme="dark"] .viya-profile-menu,
html[data-theme="dark"] .business-options,
html[data-theme="dark"] .customer-dropdown,
html[data-theme="dark"] .product-list,
html[data-theme="dark"] .search-results {
  background: rgba(15, 23, 42, 0.9) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .data-table {
  background: transparent !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] thead tr,
html[data-theme="dark"] th {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

html[data-theme="dark"] tbody,
html[data-theme="dark"] tbody tr {
  background: transparent !important;
}

html[data-theme="dark"] td {
  background: rgba(15, 23, 42, 0.72) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

html[data-theme="dark"] tbody tr:hover,
html[data-theme="dark"] tbody tr:hover td,
html[data-theme="dark"] tr:hover td,
html[data-theme="dark"] .result-row:hover,
html[data-theme="dark"] .business-option:hover,
html[data-theme="dark"] .action-menu button:hover,
html[data-theme="dark"] .more-menu button:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .button,
html[data-theme="dark"] a.btn,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .top-btn,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .viya-icon-btn,
html[data-theme="dark"] .viya-back-btn,
html[data-theme="dark"] .viya-profile-trigger,
html[data-theme="dark"] .user-pill,
html[data-theme="dark"] .profile,
html[data-theme="dark"] .pay-btn,
html[data-theme="dark"] .scan-btn,
html[data-theme="dark"] .view-btn,
html[data-theme="dark"] .link-btn,
html[data-theme="dark"] .dots {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.22) !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .button-primary,
html[data-theme="dark"] .primary,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] .pill.active,
html[data-theme="dark"] .quick-actions button.primary,
html[data-theme="dark"] #addTripBtn,
html[data-theme="dark"] #completeSaleBtn,
html[data-theme="dark"] #holdSaleTopBtn {
  background: linear-gradient(135deg, #2563ff, #3b82f6) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 16px 36px rgba(37,99,255,0.30) !important;
}

html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-bg,
html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .viya-modal-backdrop,
html[data-theme="dark"] .viya-business-modal {
  background: rgba(2, 6, 23, 0.72) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="#f3f4f6"],
html[data-theme="dark"] [style*="#f5f8fd"],
html[data-theme="dark"] [style*="#f6f9ff"],
html[data-theme="dark"] [style*="#f8fafc"],
html[data-theme="dark"] [style*="#ffffff"] {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}