/* =============================================================
   Effectix MCP - Brand patch for MCPHub
   ============================================================= */

/******** 1 - Font override (Poppins instead of Inter) ********/
body {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif !important;
}

/******** 2 - Primary color: Effectix purple ********/
:root {
  --effectix-primary: #9B36F7;
  --effectix-primary-hover: #8A2EDD;
  --effectix-primary-light: #f3e9fe;
  --effectix-primary-rgb: 155, 54, 247;
  --effectix-text-on-primary: #ffffff;
}

/* --- Buttons --- */
.btn-primary {
  background-color: var(--effectix-primary) !important;
  color: var(--effectix-text-on-primary) !important;
  box-shadow: 0 2px 4px rgba(var(--effectix-primary-rgb), 0.25) !important;
}
.btn-primary:hover {
  background-color: var(--effectix-primary-hover) !important;
  box-shadow: 0 4px 12px rgba(var(--effectix-primary-rgb), 0.35) !important;
}
.dark .btn-primary {
  background-color: rgba(var(--effectix-primary-rgb), 0.2) !important;
  color: #c084fc !important;
  border: 1px solid rgba(var(--effectix-primary-rgb), 0.4) !important;
}
.dark .btn-primary:hover {
  background-color: rgba(var(--effectix-primary-rgb), 0.3) !important;
  color: #d8b4fe !important;
}

/* --- Blue → Purple overrides (Tailwind utility classes) --- */
.bg-blue-50 {
  background-color: var(--effectix-primary-light) !important;
}
.bg-blue-100 {
  background-color: #ead5fe !important;
}
.bg-blue-200 {
  background-color: #d8b4fe !important;
}
.bg-blue-500 {
  background-color: var(--effectix-primary) !important;
}
.bg-blue-600 {
  background-color: var(--effectix-primary) !important;
}
.bg-blue-700 {
  background-color: var(--effectix-primary-hover) !important;
}

.text-blue-500 {
  color: var(--effectix-primary) !important;
}
.text-blue-600 {
  color: var(--effectix-primary) !important;
}
.text-blue-700 {
  color: #7c22ce !important;
}

.border-blue-500 {
  border-color: var(--effectix-primary) !important;
}
.border-blue-300 {
  border-color: #c084fc !important;
}

.ring-blue-500 {
  --tw-ring-color: var(--effectix-primary) !important;
}
.focus\:ring-blue-500:focus {
  --tw-ring-color: var(--effectix-primary) !important;
}
.focus\:border-blue-500:focus {
  border-color: var(--effectix-primary) !important;
}

/* Hover variants */
.hover\:bg-blue-50:hover {
  background-color: var(--effectix-primary-light) !important;
}
.hover\:bg-blue-100:hover {
  background-color: #ead5fe !important;
}
.hover\:bg-blue-600:hover {
  background-color: var(--effectix-primary) !important;
}
.hover\:bg-blue-700:hover {
  background-color: var(--effectix-primary-hover) !important;
}
.hover\:text-blue-600:hover {
  color: var(--effectix-primary) !important;
}
.hover\:text-blue-700:hover {
  color: #7c22ce !important;
}

/* Dark mode blue → purple */
.dark .bg-blue-50 {
  background-color: rgba(var(--effectix-primary-rgb), 0.1) !important;
}
.dark .bg-blue-200 {
  background-color: rgba(var(--effectix-primary-rgb), 0.2) !important;
}
.dark .text-blue-700 {
  color: #d8b4fe !important;
}

/* --- Status icon blue → purple --- */
.dark .status-icon-blue {
  background-color: rgba(var(--effectix-primary-rgb), 0.15) !important;
  color: #c084fc !important;
}

/* --- Labels --- */
.label-primary {
  background-color: var(--effectix-primary-light) !important;
  color: var(--effectix-primary) !important;
}
.dark .label-primary {
  background-color: rgba(var(--effectix-primary-rgb), 0.15) !important;
  color: #c084fc !important;
}

/* --- Links --- */
.external-link {
  color: var(--effectix-primary) !important;
}
.external-link:hover {
  color: var(--effectix-primary-hover) !important;
  border-bottom-color: var(--effectix-primary-hover) !important;
}
.dark .external-link {
  color: #c084fc !important;
}
.dark .external-link:hover {
  color: #d8b4fe !important;
  border-bottom-color: #d8b4fe !important;
}

/* --- Form focus states --- */
.form-input:focus {
  border-color: rgba(var(--effectix-primary-rgb), 0.5) !important;
  box-shadow: 0 0 0 3px rgba(var(--effectix-primary-rgb), 0.1) !important;
}
.dark .form-input:focus {
  border-color: rgba(var(--effectix-primary-rgb), 0.5) !important;
  box-shadow: 0 0 0 3px rgba(var(--effectix-primary-rgb), 0.15) !important;
}

/* --- Custom blue class → purple --- */
.bg-custom-blue {
  background-color: var(--effectix-primary) !important;
}

/* --- Login page --- */
/* Override the gradient background on login */
.login-container,
[class*="from-blue"],
[class*="to-blue"] {
  --tw-gradient-from: #9B36F7 !important;
  --tw-gradient-to: #6d28d9 !important;
}

/* --- Sidebar active state --- */
.bg-blue-50.text-blue-700,
[class*="bg-blue-50"][class*="text-blue-700"] {
  background-color: var(--effectix-primary-light) !important;
  color: var(--effectix-primary) !important;
}

/* --- Switches/toggles --- */
input[type="checkbox"]:checked,
[role="switch"][data-state="checked"],
[aria-checked="true"] {
  background-color: var(--effectix-primary) !important;
}

/* --- Progress bars --- */
[role="progressbar"] > div,
.bg-blue-600[style*="width"] {
  background-color: var(--effectix-primary) !important;
}

/******** 3 - Hide MCPHub-specific branding ********/
/* Hide sponsor/WeChat/Discord buttons in header/about */
a[href*="ko-fi"],
button:has(svg[data-lucide="heart"]),
[class*="sponsor"] {
  display: none !important;
}

/******** 4 - Effectix logo in sidebar header ********/
/* Add Effectix branding text next to the app title */