/**
 * Force Light Mode Stylesheet - VERSION 2.0
 * 
 * This is a global stylesheet that will be loaded directly in the HTML
 * with the absolute highest priority to enforce light mode styling.
 */

/* Global light theme variables - Maximum Specificity Version */
:root,
:root[data-theme="dark"],
:root[data-theme="light"],
:root[data-color-mode="dark"],
:root[data-color-mode="light"] {
  --background: 0 0% 100% !important;
  --foreground: 222.2 84% 4.9% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 222.2 84% 4.9% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 222.2 84% 4.9% !important;
  --primary: 221.2 83.2% 53.3% !important;
  --primary-foreground: 210 40% 98% !important;
  --secondary: 210 40% 96.1% !important;
  --secondary-foreground: 222.2 47.4% 11.2% !important;
  --muted: 210 40% 96.1% !important;
  --muted-foreground: 215.4 16.3% 46.9% !important;
  --accent: 210 40% 96.1% !important;
  --accent-foreground: 222.2 47.4% 11.2% !important;
  --destructive: 0 84.2% 60.2% !important;
  --destructive-foreground: 210 40% 98% !important;
  --border: 214.3 31.8% 91.4% !important;
  --input: 214.3 31.8% 91.4% !important;
  --ring: 221.2 83.2% 53.3% !important;
  --radius: 0.5rem !important;
  
  /* Direct HEX/RGB variables for maximum compatibility */
  --light-border: rgb(241, 245, 249) !important;
  --border-color: rgb(241, 245, 249) !important;
  --border-color-hex: #f1f5f9 !important;
  
  /* Force light mode color schemes */
  color-scheme: light !important;
  background-color: white !important;
  color: black !important;
}

/* Force all elements to use light border color */
*, *::before, *::after {
  border-color: rgb(241, 245, 249) !important;
}

/* Override all borders - WITH SIMPLIFIED SELECTORS */
div, section, main, aside, nav, header, footer, 
article, form, table, tr, td, th, thead, tbody,
.card, .dashboard-card, [class*="card"],
.table, [class*="table"],
.premium-table, [class*="premium"],
.border, [class*="border"],
[class*="rounded"],
.ring,
[class*="ring"],
/* Shadcn specific components */
.border-input,
.border-primary,
.border-secondary,
.border-destructive,
.border-muted,
.border-accent,
button[data-shadcn],
[role="dialog"],
[role="menuitem"],
[data-radix-popper-content-wrapper],
.react-table td,
.react-table th,
.data-[state=active]:border-b-2,
/* Additional shadcn component selectors */
.shadcn-border-component,
.shadcn-input,
.shadcn-card,
.shadcn-select,
.shadcn-combobox,
.shadcn-dialog,
.shadcn-dropdown,
.shadcn-menubar,
.shadcn-navbar,
.shadcn-popover,
.shadcn-table {
  border-color: rgb(241, 245, 249) !important;
}

/* Light mode for body, but allow content section colors */
body, html {
  background-color: white !important;
  /* Removed forced black color to allow section colors */
}

/* Global default text color for elements without specific coloring */
body {
  color: #1f2937 !important; /* gray-800 for default text */
}

/* Direct styles for specific problem components - COMPREHENSIVE VERSION */
tr,
tbody tr,
thead tr,
table tr,
.premium-table-row,
.data-grid-row,
tr.premium-row,
tr.data-row,
.shadcn-table-row,
.shadcn-tr,
.react-data-grid-row,
.react-table-row,
/* Ultra-specific selectors for ShadCN tables */
div[role="rowgroup"] > div[role="row"],
div[role="rowgroup"] > tr,
table > tbody > tr,
table > tr,
div > table > tbody > tr,
div > table > tbody > tr:not(:last-child),
table.border-collapse > tbody > tr,
table.border-separate > tbody > tr,
/* All specific border sides */
tr[class*="border"],
div[role="row"] {
  border-color: rgb(241, 245, 249) !important;
  border-bottom-color: rgb(241, 245, 249) !important;
  border-top-color: rgb(241, 245, 249) !important;
  border-left-color: rgb(241, 245, 249) !important;
  border-right-color: rgb(241, 245, 249) !important;
  outline-color: rgb(241, 245, 249) !important;
  box-shadow: none !important;
}

