/* Standard Baseline for Houz99 - Preline UI Optimized */
html,
body {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base Customizations only (Non-overriding) */
::selection {
  background-color: #2563eb;
  color: white;
}

/* Smooth transitions for theme switching */
.dark body {
  background-color: #0f172a;
}

/* Discrete Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Custom Scrollbar for Modals */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #475569;
}

/* Multi-color Animated Gradient Border Glow */
@keyframes rotate-gradient {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.glow-active {
  position: relative;
  overflow: hidden;
  scale: 1.02;
  transition: all 0.5s ease;
  border: none !important;
}

.glow-active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1500px;
  height: 1500px;
  background: conic-gradient(
    #ff0000, #ff7300, #fffb00, #48ff00, 
    #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000
  );
  animation: rotate-gradient 4s linear infinite;
  z-index: 0;
}

.glow-active::after {
  content: '';
  position: absolute;
  inset: 4px; /* Border thickness */
  background: inherit;
  border-radius: inherit;
  z-index: 1;
}

/* Ensure content stays above the animation */
.glow-active > * {
  position: relative;
  z-index: 2;
}

/* Specific background adjustment for white/dark mode consistency */
.glow-active::after {
  background: white;
}
.dark .glow-active::after {
  background: rgb(15, 23, 42); /* slate-900 match */
}

/* Glow Without Scaling */
.glow-active-no-scale {
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
  border: none !important;
  border-radius: 0.75rem; /* Match rounded-xl */
}

.glow-active-no-scale::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1500px;
  height: 1500px;
  background: conic-gradient(
    #ff0000, #ff7300, #fffb00, #48ff00, 
    #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000
  );
  animation: rotate-gradient 8s linear infinite;
  z-index: 0;
}

.glow-active-no-scale::after {
  content: '';
  position: absolute;
  inset: 2px; /* Border thickness */
  background: white;
  border-radius: inherit;
  z-index: 1;
}

.dark .glow-active-no-scale::after {
  background: rgb(15, 23, 42); /* slate-900 match */
}

.glow-active-no-scale > * {
  position: relative;
  z-index: 2;
  background-color: transparent !important;
  border-color: transparent !important;
}