:root {
  --dashboard-primary: #5e43c9;
  --dashboard-primary-container: #775ee4;
  --dashboard-primary-soft: #e6deff;
  --dashboard-surface: #fdf8ff;
  --dashboard-page: #f5f7ff;
  --dashboard-border: #c9c4d6;
  --dashboard-text: #1c1a23;
  --dashboard-muted: #484554;
  --dashboard-error: #ba1a1a;
}

html,
body {
  background: var(--dashboard-page) !important;
  color: var(--dashboard-text) !important;
}

body {
  font-family: "Plus Jakarta Sans", "Inter", "Noto Sans SC", "PingFang SC", sans-serif !important;
}

body > header,
main > header,
.app-topbar {
  background: rgb(253 248 255 / 0.86) !important;
  backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgb(201 196 214 / 0.45) !important;
  box-shadow: none !important;
}

main {
  background: var(--dashboard-page) !important;
}

section,
.glass-panel {
  background-color: transparent;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--dashboard-text);
  letter-spacing: -0.025em;
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
  background-color: rgb(241 236 248 / 0.95) !important;
  border-color: rgb(201 196 214 / 0.55) !important;
  border-radius: 0.75rem !important;
}

input:focus,
select:focus,
textarea:focus {
  --tw-ring-color: rgb(94 67 201 / 0.24) !important;
  border-color: rgb(94 67 201 / 0.45) !important;
}

button {
  border-radius: 0.75rem;
}

.rounded,
.rounded-md {
  border-radius: 0.75rem !important;
}

.rounded-lg,
.rounded-xl {
  border-radius: 1rem !important;
}

table thead,
.bg-stone-50,
.bg-slate-50,
.bg-stone-50\/50,
.bg-slate-50\/50,
.bg-slate-50\/30 {
  background-color: rgb(247 241 253 / 0.86) !important;
}

.border-stone-100,
.border-stone-200,
.border-slate-100,
.border-slate-200,
.divide-stone-50 > :not([hidden]) ~ :not([hidden]),
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(201 196 214 / 0.35) !important;
}

.bg-slate-100,
.bg-stone-100,
.bg-stone-200,
.bg-slate-200,
.hover\:bg-stone-100:hover,
.hover\:bg-stone-200\/50:hover,
.hover\:bg-slate-100:hover,
.hover\:bg-slate-50:hover {
  background-color: rgb(241 236 248 / 0.95) !important;
}

.text-stone-400,
.text-stone-500,
.text-stone-600,
.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-on-surface-variant {
  color: var(--dashboard-muted) !important;
}

.text-stone-800,
.text-stone-900,
.text-slate-800,
.text-slate-900,
.text-on-surface,
.text-on-background {
  color: var(--dashboard-text) !important;
}

.shadow-sm,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: 0 12px 32px rgb(94 67 201 / 0.08) !important;
}

.bg-white,
.surface-card,
article,
.overflow-hidden.rounded-3xl,
.rounded-xl.shadow-sm,
.rounded-3xl.shadow-2xl,
.rounded-3xl.bg-white {
  background-color: #ffffff !important;
  border: 1px solid rgb(201 196 214 / 0.42) !important;
  box-shadow: 0 10px 30px rgb(94 67 201 / 0.08) !important;
}

