:root{
  --bg: #f5f7fb;
}
.bg-soft{ background: var(--bg); }

.card.kpi .h5{ letter-spacing: -0.02em; }
.card.kpi.success{ outline: 1px solid rgba(25,135,84,.15); }
.card.kpi.warn{ outline: 1px solid rgba(255,193,7,.25); }
.card.kpi.muted{ outline: 1px solid rgba(108,117,125,.15); }
.card.kpi.money{ outline: 1px solid rgba(13,110,253,.15); }

.table td{ vertical-align: middle; }
.rounded-4{ border-radius: 1rem !important; }
.driver-icon{
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

/* WowDash overrides: make sales-card gradients more vivid (tropical + futuristic) */
:root{
  --rg-g1-a: rgba(0, 229, 255, 0.26);
  --rg-g1-b: rgba(0, 255, 163, 0.18);
  --rg-g1-c: rgba(255, 214, 0, 0.10);

  --rg-g2-a: rgba(255, 0, 153, 0.22);
  --rg-g2-b: rgba(0, 153, 255, 0.16);
  --rg-g2-c: rgba(0, 255, 209, 0.10);

  --rg-g3-a: rgba(123, 47, 255, 0.22);
  --rg-g3-b: rgba(0, 255, 214, 0.16);
  --rg-g3-c: rgba(255, 0, 102, 0.10);

  --rg-g4-a: rgba(255, 153, 0, 0.22);
  --rg-g4-b: rgba(0, 255, 102, 0.16);
  --rg-g4-c: rgba(0, 195, 255, 0.10);
}

.sales-card-gradient-bg-1,
.sales-card-gradient-bg-2,
.sales-card-gradient-bg-3,
.sales-card-gradient-bg-4{
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-color: rgba(72, 127, 255, 0.18) !important;
  box-shadow:
    0 12px 30px rgba(12, 20, 38, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.sales-card-gradient-bg-1{
  background:
    radial-gradient(900px circle at 15% 10%, var(--rg-g1-a), transparent 58%),
    radial-gradient(700px circle at 85% 15%, var(--rg-g1-b), transparent 60%),
    radial-gradient(900px circle at 40% 110%, var(--rg-g1-c), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));
}

.sales-card-gradient-bg-2{
  background:
    radial-gradient(900px circle at 20% 0%, var(--rg-g2-a), transparent 58%),
    radial-gradient(800px circle at 95% 35%, var(--rg-g2-b), transparent 60%),
    radial-gradient(900px circle at 45% 120%, var(--rg-g2-c), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));
}

.sales-card-gradient-bg-3{
  background:
    radial-gradient(900px circle at 10% 25%, var(--rg-g3-a), transparent 58%),
    radial-gradient(900px circle at 90% 0%, var(--rg-g3-b), transparent 60%),
    radial-gradient(900px circle at 55% 120%, var(--rg-g3-c), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));
}

.sales-card-gradient-bg-4{
  background:
    radial-gradient(900px circle at 10% 0%, var(--rg-g4-a), transparent 58%),
    radial-gradient(900px circle at 95% 25%, var(--rg-g4-b), transparent 60%),
    radial-gradient(900px circle at 35% 120%, var(--rg-g4-c), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));
}

.sales-card-gradient-bg-1::after,
.sales-card-gradient-bg-2::after,
.sales-card-gradient-bg-3::after,
.sales-card-gradient-bg-4::after{
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.55), transparent 40%, rgba(255,255,255,0.15));
  opacity: 0.75;
  mix-blend-mode: overlay;
}

[data-theme=dark] .sales-card-gradient-bg-1,
[data-theme=dark] .sales-card-gradient-bg-2,
[data-theme=dark] .sales-card-gradient-bg-3,
[data-theme=dark] .sales-card-gradient-bg-4{
  border-color: rgba(0, 229, 255, 0.22) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}