/*
 * Light Mode Override CSS
 * ========================
 * This file is loaded as a static asset (bypasses Tailwind/PostCSS processing)
 * to avoid Turbopack CSS parser issues with ::file-selector-button pseudo-element
 * expansion on Tailwind utility class selectors.
 *
 * All rules use !important to ensure they override Tailwind-generated styles.
 */

/* ===== GLOBAL LIGHT MODE OVERRIDES ===== */

/* Base foreground - ensure dark text in light mode */
:root:not(.dark),
html:not(.dark),
html[data-theme="light"],
[data-theme="light"] {
  --color-foreground: 15 23 42 !important;
  --color-card-foreground: 15 23 42 !important;
  --color-popover-foreground: 15 23 42 !important;
  --color-muted-foreground: 71 85 105 !important;
}

/* ULTIMATE FALLBACK: Use prefers-color-scheme for light mode */
@media (prefers-color-scheme: light) {
  :root:not(.dark):not([data-theme="dark"]) {
    --color-foreground: 15 23 42 !important;
    --color-card-foreground: 15 23 42 !important;
    --color-muted-foreground: 71 85 105 !important;
  }

  html:not(.dark):not([data-theme="dark"]) p,
  html:not(.dark):not([data-theme="dark"]) span,
  html:not(.dark):not([data-theme="dark"]) div {
    color: rgb(30 41 59);
  }

  html:not(.dark):not([data-theme="dark"]) .font-medium,
  html:not(.dark):not([data-theme="dark"]) .font-semibold,
  html:not(.dark):not([data-theme="dark"]) .font-bold {
    color: rgb(15 23 42) !important;
  }
}

/* MASTER OVERRIDE: All text inside cards in light mode should be dark */
html:not(.dark) .bg-card,
html:not(.dark) .bg-white,
html:not(.dark) [class*="rounded-lg"][class*="border"],
html:not(.dark) [class*="rounded-xl"][class*="border"],
html[data-theme="light"] .bg-card,
html[data-theme="light"] .bg-white,
html[data-theme="light"] [class*="rounded-lg"][class*="border"],
html[data-theme="light"] [class*="rounded-xl"][class*="border"] {
  background-color: rgb(255 255 255) !important;
  color: rgb(15 23 42) !important;
}

/* All paragraphs in light mode */
html:not(.dark) p,
html[data-theme="light"] p {
  color: rgb(30 41 59) !important;
}

/* Text contrast - ensure readable text in light mode */
html:not(.dark) .text-foreground,
html[data-theme="light"] .text-foreground {
  color: rgb(15 23 42) !important;
}

html:not(.dark) .text-muted-foreground,
html[data-theme="light"] .text-muted-foreground {
  color: rgb(100 116 139) !important;
}

html:not(.dark) .text-card-foreground,
html[data-theme="light"] .text-card-foreground {
  color: rgb(15 23 42) !important;
}

/* Headings - ensure proper contrast */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) h5,
html:not(.dark) h6,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: rgb(15 23 42) !important;
}

/* Table styling - proper contrast */
html:not(.dark) th,
html[data-theme="light"] th {
  color: rgb(51 65 85) !important;
  background-color: rgb(248 250 252) !important;
}

html:not(.dark) td,
html[data-theme="light"] td {
  color: rgb(30 41 59) !important;
}

html:not(.dark) tbody tr:hover,
html[data-theme="light"] tbody tr:hover {
  background-color: rgb(248 250 252) !important;
}