.bg-primary,
.bg-\[\#0D9488\],
.bg-\[\#805600\] {
  background-color: var(--dashboard-primary) !important;
}

.text-primary,
.hover\:text-primary:hover,
.group-hover\:text-primary:hover {
  color: var(--dashboard-primary) !important;
}

.border-primary,
.focus\:border-primary:focus {
  border-color: var(--dashboard-primary) !important;
}

.ring-primary,
.focus\:ring-primary:focus {
  --tw-ring-color: rgb(94 67 201 / 0.28) !important;
}

.bg-primary\/5 {
  background-color: rgb(94 67 201 / 0.05) !important;
}

.bg-primary\/10 {
  background-color: rgb(94 67 201 / 0.10) !important;
}

.bg-primary\/20 {
  background-color: rgb(94 67 201 / 0.20) !important;
}

.bg-primary-container,
.bg-amber-500,
.bg-orange-500,
.bg-teal-500,
.peer:checked ~ .peer-checked\:bg-amber-500,
.peer:checked ~ .peer-checked\:bg-primary-container {
  background-color: var(--dashboard-primary-container) !important;
}

.bg-primary-container\/10,
.bg-amber-50,
.bg-amber-100,
.hover\:bg-amber-50:hover,
.hover\:bg-amber-100:hover {
  background-color: rgb(230 222 255 / 0.75) !important;
}

.bg-amber-500\/20,
.hover\:bg-amber-500\/30:hover {
  background-color: rgb(94 67 201 / 0.20) !important;
}

.text-amber-400,
.text-amber-500,
.text-amber-600,
.text-amber-700,
.text-amber-800,
.text-amber-900,
.text-teal-600,
.text-orange-500,
.hover\:text-amber-600:hover,
.hover\:text-amber-700:hover {
  color: var(--dashboard-primary) !important;
}

.text-amber-900\/60,
.text-amber-900\/80 {
  color: rgb(72 41 179 / 0.78) !important;
}

.border-amber-200,
.border-amber-500,
.border-amber-500\/30,
.border-primary-container\/20 {
  border-color: rgb(119 94 228 / 0.45) !important;
}

.accent-amber-600 {
  accent-color: var(--dashboard-primary) !important;
}

.shadow-amber-500\/20,
.hover\:shadow-amber-500\/40:hover {
  --tw-shadow-color: rgb(94 67 201 / 0.22) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.to-primary-container {
  --tw-gradient-to: var(--dashboard-primary-container) var(--tw-gradient-to-position) !important;
}

.from-primary {
  --tw-gradient-from: var(--dashboard-primary) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(94 67 201 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.shadow-primary\/20 {
  --tw-shadow-color: rgb(94 67 201 / 0.20) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

.from-\[\#8E76F2\] {
  --tw-gradient-from: #8e76f2 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(142 118 242 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-\[\#5E43C9\] {
  --tw-gradient-to: #5e43c9 var(--tw-gradient-to-position) !important;
}

.app-dashboard-card,
.card-shadow,
.bg-white {
  border-color: rgb(201 196 214 / 0.45);
}

.app-shell-main {
  margin-left: 16rem !important;
  padding-top: 0 !important;
  max-width: none !important;
  width: calc(100vw - 16rem) !important;
  box-sizing: border-box !important;
}

.app-shell-header-fixed {
  left: 16rem !important;
  width: auto !important;
  margin-left: 0 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.app-shell-main > #app-topbar + * {
  margin-top: 0;
}

.app-shell-main.flex {
  flex-wrap: wrap;
}

.app-shell-main > script {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.app-shell-main.flex > #app-topbar {
  flex: 0 0 100%;
}

.app-shell-main > aside.sticky {
  flex: 0 0 440px !important;
  top: 0 !important;
  height: calc(100vh - 64px) !important;
}

.app-shell-main > aside.sticky + section {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.settings-action-bar {
  left: 16rem !important;
  right: 2rem !important;
}

@media (max-width: 1180px) {
  .settings-action-bar {
    right: 1rem !important;
    bottom: 1rem !important;
  }

  .settings-action-bar > div {
    width: 100% !important;
    max-width: 42rem !important;
    border-radius: 1.25rem !important;
    padding: 0.875rem 1rem !important;
    gap: 1rem !important;
  }

  .settings-action-bar > div > div:first-child {
    padding-right: 1rem !important;
  }
}

@media (max-width: 767px) {
  .app-shell-main {
    margin-left: 5rem !important;
    padding-top: 0 !important;
    width: calc(100vw - 5rem) !important;
  }

  .app-shell-header-fixed {
    left: 5rem !important;
  }

  .settings-action-bar {
    left: 5rem !important;
    right: 1rem !important;
    bottom: 1rem !important;
  }
}

@media (max-width: 640px) {
  .settings-action-bar > div {
    width: calc(100vw - 6rem) !important;
    border-radius: 1.25rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
}

.app-shell-sidebar {
  width: 5rem;
}

.bg-gradient-to-br.from-primary.to-primary-container,
.bg-gradient-to-br.from-primary.to-primary-container *,
.bg-gradient-to-br.from-\[\#8E76F2\].to-\[\#5E43C9\],
.bg-gradient-to-br.from-\[\#8E76F2\].to-\[\#5E43C9\] *,
.bg-gradient-to-br.from-\[\#FFB74D\].to-\[\#F57C00\],
.bg-gradient-to-br.from-\[\#FFB74D\].to-\[\#F57C00\] *,
.bg-gradient-to-br.from-\[\#4FC3F7\].to-\[\#0288D1\],
.bg-gradient-to-br.from-\[\#4FC3F7\].to-\[\#0288D1\] *,
.bg-gradient-to-br.from-\[\#FF8A80\].to-\[\#D32F2F\],
.bg-gradient-to-br.from-\[\#FF8A80\].to-\[\#D32F2F\] * {
  color: #ffffff !important;
}

#kpi-bandwidth,
#kpi-sessions,
#kpi-tasks,
#kpi-storage {
  color: #ffffff !important;
  font-size: 2.25rem !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

#kpi-bandwidth + *,
#kpi-sessions + *,
#kpi-tasks + *,
#kpi-storage + * {
  color: #ffffff !important;
}

#kpi-bandwidth-badge,
#kpi-sessions-badge,
#kpi-tasks-badge,
#kpi-storage-badge {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
}

#kpi-bandwidth-badge,
#kpi-sessions-badge,
#kpi-tasks-badge,
#kpi-storage-badge,
#kpi-bandwidth,
#kpi-sessions,
#kpi-tasks,
#kpi-storage {
  text-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
}

#kpi-bandwidth,
#kpi-sessions,
#kpi-tasks,
#kpi-storage {
  margin-top: 0.35rem !important;
}

#kpi-bandwidth,
#kpi-sessions,
#kpi-tasks,
#kpi-storage,
#kpi-bandwidth-badge,
#kpi-sessions-badge,
#kpi-tasks-badge,
#kpi-storage-badge {
  position: relative;
  z-index: 2;
}

.glow-purple p.text-white\/80.font-label-sm,
.glow-orange p.text-white\/80.font-label-sm,
.glow-blue p.text-white\/80.font-label-sm,
.glow-red p.text-white\/80.font-label-sm {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

.bg-primary .text-on-primary-container,
.bg-primary .text-on-primary-container\/70,
.bg-primary .text-on-primary,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary p,
.bg-primary span,
.bg-primary div {
  color: #ffffff !important;
}

.bg-primary .bg-on-primary-container {
  background-color: #ffffff !important;
}

.bg-primary-container .text-on-primary-container,
.bg-primary-container .text-on-primary-container\/70,
.bg-primary-container h1,
.bg-primary-container h2,
.bg-primary-container h3,
.bg-primary-container h4,
.bg-primary-container h5,
.bg-primary-container p,
.bg-primary-container span,
.bg-primary-container div {
  color: #ffffff !important;
}

.bg-primary-container .bg-on-primary-container {
  background-color: #ffffff !important;
}

@media (min-width: 768px) {
  .app-shell-sidebar {
    width: 16rem;
  }
}