:root {
  --app-primary: #7028e4;
  --app-primary-strong: #4d0bfd;
  --app-accent: #31b4fe;
  --app-accent-strong: #5040f4;
  --app-pink: #e641cd;
  --app-heading: #0f1d46;
  --app-body: #1c223a;
  --app-muted: #606060;
  --app-muted-soft: #858993;
  --app-bg: #f7f2f1;
  --app-surface: #ffffff;
  --app-surface-alt: #f3f4f7;
  --app-border: #e4eaf2;
  --app-shadow: rgba(51, 77, 136, 0.12);
  --app-gradient-primary: linear-gradient(45deg, #e641cd 1%, #7028e4 99%);
  --app-gradient-accent: linear-gradient(to right, #5040f4 0%, #31b4fe 100%);
}

[data-bs-theme=blue-theme] body {
  --bs-body-color: var(--app-body);
  --bs-body-color-rgb: 28, 34, 58;
  --bs-heading-color: var(--app-heading);
  --bs-body-bg: var(--app-bg);
  --bs-body-bg-2: var(--app-surface);
  --bs-card-bg: var(--app-surface);
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-color: var(--app-muted-soft);
  --bs-border-color: var(--app-border);
  --bs-border-color-translucent: rgba(15, 29, 70, 0.12);
  --bs-link-color: var(--app-primary);
  --bs-link-hover-color: var(--app-primary-strong);
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 112, 40, 228;
  --bs-secondary: var(--app-accent);
  --bs-secondary-rgb: 49, 180, 254;
  --bs-tertiary-bg: var(--app-surface-alt);
  --bs-secondary-bg: var(--app-surface);
  --bs-disabled-bg: var(--app-border);
  background-image: none;
  background-color: var(--app-bg);
  color: var(--bs-body-color);
}

[data-bs-theme=blue-theme] body .card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  box-shadow: 0 18px 40px var(--app-shadow);
}

[data-bs-theme=blue-theme] body .card-title {
  color: var(--app-heading);
}

[data-bs-theme=blue-theme] body .top-header,
[data-bs-theme=blue-theme] body .primary-menu {
  background-color: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  box-shadow: 0 10px 24px rgba(51, 77, 136, 0.08);
}

[data-bs-theme=blue-theme] body .primary-menu .nav-link,
[data-bs-theme=blue-theme] body .primary-menu .navbar .nav-link {
  color: var(--app-heading) !important;
  border-color: var(--app-border) !important;
}

[data-bs-theme=blue-theme] body .primary-menu .nav-link:hover,
[data-bs-theme=blue-theme] body .primary-menu .navbar .nav-link:hover {
  background-color: rgba(112, 40, 228, 0.08) !important;
  color: var(--app-primary) !important;
}

[data-bs-theme=blue-theme] body .primary-menu .dropdown-menu {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 16px 30px rgba(51, 77, 136, 0.12);
}

[data-bs-theme=blue-theme] body .page-footer {
  background-color: var(--app-surface);
  border-top: 1px solid var(--app-border);
  color: var(--app-muted);
}

[data-bs-theme=blue-theme] .bg-light {
  background-color: var(--app-surface) !important;
  color: var(--app-heading);
}

[data-bs-theme=blue-theme] .card.text-white:not(.bg-dark):not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not([class*="bg-grd-"]) {
  color: var(--app-heading) !important;
}

[data-bs-theme=blue-theme] .card.text-white:not(.bg-dark):not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not([class*="bg-grd-"]) .text-white {
  color: var(--app-heading) !important;
}

[data-bs-theme=blue-theme] .card.text-white:not(.bg-dark):not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not([class*="bg-grd-"]) .text-white-50 {
  color: var(--app-muted) !important;
}

[data-bs-theme=blue-theme] .bg-grd-primary {
  background-image: var(--app-gradient-primary) !important;
}

[data-bs-theme=blue-theme] .btn-grd-primary {
  background-image: var(--app-gradient-primary) !important;
  box-shadow: 0 12px 24px rgba(112, 40, 228, 0.25);
}

[data-bs-theme=blue-theme] .btn-outline-light {
  color: var(--app-primary);
  border-color: rgba(112, 40, 228, 0.35);
}

[data-bs-theme=blue-theme] .btn-outline-light:hover,
[data-bs-theme=blue-theme] .btn-outline-light:focus {
  background-color: rgba(112, 40, 228, 0.12);
  color: var(--app-primary);
  border-color: rgba(112, 40, 228, 0.5);
}

[data-bs-theme=blue-theme] .form-select,
[data-bs-theme=blue-theme] .form-control,
[data-bs-theme=blue-theme] .multi-select-toggle {
  background-color: var(--app-surface);
  color: var(--app-heading);
  border-color: var(--app-border);
}

[data-bs-theme=blue-theme] .form-select:focus,
[data-bs-theme=blue-theme] .form-control:focus,
[data-bs-theme=blue-theme] .multi-select-toggle:focus {
  background-color: var(--app-surface);
  color: var(--app-heading);
  border-color: rgba(112, 40, 228, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(112, 40, 228, 0.15);
}

[data-bs-theme=blue-theme] .form-select option {
  background-color: var(--app-surface);
  color: var(--app-heading);
}

[data-bs-theme=blue-theme] .form-control::placeholder {
  color: var(--app-muted-soft);
}

[data-bs-theme=blue-theme] .multi-select-backdrop {
  background: rgba(15, 29, 70, 0.25);
}

[data-bs-theme=blue-theme] .multi-select-panel {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  box-shadow: 0 18px 40px var(--app-shadow);
}

[data-bs-theme=blue-theme] .multi-select-panel-header,
[data-bs-theme=blue-theme] .multi-select-option,
[data-bs-theme=blue-theme] .single-select-option {
  color: var(--app-heading);
}

[data-bs-theme=blue-theme] .multi-select-option:hover,
[data-bs-theme=blue-theme] .single-select-option:hover,
[data-bs-theme=blue-theme] .single-select-option.is-active {
  background-color: rgba(112, 40, 228, 0.12);
}

[data-bs-theme=blue-theme] .multi-select-option input {
  accent-color: var(--app-primary);
}

[data-bs-theme=blue-theme] .table-controls .form-select,
[data-bs-theme=blue-theme] .table-pagination .page-link {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-heading);
}

[data-bs-theme=blue-theme] .table-pagination .page-item.active .page-link {
  background-image: var(--app-gradient-primary);
  border-color: transparent;
  color: #ffffff;
}

[data-bs-theme=blue-theme] .table-pagination .page-item.disabled .page-link {
  background-color: var(--app-surface-alt);
  border-color: var(--app-border);
  color: var(--app-muted-soft);
}

[data-bs-theme=blue-theme] .login-anim-bg {
  background: radial-gradient(circle at 20% 20%, #ffffff 0%, #f7f2f1 55%, #e4eaf2 100%);
}
