/* Teal Theme CSS - Alternative color scheme */

/* ── Override Tailwind brand color utilities ───────────────────── */
.bg-brand-500,
.bg-brand-500\/10,
.bg-brand-500\/15,
.bg-brand-500\/20,
.bg-brand-500\/30,
.bg-brand-500\/40,
.bg-brand-500\/50 {
  background-color: #14b8a6 !important;
}

.bg-brand-600 {
  background-color: #0d9488 !important;
}
.bg-brand-400 {
  background-color: #2dd4bf !important;
}
.bg-brand-900 {
  background-color: #134e4a !important;
}

/* Text color */
.text-brand-500 {
  color: #14b8a6 !important;
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1)) !important;
}
.text-brand-400 {
  color: #2dd4bf !important;
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity, 1)) !important;
}
.text-brand-600 {
  color: #0d9488 !important;
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1)) !important;
}
.text-brand-500\/50 {
  color: rgba(20, 184, 166, 0.5) !important;
}

.border-brand-500 {
  border-color: #14b8a6 !important;
}
.border-brand-400 {
  border-color: #2dd4bf !important;
}
.border-brand-600 {
  border-color: #0d9488 !important;
}
.border-brand-500\/20 {
  border-color: rgba(20, 184, 166, 0.2) !important;
}
.border-brand-500\/30 {
  border-color: rgba(20, 184, 166, 0.3) !important;
}
.border-brand-500\/50 {
  border-color: rgba(20, 184, 166, 0.5) !important;
}

.ring-brand-500 {
  --tw-ring-color: #14b8a6 !important;
}
.ring-brand-400 {
  --tw-ring-color: #2dd4bf !important;
}

/* Brand-500 with opacity */
.bg-brand-500\/10 {
  background-color: rgba(20, 184, 166, 0.1) !important;
}
.bg-brand-500\/15 {
  background-color: rgba(20, 184, 166, 0.15) !important;
}
.bg-brand-500\/20 {
  background-color: rgba(20, 184, 166, 0.2) !important;
}
.bg-brand-500\/30 {
  background-color: rgba(20, 184, 166, 0.3) !important;
}
.bg-brand-500\/40 {
  background-color: rgba(20, 184, 166, 0.4) !important;
}

/* Gradient overrides */
.from-brand-500 {
  --tw-gradient-from: #14b8a6 !important;
}
.via-brand-500 {
  --tw-gradient-via: #14b8a6 !important;
}
.to-brand-500 {
  --tw-gradient-to: #14b8a6 !important;
}
.from-brand-400 {
  --tw-gradient-from: #2dd4bf !important;
}
.to-brand-600 {
  --tw-gradient-to: #0d9488 !important;
}
.from-brand-400\/5 {
  --tw-gradient-from: rgba(45, 212, 191, 0.05) !important;
}
.from-brand-500\/5 {
  --tw-gradient-from: rgba(20, 184, 166, 0.05) !important;
}
.from-brand-500\/10 {
  --tw-gradient-from: rgba(20, 184, 166, 0.1) !important;
}
.from-brand-500\/20 {
  --tw-gradient-from: rgba(20, 184, 166, 0.2) !important;
}
.to-brand-400 {
  --tw-gradient-to: #2dd4bf !important;
}
.via-brand-400 {
  --tw-gradient-via: #2dd4bf !important;
}

/* Shadow overrides */
.shadow-brand-500\/25 {
  --tw-shadow-color: rgba(20, 184, 166, 0.25) !important;
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-brand-500\/50 {
  --tw-shadow-color: rgba(20, 184, 166, 0.5) !important;
  --tw-shadow: var(--tw-shadow-colored);
}

/* Group hover states */
.group:hover .group-hover\:text-brand-500 {
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1)) !important;
}
.group:hover .group-hover\:text-brand-400 {
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity, 1)) !important;
}

/* Custom color theme support */
.theme-custom .bg-brand-500,
.theme-custom.bg-brand-500 {
  background-color: var(--brand-500) !important;
}
.theme-custom .text-brand-500,
.theme-custom.text-brand-500 {
  color: var(--brand-500) !important;
}
.theme-custom .border-brand-500,
.theme-custom.border-brand-500 {
  border-color: var(--brand-500) !important;
}
.theme-custom .toggle-switch .indicator {
  background-color: var(--brand-500) !important;
}
.theme-custom .toggle-switch.active {
  background-color: var(--brand-500) !important;
}

/* ── CSS variables ─────────────────────── */
:root {
  --brand-400: #2dd4bf;
  --brand-500: #14b8a6;
  --brand-600: #0d9488;
  --brand-900: #134e4a;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
  background: #14b8a6;
}
::-webkit-scrollbar-thumb:hover {
  background: #0d9488;
}

/* ── Glass Panel ─────────────────────────────────────────────── */
.glass-panel,
.product-card,
.swal2-popup,
.server-card {
  border-color: rgba(20, 184, 166, 0.2);
}
.glass-panel:hover {
  background: linear-gradient(
    180deg,
    rgba(20, 184, 166, 0.15) 0%,
    rgba(24, 24, 27, 0.8) 100%
  );
}

/* ── Nav Items ─────────────────────────────────────────────── */
.nav-item.active i {
  color: #14b8a6 !important;
}
.nav-item.active .icon-container::before {
  background: #14b8a6;
}

/* ── Buttons ───────────────────────────────────────────────── */
.button-primary:hover,
.btn-primary:hover {
  background-color: #0d9488 !important;
}
.search-focus:focus-within {
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.5);
  border-color: #14b8a6;
}

/* ── Active Tab Styles ─────────────────────────────────────── */
.tab-btn.active,
.bg-brand-600 {
  background-color: #14b8a6 !important;
}

/* ── Progress Bars ─────────────────────────────────────────── */
.bg-gradient-to-r.from-amber-500.to-brand-500 {
  background: linear-gradient(to right, #f59e0b, #14b8a6);
}

/* Toggle Switch ─────────────────────────────────────────── */
.toggle-switch.active {
  background-color: #14b8a6 !important;
  border-color: #0d9488 !important;
}
.toggle-switch .indicator {
  background-color: #14b8a6 !important;
}

/* ── Body Glow Effects ─────────────────────────────────────── */
body::before {
  box-shadow:
    90vw 20vh 75px 25px rgba(20, 184, 166, 0.5),
    30vw 10vh 60px 20px rgba(20, 184, 166, 0.4);
}

/* ── Shimmer Animation ─────────────────────────────────────── */
.nav-item.active::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(20, 184, 166, 0.15),
    transparent
  );
}