/* Dashboard polish overrides for the deployed bundle. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --panel-ring: color-mix(in srgb, var(--primary) 18%, transparent);
  --warm-accent: #f59e0b;
  --cool-accent: #2563eb;
  --violet-accent: #7c3aed;
}

.page {
  background-image:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent 34%),
    radial-gradient(var(--dot-color) 1px, transparent 1px);
  animation: pageReveal .42s var(--motion-ease);
}

.topbar {
  box-shadow: 0 10px 28px -24px rgba(15, 23, 42, .5);
}

.sidebar {
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--border) 65%, transparent);
}

.nav-item,
.btn,
.badge,
.inp,
.sel,
.txa {
  will-change: transform;
}

.card,
.glass-card,
.kpi-card {
  isolation: isolate;
}

.card:hover,
.glass-card:hover,
.kpi-card:hover {
  box-shadow: var(--shadow-lg), var(--card-shine);
}

.kpi-card {
  min-height: 128px;
  border-color: color-mix(in srgb, var(--border) 78%, var(--primary) 22%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, #fff 8%), var(--bg-card)),
    var(--bg-card);
  animation: cardRise .48s var(--motion-ease) both;
}

.kpi-card:nth-of-type(2) {
  animation-delay: .04s;
}

.kpi-card:nth-of-type(3) {
  animation-delay: .08s;
}

.kpi-card:nth-of-type(4) {
  animation-delay: .12s;
}

.kpi-card::before {
  opacity: .75;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 56%),
    linear-gradient(135deg, color-mix(in srgb, var(--cool-accent) 10%, transparent), transparent 62%);
}

.kpi-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), var(--cool-accent), var(--warm-accent));
  opacity: .72;
  transform: scaleX(.42);
  transform-origin: left;
  transition: transform .3s var(--motion-ease), opacity .3s var(--motion-ease);
  z-index: 0;
}

.kpi-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.kpi-value {
  letter-spacing: 0;
  text-wrap: balance;
}

.icon-box {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 8px 18px -14px currentColor;
}

.icon-green,
.icon-blue,
.icon-amber,
.icon-rose,
.icon-purple {
  position: relative;
}

.icon-box:hover svg,
.btn:hover svg,
.nav-item:hover svg {
  transform: translateY(-1px) scale(1.06);
  transition: transform .2s var(--motion-ease);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #16a34a 44%, #0ea5e9 100%);
}

.btn-primary:not(:disabled):hover {
  box-shadow: 0 10px 22px -12px var(--primary-glow), 0 0 0 3px var(--panel-ring);
}

.btn-secondary,
.btn-ghost {
  backdrop-filter: blur(8px);
}

.tbl tbody tr {
  transform-origin: center;
}

.tbl tbody tr:hover {
  transform: translateX(3px);
}

.dropdown-panel,
.modal,
.card:not(.kpi-card) {
  animation: softIn .28s var(--motion-ease) both;
}

.badge {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.search-wrap:focus-within .search-icon {
  color: var(--primary);
  transform: translateY(-50%) scale(1.08);
  transition: transform .2s var(--motion-ease), color .2s var(--motion-ease);
}

.dark .kpi-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 88%, #1f2937 12%), var(--bg-card)),
    var(--bg-card);
  border-color: color-mix(in srgb, var(--border) 72%, var(--primary) 28%);
}

.dark .topbar {
  box-shadow: 0 12px 30px -22px rgba(0, 0, 0, .9);
}

@keyframes cardRise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes softIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageReveal {
  from {
    opacity: .72;
    filter: saturate(.9);
  }
  to {
    opacity: 1;
    filter: saturate(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}