/* Apply inline HEX styles to catch elements using direct colors */
table, tr, td, th, tbody, thead, tfoot,
[class*="border"], [class*="card"], [class*="table"], 
[class*="row"], [class*="cell"], [class*="grid"] {
  border-color: #f1f5f9 !important;
  --tw-border-opacity: 1 !important;
  border-bottom-color: #f1f5f9 !important; 
  border-top-color: #f1f5f9 !important;
  border-left-color: #f1f5f9 !important;
  border-right-color: #f1f5f9 !important;
}

/* Header and Hero Banner text color enforcement */
.header-gradient,
.hero-banner,
.top-banner,
header div[class*="header"],
header div[class*="hero"],
header div[class*="banner"] {
  background: linear-gradient(to right, #1a4da0, #1a73e8, #1a4da0) !important;
}

/* Force white text in hero headers BUT NOT stat cards - MORE SPECIFIC */
.header-gradient h1,
.header-gradient h2,
.header-gradient h3,
.header-gradient p,
.header-gradient span,
.hero-banner h1,
.hero-banner h2, 
.hero-banner p,
.top-banner h1,
.top-banner h2,
.top-banner p,
header div[class*="header"] h1,
header div[class*="header"] h2,
header div[class*="header"] p,
header div[class*="hero"] h1,
header div[class*="hero"] h2,
header div[class*="hero"] p,
header div[class*="banner"] h1,
header div[class*="banner"] h2,
header div[class*="banner"] p,
.hero-title,
.hero-subtitle,
.hero-description,
.top-banner-title,
.top-banner-description,
.header-title,
.banner-title,
header h1,
header h2,
header h3,
header p {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Override all themes */
[data-theme="dark"],
[data-theme="light"],
[data-color-mode="dark"],
[data-color-mode="light"],
[data-theme="system"] {
  --background: 0 0% 100% !important;
  --foreground: 222.2 84% 4.9% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 222.2 84% 4.9% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 222.2 47.4% 11.2% !important; /* Dark for dropdown text */
  --primary: 221.2 83.2% 53.3% !important;
  --primary-foreground: 210 40% 98% !important;
  --secondary: 210 40% 96.1% !important;
  --secondary-foreground: 222.2 47.4% 11.2% !important;
  --muted: 210 40% 96.1% !important;
  --muted-foreground: 215.4 16.3% 46.9% !important;
  --accent: 210 40% 96.1% !important;
  --accent-foreground: 222.2 47.4% 11.2% !important;
  --destructive: 0 84.2% 60.2% !important;
  --destructive-foreground: 210 40% 98% !important;
  --border: 214.3 31.8% 91.4% !important;
  --input: 214.3 31.8% 91.4% !important;
  --ring: 221.2 83.2% 53.3% !important;
  
  /* Direct values for absolute compatibility */
  --border-color: rgb(241, 245, 249) !important;
  --tw-border-color: rgb(241, 245, 249) !important;
  --shadow-color: rgba(0, 0, 0, 0.1) !important; 
  
  color-scheme: light !important;
  
  /* Force Tailwind variables */
  --tw-border-opacity: 1 !important;
  --tw-ring-offset-color: #fff !important;
}

/* Extra specificity for header typography elements */
div.header-gradient h1, 
div.header-gradient h2, 
div.header-gradient h3, 
div.header-gradient p, 
div.header-gradient span,
.app-navigation a,
.app-sidebar a,
.app-header a,
header a {
  color: white !important;
  fill: white !important;
  stroke: white !important;
}

/* Super-targeted selectors for premium header components ONLY */
header div[class*="premium"] h1,
header div[class*="premium"] h2,
header div[class*="premium"] h3,
header div[class*="premium"] p,
header div[class*="premium"] span:not([data-radix-select-item-text-content]),
header div[class*="banner"] h1,
header div[class*="banner"] h2,
header div[class*="banner"] h3,
header div[class*="banner"] p,
header div[class*="banner"] span:not([data-radix-select-item-text-content]),
.PremiumTeamHeader h1,
.PremiumTeamHeader h2,
.PremiumTeamHeader h3,
.PremiumTeamHeader p,
.PremiumHeader h1,
.PremiumHeader h2,
.PremiumHeader h3,
.PremiumHeader p,
.header-gradient h1,
.header-gradient h2,
.header-gradient h3,
.header-gradient p,
.header-gradient span:not([data-radix-select-item-text-content]),
.bg-gradient-to-r.from-blue-600.to-indigo-700 *:not([data-radix-select-item-text-content]),
.hero-banner h1,
.hero-banner h2,
.hero-banner p,
.hero-banner span:not([data-radix-select-item-text-content]) {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Fix Toggle Switch Component - Ensure Distinct on/off visual states */
[data-radix-switch-primitive] {
  background-color: #e4e4e7 !important; /* light gray for unchecked */
  border-color: #d4d4d8 !important; /* border for unchecked */
}

[data-radix-switch-primitive][data-state="checked"] {
  background-color: #3b82f6 !important; /* blue for checked */
  border-color: #2563eb !important; /* darker blue border for checked */
}

/* Toggle Switch Thumb (the moving dot) - simplified */
[data-radix-switch-primitive] [data-radix-switch-primitive-thumb],
[role="switch"] span {
  background-color: white !important; /* white thumb for contrast */
}

/* Specific Radix-UI Switch targeting */
[role="switch"] {
  background-color: #e4e4e7 !important; /* light gray for unchecked */
  border-color: #d4d4d8 !important; /* border for unchecked */
}

[role="switch"][data-state="checked"] {
  background-color: #3b82f6 !important; /* blue for checked */
  border-color: #2563eb !important; /* darker blue border for checked */
}

/* Switch component - Advanced selectors */
.peer[data-state="unchecked"],
button[data-state="unchecked"],
[data-state="unchecked"].h-6.w-11,
[data-state="unchecked"].inline-flex {
  background-color: #e4e4e7 !important;
  border-color: #d4d4d8 !important;
}

.peer[data-state="checked"],
button[data-state="checked"],
[data-state="checked"].h-6.w-11,
[data-state="checked"].inline-flex {
  background-color: #3b82f6 !important;
  border-color: #2563eb !important;
}

/* Super-specific selectors for ShadCN Switch component thumb */
.data-\[state\=unchecked\]\:translate-x-0 {
  background-color: white !important;
}

.data-\[state\=checked\]\:translate-x-5 {
  background-color: white !important;
}

.data-\[state\=checked\]\:bg-primary-foreground {
  background-color: white !important;
}

/* Direct ShadCN Classes */
.data-\[state\=checked\]\:bg-primary {
  background-color: #3b82f6 !important; /* blue for checked */
}

.data-\[state\=unchecked\]\:bg-muted {
  background-color: #e4e4e7 !important; /* light gray for unchecked */
}

/* Directly target ShadCN switch component by its classnames */
.h-6.w-11.shrink-0.cursor-pointer.items-center.rounded-full.border.border-input.transition-colors {
  background-color: #e4e4e7 !important; /* light gray for unchecked */
}

.h-6.w-11.shrink-0.cursor-pointer.items-center.rounded-full.border.border-input.transition-colors[data-state="checked"] {
  background-color: #3b82f6 !important; /* blue for checked */
}

/* ShadCN thumb */
.h-5.w-5.rounded-full.bg-background.shadow-lg.ring-0.transition-transform {
  background-color: white !important;
}

/* Dropdown menu text color support */
[data-radix-select-item-text-content],
[data-radix-select-item],
[data-radix-dropdown-menu-item],
[data-radix-popper-content-wrapper] div,
[data-radix-popper-content-wrapper] span,
[data-radix-popper-content-wrapper] p,
[role="menuitem"],
[role="option"] {
  color: #0f172a !important; /* dark text for dropdown items */
}

/* Ensure selected item highlighting */
[data-state="checked"][role="menuitem"],
[data-state="checked"][role="option"],
[data-highlighted],
[data-highlighted="true"] {
  background-color: #e6f2ff !important; /* light blue for selected items */
}

/* Fix Radix popover positioning */
[data-radix-popper-content-wrapper] {
  z-index: 9999 !important; /* ensure dropdown appears on top */
}

/* Select component specific styling */
[data-radix-select-viewport] {
  background-color: white !important;
}

[data-radix-select-item] {
  color: #0f172a !important;
}

.force-bg-white {
  background-color: white !important;
}

/* Ensure select trigger text is visible */
[class*="SelectTrigger"] span,
[class*="SelectValue"] span {
  color: #0f172a !important;
}

/* Documentation page specific color overrides - Keep section colors */
/* General text color classes */
.text-teal-800 {
  color: #115e59 !important; /* teal-800 */
}

.text-teal-700 {
  color: #0f766e !important; /* teal-700 */
}

.text-teal-600 {
  color: #0d9488 !important; /* teal-600 */
}

.text-orange-800 {
  color: #9a3412 !important; /* orange-800 */
}

.text-orange-700 {
  color: #c2410c !important; /* orange-700 */
}

.text-orange-600 {
  color: #ea580c !important; /* orange-600 */
}

.text-blue-800 {
  color: #1e40af !important; /* blue-800 */
}

.text-blue-700 {
  color: #1d4ed8 !important; /* blue-700 */
}

.text-blue-600 {
  color: #2563eb !important; /* blue-600 */
}

.text-purple-800 {
  color: #6b21a8 !important; /* purple-800 */
}

.text-purple-700 {
  color: #7e22ce !important; /* purple-700 */
}

.text-purple-600 {
  color: #9333ea !important; /* purple-600 */
}

.text-indigo-800 {
  color: #3730a3 !important; /* indigo-800 */
}

.text-indigo-700 {
  color: #4338ca !important; /* indigo-700 */
}

.text-indigo-600 {
  color: #4f46e5 !important; /* indigo-600 */
}

/* Specific headings in documentation sections */
h1.text-teal-800, h2.text-teal-800, h3.text-teal-800, h4.text-teal-800, h5.text-teal-800, h6.text-teal-800 {
  color: #115e59 !important;
}

h1.text-orange-800, h2.text-orange-800, h3.text-orange-800, h4.text-orange-800, h5.text-orange-800, h6.text-orange-800 {
  color: #9a3412 !important;
}

h1.text-blue-800, h2.text-blue-800, h3.text-blue-800, h4.text-blue-800, h5.text-blue-800, h6.text-blue-800 {
  color: #1e40af !important;
}

h1.text-purple-800, h2.text-purple-800, h3.text-purple-800, h4.text-purple-800, h5.text-purple-800, h6.text-purple-800 {
  color: #6b21a8 !important;
}

h1.text-indigo-800, h2.text-indigo-800, h3.text-indigo-800, h4.text-indigo-800, h5.text-indigo-800, h6.text-indigo-800 {
  color: #3730a3 !important;
}

/* Ensure prose content maintains colors */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: inherit !important;
}

/* Direct aggressive approach for Documentation page sections */
/* 1. Target all potential heading classes and elements */
/* General Documentation fix - override any black headings with section colors */
body h1, body h2, body h3, body h4, body h5, body h6 {
  color: inherit !important;
}

/* Apply aggressive color inheritance for Documentation page */
[class*="documentation"] h1, 
[class*="documentation"] h2, 
[class*="documentation"] h3, 
[class*="documentation"] h4, 
[class*="documentation"] h5, 
[class*="documentation"] h6,
div[class*="card"] h1,
div[class*="card"] h2,
div[class*="card"] h3,
div[class*="card"] h4,
div[class*="card"] h5,
div[class*="card"] h6 {
  color: inherit !important;
}

/* Ultra-specific override for Documentation page */
main div[class*="rounded"] h1,
main div[class*="rounded"] h2,
main div[class*="rounded"] h3,
main div[class*="rounded"] h4,
main div[class*="rounded"] h5,
main div[class*="rounded"] h6,
main div[class*="p-4"] h1,
main div[class*="p-4"] h2,
main div[class*="p-4"] h3,
main div[class*="p-4"] h4,
main div[class*="p-4"] h5,
main div[class*="p-4"] h6,
main div[class*="p-3"] h1,
main div[class*="p-3"] h2,
main div[class*="p-3"] h3,
main div[class*="p-3"] h4,
main div[class*="p-3"] h5,
main div[class*="p-3"] h6,
main div[class*="p-5"] h1,
main div[class*="p-5"] h2,
main div[class*="p-5"] h3,
main div[class*="p-5"] h4,
main div[class*="p-5"] h5,
main div[class*="p-5"] h6 {
  color: inherit !important;
}

/* Completely override any forced colors in documentation sections */
[id="documentation"] *,
[id="documentation"] h1,
[id="documentation"] h2,
[id="documentation"] h3,
[id="documentation"] h4,
[id="documentation"] h5,
[id="documentation"] h6,
[id="documentation"] p,
[id="documentation"] span,
[id="documentation"] div {
  color: inherit;
}

/* Removed !important flags - now using color-system.css for these styles */