/* Color-only exploration on the original administrator homepage snapshot. */
@property --glow-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 61%;
}

.app {
  background-image: radial-gradient(
    ellipse 52% 240px at var(--glow-x) 100%,
    rgb(from var(--color-primary) r g b / .34),
    transparent 78%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: bottom-glow-flow 18s ease-in-out infinite;
}

@keyframes bottom-glow-flow {
  0%, 100% { --glow-x: 61%; }
  25% { --glow-x: 70%; }
  75% { --glow-x: 52%; }
}

@media (prefers-reduced-motion: reduce) {
  .app { animation: none; }
}

.admin-app .metrics .metric-total-cost,
.admin-app .metrics .metric-today-cost {
  --accent: var(--color-primary);
}

.admin-app .metrics .metric-total-cost {
  background:
    radial-gradient(ellipse at 95% 95%, rgb(from var(--color-primary) r g b / .24), transparent 67%),
    linear-gradient(125deg, #292d31 0%, #1b1e22 55%, var(--color-surface) 100%);
}

.admin-app .metrics .metric-total-cost .metric-value,
.admin-app .metrics .metric-total-cost .currency,
.admin-app .metrics .metric-today-cost .metric-value,
.admin-app .metrics .metric-today-cost .currency {
  color: var(--color-primary);
}

.admin-app .metrics .metric-total-cost .sculpture {
  color: rgb(from var(--color-primary) r g b / .52);
}

.admin-app .metrics .metric-total-cost .metric-top > svg,
.admin-app .metrics .metric-today-cost .metric-top > svg {
  opacity: .95;
}

.admin-app .metrics .metric:not(.metric-total-cost):not(.metric-today-cost) .metric-top > svg {
  opacity: .43;
}

.admin-app .metrics .metric:not(.metric-total-cost):not(.metric-today-cost) .card-art {
  opacity: .52;
}

.admin-app .sidebar nav button[aria-current] {
  background: linear-gradient(100deg, rgb(from var(--color-primary) r g b / .17), #ffffff05);
}

.admin-app #spend-area stop:first-child {
  stop-opacity: .45;
}

.admin-app .chart-line-shadow {
  stroke: rgb(from var(--color-primary) r g b / .34);
}

.admin-app .chart-line {
  stroke-width: 4px;
}