/*
  MaAPI control panel blue theme overrides.
  Injected by Nginx after the Sub2API bundle so it can be removed without
  rebuilding or modifying the Docker image.
*/
:root {
  --maapi-blue-50: #eff6ff;
  --maapi-blue-100: #dbeafe;
  --maapi-blue-200: #bfdbfe;
  --maapi-blue-300: #93c5fd;
  --maapi-blue-400: #60a5fa;
  --maapi-blue-500: #3b82f6;
  --maapi-blue-600: #2563eb;
  --maapi-blue-700: #1d4ed8;
  --maapi-blue-800: #1e40af;
  --maapi-blue-900: #1e3a8a;
  --maapi-blue-soft: rgba(59, 130, 246, 0.1);
  --maapi-blue-panel: rgba(239, 246, 255, 0.82);
}

.text-emerald-100,
.text-green-300 {
  color: var(--maapi-blue-100) !important;
}

.text-emerald-200 {
  color: var(--maapi-blue-200) !important;
}

.text-emerald-300,
.text-green-400 {
  color: var(--maapi-blue-300) !important;
}

.text-emerald-500,
.text-green-500,
.text-teal-500,
.group:hover .group-hover\:text-emerald-500 {
  color: var(--maapi-blue-500) !important;
}

.text-emerald-600,
.text-green-600,
.text-teal-600,
.hover\:text-emerald-600:hover,
.hover\:text-green-600:hover {
  color: var(--maapi-blue-600) !important;
}

.text-emerald-600\/70,
.text-green-600\/70 {
  color: rgba(37, 99, 235, 0.7) !important;
}

.text-emerald-700,
.text-green-700,
.text-teal-700,
.hover\:text-emerald-700:hover {
  color: var(--maapi-blue-700) !important;
}

.text-emerald-800,
.text-green-800 {
  color: var(--maapi-blue-800) !important;
}

.bg-emerald-50,
.bg-green-50,
.hover\:bg-emerald-50:hover,
.hover\:bg-green-50:hover,
.from-emerald-50 {
  background-color: var(--maapi-blue-50) !important;
  --tw-gradient-from: var(--maapi-blue-50) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.bg-green-50\/50 {
  background-color: rgba(239, 246, 255, 0.5) !important;
}

.bg-emerald-100,
.bg-green-100,
.bg-teal-100 {
  background-color: var(--maapi-blue-100) !important;
}

.bg-emerald-200\/60,
.hover\:bg-emerald-200:hover,
.hover\:bg-green-200:hover,
.hover\:bg-teal-200:hover {
  background-color: rgba(191, 219, 254, 0.8) !important;
}

.bg-emerald-500,
.bg-green-500,
.from-emerald-500,
.from-green-500 {
  background-color: var(--maapi-blue-500) !important;
  --tw-gradient-from: var(--maapi-blue-500) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.bg-emerald-500\/10,
.bg-green-500\/10 {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

.bg-green-500\/20 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

.bg-emerald-600,
.bg-green-600,
.hover\:bg-green-600:hover {
  background-color: var(--maapi-blue-600) !important;
}

.hover\:bg-green-700:hover,
.active\:bg-green-800:active {
  background-color: var(--maapi-blue-700) !important;
}

.from-emerald-400 {
  --tw-gradient-from: var(--maapi-blue-400) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-emerald-100,
.to-teal-50 {
  --tw-gradient-to: var(--maapi-blue-100) var(--tw-gradient-to-position) !important;
}

.to-emerald-500 {
  --tw-gradient-to: var(--maapi-blue-500) var(--tw-gradient-to-position) !important;
}

.to-emerald-600,
.to-green-600 {
  --tw-gradient-to: var(--maapi-blue-600) var(--tw-gradient-to-position) !important;
}

.border-emerald-200,
.border-green-200,
.hover\:border-emerald-300:hover,
.hover\:border-green-300:hover {
  border-color: var(--maapi-blue-200) !important;
}

.border-green-300 {
  border-color: var(--maapi-blue-300) !important;
}

.border-green-400 {
  border-color: var(--maapi-blue-400) !important;
}

.border-emerald-500,
.border-green-500,
.focus\:border-green-500:focus {
  border-color: var(--maapi-blue-500) !important;
}

.border-green-500\/20 {
  border-color: rgba(59, 130, 246, 0.2) !important;
}

.border-green-500\/30 {
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.ring-green-500,
.focus\:ring-green-500:focus {
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)) !important;
}

.ring-green-600\/20 {
  --tw-ring-color: rgb(37 99 235 / 0.2) !important;
}

.dark\:bg-emerald-500\/10:is(.dark *),
.dark\:bg-emerald-500\/15:is(.dark *),
.dark\:bg-emerald-500\/20:is(.dark *) {
  background-color: rgba(59, 130, 246, 0.16) !important;
}

.dark\:border-emerald-400:is(.dark *),
.dark\:border-green-600:is(.dark *),
.dark\:border-green-700:is(.dark *) {
  border-color: var(--maapi-blue-500) !important;
}

.dark\:border-emerald-500\/30:is(.dark *),
.dark\:border-emerald-800\/30:is(.dark *),
.dark\:border-emerald-800\/50:is(.dark *),
.dark\:border-green-500\/20:is(.dark *),
.dark\:border-green-800:is(.dark *),
.dark\:border-green-800\/50:is(.dark *) {
  border-color: rgba(59, 130, 246, 0.32) !important;
}

/* Dashboard background and active navigation accents. */
main,
.min-h-screen {
  --maapi-page-glow: radial-gradient(circle at 28% 8%, rgba(59, 130, 246, 0.12), transparent 36rem);
}

.bg-gradient-to-br.from-emerald-50,
.bg-gradient-to-br.from-green-50,
.bg-gradient-to-r.from-emerald-50,
.bg-gradient-to-r.from-green-50 {
  background-image: linear-gradient(to bottom right, var(--maapi-blue-50), #f8fbff) !important;
}

aside a,
nav a,
button {
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}