/*
 * BehaviorPro Labs — Color overrides for Impact.ly
 *
 * Impact.ly is a Vite/React/Tailwind v3.4 app. Since Tailwind generates utility
 * classes, we override at the CSS level using higher-specificity selectors.
 *
 * Original palette:  blue-600/purple-600 gradient accent, light gray backgrounds
 * BehaviorPro dark:  slate-950 body, slate-900 surfaces, teal-400 accent
 *
 * Loaded AFTER Tailwind's output so our rules win.
 */

/* ============================================
   GLOBAL
   ============================================ */

body {
  background: #020617 !important;  /* slate-950 */
  color: #f3f4f6 !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ============================================
   HIDE ORIGINAL HEADER (Labs header replaces it)
   ============================================ */

#root > div > header:first-child {
  display: none !important;
}

/* ============================================
   MAIN APP CONTAINER — dark background
   ============================================ */

#root > div {
  background: #020617 !important;  /* override from-blue-50 to-purple-50 gradient */
}

/* ============================================
   TEXT COLORS
   ============================================ */

/* Primary text: gray-900 → gray-100 */
#root .text-gray-900 {
  color: #f3f4f6 !important;
}

/* Secondary text: gray-600 → gray-300 */
#root .text-gray-600 {
  color: rgba(209, 213, 219, 0.9) !important;
}

/* Muted text: gray-500 → gray-400 */
#root .text-gray-500 {
  color: rgba(209, 213, 219, 0.7) !important;
}

/* Small muted: gray-700 → gray-300 */
#root .text-gray-700 {
  color: rgba(209, 213, 219, 0.9) !important;
}

/* ============================================
   ACCENT COLORS — blue → teal
   ============================================ */

/* Tab active state */
#root .text-blue-600 {
  color: #2dd4bf !important;
}

#root .border-blue-500 {
  border-color: #2dd4bf !important;
}

#root .text-blue-700 {
  color: #14b8a6 !important;
}

/* Sort buttons active */
#root .bg-blue-100 {
  background-color: rgba(45, 212, 191, 0.15) !important;
}

#root .border-blue-200 {
  border-color: rgba(45, 212, 191, 0.3) !important;
}

/* Focus rings */
#root .focus\:ring-blue-500:focus {
  --tw-ring-color: rgba(45, 212, 191, 0.5) !important;
}

/* ============================================
   GRADIENT BUTTONS — blue/purple → teal
   ============================================ */

#root .bg-gradient-to-r.from-blue-600.to-purple-600,
#root [class*="from-blue-600"][class*="to-purple-600"] {
  background: linear-gradient(to right, #0d9488, #14b8a6) !important;  /* teal-600 → teal-500 */
}

#root .hover\:from-blue-700:hover,
#root .hover\:to-purple-700:hover {
  /* Override hover gradient */
}

#root [class*="from-blue-600"][class*="to-purple-600"]:hover {
  background: linear-gradient(to right, #0f766e, #0d9488) !important;  /* teal-700 → teal-600 */
}

/* ============================================
   SURFACES — white → dark
   ============================================ */

/* White cards/panels */
#root .bg-white {
  background-color: #0f172a !important;  /* slate-900 */
}

/* Gray backgrounds */
#root .bg-gray-100 {
  background-color: rgba(51, 65, 85, 0.4) !important;
}

#root .bg-gray-200 {
  background-color: rgba(51, 65, 85, 0.6) !important;
}

/* ============================================
   BORDERS
   ============================================ */

#root .border-gray-200 {
  border-color: rgba(51, 65, 85, 0.5) !important;
}

#root .border-gray-300 {
  border-color: rgba(51, 65, 85, 0.8) !important;
}

#root .border-b {
  border-color: rgba(51, 65, 85, 0.5) !important;
}

/* Hover border */
#root .hover\:border-blue-300:hover {
  border-color: rgba(45, 212, 191, 0.5) !important;
}

/* ============================================
   INPUTS
   ============================================ */

#root input[type="text"],
#root input[type="search"],
#root select,
#root textarea {
  background-color: #1e293b !important;  /* slate-800 */
  color: #f3f4f6 !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
}

#root input::placeholder,
#root textarea::placeholder {
  color: rgba(209, 213, 219, 0.4) !important;
}

/* ============================================
   SHADOWS — darker for dark mode
   ============================================ */

#root .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.25) !important;
}

#root .shadow-md,
#root .hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

#root .shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   ANALYSIS RESULTS COMPONENTS
   ============================================ */

/* Score cards and stat blocks */
#root [class*="bg-gradient"] {
  /* Let specific overrides above handle gradients */
}

/* Progress bars */
#root [class*="bg-blue"] {
  /* Override blue backgrounds to teal */
}

#root .bg-blue-500 {
  background-color: #14b8a6 !important;
}

#root .bg-blue-600 {
  background-color: #0d9488 !important;
}

#root .bg-purple-500 {
  background-color: #14b8a6 !important;
}

#root .bg-purple-600 {
  background-color: #0d9488 !important;
}

/* Ring colors */
#root .ring-blue-500 {
  --tw-ring-color: #14b8a6 !important;
}

/* ============================================
   SCROLLBAR (dark mode)
   ============================================ */

#root ::-webkit-scrollbar {
  width: 8px;
}

#root ::-webkit-scrollbar-track {
  background: rgba(51, 65, 85, 0.2);
}

#root ::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.6);
  border-radius: 4px;
}

#root ::-webkit-scrollbar-thumb:hover {
  background: rgba(51, 65, 85, 0.8);
}