/* All bold, semibold, and medium font text - EXCEPT buttons with colored backgrounds */
html:not(.dark) .font-bold:not(.bg-primary):not(.bg-indigo-600):not(.bg-indigo-500):not([class*="bg-primary"]):not([class*="bg-indigo"]):not(.text-white):not(button):not(a),
html:not(.dark) .font-semibold:not(.bg-primary):not(.bg-indigo-600):not(.bg-indigo-500):not([class*="bg-primary"]):not([class*="bg-indigo"]):not(.text-white):not(button):not(a),
html:not(.dark) .font-medium:not(.bg-primary):not(.bg-indigo-600):not(.bg-indigo-500):not([class*="bg-primary"]):not([class*="bg-indigo"]):not(.text-white):not(button):not(a),
html[data-theme="light"] .font-bold:not(.bg-primary):not(.bg-indigo-600):not(.bg-indigo-500):not([class*="bg-primary"]):not([class*="bg-indigo"]):not(.text-white):not(button):not(a),
html[data-theme="light"] .font-semibold:not(.bg-primary):not(.bg-indigo-600):not(.bg-indigo-500):not([class*="bg-primary"]):not([class*="bg-indigo"]):not(.text-white):not(button):not(a),
html[data-theme="light"] .font-medium:not(.bg-primary):not(.bg-indigo-600):not(.bg-indigo-500):not([class*="bg-primary"]):not([class*="bg-indigo"]):not(.text-white):not(button):not(a) {
  color: rgb(15 23 42) !important;
}

/* Stats card values - all sizes */
html:not(.dark) .text-2xl,
html:not(.dark) .text-3xl,
html:not(.dark) .text-4xl,
html:not(.dark) .text-xl,
html[data-theme="light"] .text-2xl,
html[data-theme="light"] .text-3xl,
html[data-theme="light"] .text-4xl,
html[data-theme="light"] .text-xl {
  color: rgb(15 23 42) !important;
}

/* Labels and small text - EXCEPT buttons */
html:not(.dark) .text-sm:not(button):not(a),
html[data-theme="light"] .text-sm:not(button):not(a) {
  color: rgb(51 65 85) !important;
}

html:not(.dark) .text-xs,
html[data-theme="light"] .text-xs {
  color: rgb(100 116 139) !important;
}

/* Base text color in light mode */
html:not(.dark) .text-base,
html[data-theme="light"] .text-base {
  color: rgb(30 41 59) !important;
}

/* Input fields */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  color: rgb(15 23 42) !important;
  background-color: rgb(255 255 255) !important;
  border-color: rgb(203 213 225) !important;
}

/* Select options */
html:not(.dark) select option {
  color: rgb(15 23 42) !important;
  background-color: rgb(255 255 255) !important;
  padding: 8px 12px !important;
}

html:not(.dark) select option:hover,
html:not(.dark) select option:focus,
html:not(.dark) select option:checked {
  background-color: rgb(241 245 249) !important;
  color: rgb(15 23 42) !important;
}

html:not(.dark) input::placeholder {
  color: rgb(148 163 184) !important;
}

/* Tabs */
html:not(.dark) [role="tablist"] {
  background-color: rgb(241 245 249);
}

html:not(.dark) [role="tab"] {
  color: rgb(71 85 105) !important;
}

html:not(.dark) [role="tab"][data-state="active"] {
  background-color: rgb(255 255 255) !important;
  color: rgb(15 23 42) !important;
}

/* Badges - ensure proper contrast */
html:not(.dark) .bg-muted {
  background-color: rgb(241 245 249) !important;
}

/* Override any text opacity that might be reducing visibility */
html:not(.dark) [class*="text-opacity"],
html:not(.dark) [class*="/50"],
html:not(.dark) [class*="/60"],
html:not(.dark) [class*="/70"],
html:not(.dark) [class*="/80"] {
  opacity: 1 !important;
}

/* Ensure links are visible */
html:not(.dark) a:not(.btn):not([class*="bg-"]):not(.header-dropdown-link) {
  color: rgb(37 99 235);
}

/* Header dropdown menu items */
html:not(.dark) .header-dropdown-link,
html:not(.dark) .header-dropdown-link svg {
  color: #0f172a !important;
}

html:not(.dark) .header-dropdown-logout,
html:not(.dark) .header-dropdown-logout svg {
  color: #dc2626 !important;
}

/* Card content sections */
html:not(.dark) [class*="CardContent"],
html:not(.dark) .p-6,
html:not(.dark) .p-4 {
  color: rgb(30 41 59);
}

/* NUCLEAR OPTION: Force ALL text inside cards to be dark in light mode */
html:not(.dark) .bg-card,
html:not(.dark) .bg-white,
html:not(.dark) [class*="rounded-lg"][class*="border"],
html:not(.dark) [class*="rounded-xl"][class*="border"],
html:not(.dark) [data-radix-scroll-area-viewport] {
  --tw-text-opacity: 1 !important;
  color: rgb(15 23 42 / var(--tw-text-opacity)) !important;
}

html:not(.dark) .bg-card p,
html:not(.dark) .bg-card span,
html:not(.dark) .bg-card div,
html:not(.dark) .bg-white p,
html:not(.dark) .bg-white span,
html:not(.dark) .bg-white div {
  color: rgb(30 41 59) !important;
}

/* Font weight classes should ALWAYS be dark in light mode */
html:not(.dark) .font-mono {
  color: rgb(30 41 59) !important;
}

html:not(.dark) .capitalize {
  color: rgb(15 23 42) !important;
}

/* Grid items inside cards */
html:not(.dark) .grid p,
html:not(.dark) .grid span,
html:not(.dark) .space-y-4 p {
  color: rgb(30 41 59) !important;
}

/* Reset specific semantic colors that should stay */
html:not(.dark) .text-green-600,
html:not(.dark) .text-green-700 {
  color: rgb(22 163 74) !important;
}
html:not(.dark) .text-red-600,
html:not(.dark) .text-red-700 {
  color: rgb(220 38 38) !important;
}
html:not(.dark) .text-blue-600,
html:not(.dark) .text-blue-700 {
  color: rgb(37 99 235) !important;
}
html:not(.dark) .text-yellow-600,
html:not(.dark) .text-yellow-700,
html:not(.dark) .text-amber-600,
html:not(.dark) .text-amber-700 {
  color: rgb(217 119 6) !important;
}
html:not(.dark) .text-purple-600,
html:not(.dark) .text-purple-700 {
  color: rgb(147 51 234) !important;
}
html:not(.dark) .text-primary {
  color: rgb(37 99 235) !important;
}

/* Ensure white text on colored backgrounds stays white */
html:not(.dark) .bg-blue-500 *,
html:not(.dark) .bg-blue-600 *,
html:not(.dark) .bg-green-500 *,
html:not(.dark) .bg-green-600 *,
html:not(.dark) .bg-red-500 *,
html:not(.dark) .bg-red-600 *,
html:not(.dark) .bg-primary *,
html:not(.dark) .bg-indigo-500 *,
html:not(.dark) .bg-indigo-600 *,
html:not(.dark) .bg-purple-500 *,
html:not(.dark) .bg-purple-600 * {
  color: rgb(255 255 255) !important;
}

/* Force white text on primary buttons in light mode */
html:not(.dark) .bg-primary,
html:not(.dark) .bg-indigo-600,
html:not(.dark) .bg-indigo-500,
html:not(.dark) button.bg-primary,
html:not(.dark) button[class*="bg-indigo"],
html:not(.dark) .text-primary-foreground,
html:not(.dark) button.text-white,
html:not(.dark) .text-white {
  color: rgb(255 255 255) !important;
}

/* NUCLEAR: Force white text on ALL buttons with primary/indigo backgrounds */
:root:not(.dark) button[class*="bg-primary"],
:root:not(.dark) button[class*="bg-indigo"],
:root:not(.dark) a[class*="bg-primary"],
:root:not(.dark) a[class*="bg-indigo"] {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

/* ===== BUTTON FIXES FOR LIGHT MODE ===== */
/* Blue buttons */
html:not(.dark) .bg-blue-600,
html:not(.dark) button.bg-blue-600,
html:not(.dark) [class*="bg-blue-600"],
:root:not(.dark) .bg-blue-600,
:root:not(.dark) button.bg-blue-600 {
  background-color: rgb(96 165 250) !important;
  color: white !important;
}

html:not(.dark) .bg-blue-600 *,
html:not(.dark) button.bg-blue-600 *,
html:not(.dark) [class*="bg-blue-600"] *,
:root:not(.dark) .bg-blue-600 *,
:root:not(.dark) button.bg-blue-600 * {
  color: white !important;
}

/* Green buttons */
html:not(.dark) .bg-green-600,
html:not(.dark) button.bg-green-600,
:root:not(.dark) .bg-green-600 {
  background-color: rgb(74 222 128) !important;
  color: white !important;
}

html:not(.dark) .bg-green-600 *,
:root:not(.dark) .bg-green-600 * {
  color: white !important;
}

/* All buttons with bg-primary class */
html:not(.dark) .bg-primary,
html:not(.dark) button.bg-primary,
html:not(.dark) [class*="bg-primary"] {
  background-color: rgb(59 130 246) !important;
  color: rgb(255 255 255) !important;
}

/* Secondary buttons */
html:not(.dark) .bg-secondary,
html:not(.dark) button.bg-secondary,
html:not(.dark) [class*="bg-secondary"] {
  background-color: rgb(124 58 237) !important;
  color: rgb(255 255 255) !important;
}

/* Destructive buttons */
html:not(.dark) .bg-destructive,
html:not(.dark) button.bg-destructive,
html:not(.dark) [class*="bg-destructive"],
html:not(.dark) [class*="variant-destructive"] {
  background-color: rgb(239 68 68) !important;
  color: rgb(255 255 255) !important;
}

/* Button text colors */
html:not(.dark) button.bg-primary *,
html:not(.dark) button.bg-secondary *,
html:not(.dark) button.bg-destructive *,
html:not(.dark) button[class*="bg-primary"] *,
html:not(.dark) button[class*="bg-secondary"] *,
html:not(.dark) button[class*="bg-destructive"] * {
  color: rgb(255 255 255) !important;
}

/* Fix buttons with inline style primary color */
html:not(.dark) button[style*="background: rgb(var(--color-primary)"]:not(.btn-foreground-text),
html:not(.dark) button[style*="background:rgb(var(--color-primary)"]:not(.btn-foreground-text) {
  color: rgb(255 255 255) !important;
}

/* Buttons that should use theme foreground text */
html:not(.dark) button.btn-foreground-text,
html:not(.dark) button.btn-foreground-text *,
html[data-theme="light"] button.btn-foreground-text,
html[data-theme="light"] button.btn-foreground-text * {
  color: rgb(15 23 42) !important;
}
html.dark button.btn-foreground-text,
html.dark button.btn-foreground-text * {
  color: rgb(248 250 252) !important;
}

/* ===== NUCLEAR: Force white text on ALL primary/colored buttons ===== */
html:not(.dark) button.bg-blue-600,
html:not(.dark) button.bg-blue-500,
html:not(.dark) button.bg-blue-700,
html:not(.dark) button.bg-indigo-600,
html:not(.dark) button.bg-indigo-500,
html:not(.dark) button.bg-purple-600,
html:not(.dark) button.bg-purple-500,
html:not(.dark) button.bg-green-600,
html:not(.dark) button.bg-green-500,
html:not(.dark) button.bg-red-600,
html:not(.dark) button.bg-red-500,
html:not(.dark) button.text-white,
html:not(.dark) button.bg-primary,
html:not(.dark) a.bg-blue-600,
html:not(.dark) a.bg-primary,
html:not(.dark) .bg-card button.bg-blue-600,
html:not(.dark) .bg-card button.bg-primary,
html:not(.dark) .bg-card button.text-white,
html:not(.dark) .bg-white button.bg-blue-600,
html:not(.dark) .bg-white button.bg-primary,
html:not(.dark) .bg-white button.text-white,
html[data-theme="light"] button.bg-blue-600,
html[data-theme="light"] button.bg-primary,
html[data-theme="light"] button.text-white {
  color: rgb(255 255 255) !important;
}

/* Force white on button children */
html:not(.dark) button.bg-blue-600 *,
html:not(.dark) button.bg-blue-500 *,
html:not(.dark) button.bg-indigo-600 *,
html:not(.dark) button.bg-purple-600 *,
html:not(.dark) button.bg-green-600 *,
html:not(.dark) button.bg-red-600 *,
html:not(.dark) button.text-white *,
html:not(.dark) button.bg-primary *,
html:not(.dark) a.bg-blue-600 *,
html:not(.dark) a.bg-primary *,
html:not(.dark) .bg-card button.bg-blue-600 *,
html:not(.dark) .bg-card button.bg-primary *,
html:not(.dark) .bg-card button.text-white *,
html:not(.dark) .bg-white button.bg-blue-600 *,
html:not(.dark) .bg-white button.bg-primary *,
html:not(.dark) .bg-white button.text-white *,
html[data-theme="light"] button.bg-blue-600 *,
html[data-theme="light"] button.bg-primary *,
html[data-theme="light"] button.text-white * {
  color: rgb(255 255 255) !important;
}

/* Gradient buttons */
html:not(.dark) button[class*="bg-gradient"],
html:not(.dark) button[class*="bg-gradient"] *,
html:not(.dark) .bg-card button[class*="bg-gradient"],
html:not(.dark) .bg-card button[class*="bg-gradient"] * {
  color: rgb(255 255 255) !important;
}

/* Force white text on buttons with inline style color white */
html:not(.dark) button[style*="color: #ffffff"],
html:not(.dark) button[style*="color:#ffffff"],
html:not(.dark) button[style*='color: "#ffffff"'],
html:not(.dark) button[aria-pressed="true"].font-semibold,
html[data-theme="light"] button[style*="color: #ffffff"],
html[data-theme="light"] button[aria-pressed="true"].font-semibold {
  color: #ffffff !important;
}

/* NUCLEAR: Force white text on all selected tier/billing toggle buttons */
html:not(.dark) button[aria-pressed="true"],
html:not(.dark) button[aria-pressed="true"] *,
html[data-theme="light"] button[aria-pressed="true"],
html[data-theme="light"] button[aria-pressed="true"] * {
  color: #ffffff !important;
}

/* Force white text on elements with bg-primary class */
html:not(.dark) .bg-primary,
html:not(.dark) .bg-primary *,
html:not(.dark) .bg-primary span,
html:not(.dark) .bg-primary .font-semibold,
html[data-theme="light"] .bg-primary,
html[data-theme="light"] .bg-primary *,
html[data-theme="light"] .bg-primary span,
html[data-theme="light"] .bg-primary .font-semibold {
  color: #ffffff !important;
}

/* Force white text on bg-blue-600 elements */
html:not(.dark) .bg-blue-600,
html:not(.dark) .bg-blue-600 *,
html:not(.dark) .bg-blue-600 span,
html:not(.dark) .bg-blue-600 svg,
html:not(.dark) .bg-blue-600 .font-semibold,
html:not(.dark) .bg-blue-600 .text-sm,
html[data-theme="light"] .bg-blue-600,
html[data-theme="light"] .bg-blue-600 *,
html[data-theme="light"] .bg-blue-600 span,
html[data-theme="light"] .bg-blue-600 svg,
html[data-theme="light"] .bg-blue-600 .font-semibold,
html[data-theme="light"] .bg-blue-600 .text-sm {
  color: #ffffff !important;
}

/* ===== BADGE FIXES FOR LIGHT MODE ===== */
html:not(.dark) .bg-slate-600,
html:not(.dark) .bg-slate-700,
html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-gray-600,
html:not(.dark) .bg-gray-700,
html:not(.dark) .bg-gray-800,
html:not(.dark) .bg-zinc-600,
html:not(.dark) .bg-zinc-700,
html:not(.dark) .bg-zinc-800 {
  color: rgb(255 255 255) !important;
}

html:not(.dark) .bg-slate-600 *,
html:not(.dark) .bg-slate-700 *,
html:not(.dark) .bg-slate-800 *,
html:not(.dark) .bg-gray-600 *,
html:not(.dark) .bg-gray-700 *,
html:not(.dark) .bg-gray-800 * {
  color: rgb(255 255 255) !important;
}

/* ===== SLATE/GRAY TEXT FIXES FOR LIGHT MODE ===== */
html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400,
html:not(.dark) .text-gray-300,
html:not(.dark) .text-gray-400 {
  color: rgb(100 116 139) !important;
}

html:not(.dark) .text-slate-500,
html:not(.dark) .text-gray-500 {
  color: rgb(71 85 105) !important;
}

/* ===== DARK MODE TEXT OVERRIDES ===== */
html.dark .text-foreground {
  color: rgb(248 250 252) !important;
}

html.dark .text-muted-foreground {
  color: rgb(148 163 184) !important;
}

html.dark th {
  color: rgb(203 213 225) !important;
  background-color: rgb(30 41 59) !important;
}

html.dark td {
  color: rgb(226 232 240);
}

html.dark input,
html.dark textarea,
html.dark select {
  color: rgb(248 250 252) !important;
  background-color: rgb(30 41 59) !important;
  border-color: rgb(51 65 85) !important;
}

/* ===== ADMIN/LANDLORD LAYOUT LIGHT MODE TEXT ===== */
html:not(.dark) .admin-layout .text-xs,
html:not(.dark) .admin-layout .text-sm,
html:not(.dark) .landlord-layout .text-xs,
html:not(.dark) .landlord-layout .text-sm {
  color: rgb(51 65 85);
}

html:not(.dark) .admin-layout button .text-muted-foreground,
html:not(.dark) .landlord-layout button .text-muted-foreground {
  color: rgb(71 85 105) !important;
}

html:not(.dark) .admin-layout .font-medium:not([class*="text-white"]),
html:not(.dark) .landlord-layout .font-medium:not([class*="text-white"]),
html:not(.dark) .admin-layout .font-semibold:not([class*="text-white"]),
html:not(.dark) .landlord-layout .font-semibold:not([class*="text-white"]) {
  color: rgb(15 23 42) !important;
}

/* ===== DATA-FORCE-WHITE OVERRIDES ===== */
html:not(.dark) [data-force-white],
html:not(.dark) [data-force-white] h1,
html:not(.dark) [data-force-white] h2,
html:not(.dark) [data-force-white] h3,
html:not(.dark) [data-force-white] h4,
html:not(.dark) [data-force-white] h5,
html:not(.dark) [data-force-white] h6,
html:not(.dark) [data-force-white] p,
html:not(.dark) [data-force-white] span,
html:not(.dark) [data-force-white] div,
html:not(.dark) [data-force-white] label,
html:not(.dark) [data-force-white] svg,
html:not(.dark) [data-force-white] .font-bold,
html:not(.dark) [data-force-white] .font-semibold,
html:not(.dark) [data-force-white] .font-medium,
html:not(.dark):not([data-theme="dark"]) [data-force-white],
html:not(.dark):not([data-theme="dark"]) [data-force-white] h1,
html:not(.dark):not([data-theme="dark"]) [data-force-white] h2,
html:not(.dark):not([data-theme="dark"]) [data-force-white] h3,
html:not(.dark):not([data-theme="dark"]) [data-force-white] p,
html:not(.dark):not([data-theme="dark"]) [data-force-white] span,
html:not(.dark):not([data-theme="dark"]) [data-force-white] div,
html:not(.dark):not([data-theme="dark"]) [data-force-white] .font-bold,
html:not(.dark):not([data-theme="dark"]) [data-force-white] .font-semibold,
html:not(.dark):not([data-theme="dark"]) [data-force-white] .font-medium,
html[data-theme="light"] [data-force-white],
html[data-theme="light"] [data-force-white] h1,
html[data-theme="light"] [data-force-white] h2,
html[data-theme="light"] [data-force-white] h3,
html[data-theme="light"] [data-force-white] p,
html[data-theme="light"] [data-force-white] span,
html[data-theme="light"] [data-force-white] div,
html[data-theme="light"] [data-force-white] .font-bold,
html[data-theme="light"] [data-force-white] .font-semibold,
html[data-theme="light"] [data-force-white] .font-medium {
  color: inherit !important;
}

html:not(.dark) [data-force-btn-white],
html:not(.dark) [data-force-btn-white] span,
html:not(.dark) [data-force-btn-white] svg,
html:not(.dark):not([data-theme="dark"]) [data-force-btn-white],
html:not(.dark):not([data-theme="dark"]) [data-force-btn-white] span,
html:not(.dark):not([data-theme="dark"]) [data-force-btn-white] svg {
  color: #ffffff !important;
}