/* Custom styles to complement Tailwind */

/* ============================================
   DARK MODE CSS VARIABLES & BASE STYLES
   ============================================ */

:root {
  /* Light mode colors (default) */
  --bg-primary: #f9fafb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border-color: #e5e7eb;
  --border-focus: #3b82f6;
  --shadow: rgba(0, 0, 0, 0.1);
}

/* Dark mode colors */
.dark-mode {
  --bg-primary: #0A0A0A;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #111111;
  --text-primary: #ffffff;
  --text-secondary: #e5e5e5;
  --text-muted: #a3a3a3;
  --border-color: #333333;
  --border-focus: #60a5fa;
  --shadow: rgba(0, 0, 0, 0.5);
}

/* Base dark mode styles */
.dark-mode html {
  background-color: var(--bg-primary) !important;
}

.dark-mode body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.dark-mode main {
  background-color: var(--bg-primary) !important;
}

/* Iframe context styles - prevent extra spacing and ensure consistent background */
html.iframe-context {
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
  height: auto !important;
  background-color: var(--bg-primary) !important;
  border: none !important;
  outline: none !important;
}

body.iframe-context {
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
  height: auto !important;
  background-color: var(--bg-primary) !important;
  border: none !important;
  outline: none !important;
}

/* Ensure body doesn't force minimum height in iframe */
html.iframe-context body {
  min-height: auto !important;
  height: auto !important;
  background-color: var(--bg-primary) !important;
  border: none !important;
  outline: none !important;
}

/* Remove ALL margins and edge padding when embedded - content touches iframe edges */
body.iframe-context main {
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

body.iframe-context main.container {
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

body.iframe-context main .container {
  margin: 0 !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.iframe-context header {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.iframe-context header .container {
  display: none !important;
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

body.iframe-context footer {
  display: none !important;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  border: none !important;
  background: transparent !important;
}

body.iframe-context footer .container {
  display: none !important;
  margin: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Remove auto margins from centered elements when embedded */
body.iframe-context .mx-auto {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Adjust max-width containers when embedded */
body.iframe-context .max-w-4xl,
body.iframe-context .max-w-2xl {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove padding from main container's padding classes when embedded */
body.iframe-context main.px-4 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.iframe-context main.py-8 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure consistent box-sizing in iframe context */
body.iframe-context,
body.iframe-context *,
body.iframe-context *::before,
body.iframe-context *::after {
  box-sizing: border-box;
}

/* Ensure accurate height calculation for iframe resizing */
html.iframe-context {
  overflow-x: hidden;
  overflow-y: visible;
  scroll-behavior: auto !important;
}

body.iframe-context {
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;
  scroll-behavior: auto !important;
}

/* Ensure page starts at top in iframe */
html.iframe-context,
body.iframe-context {
  scroll-padding-top: 0 !important;
}

/* Ensure hidden elements don't affect height calculation */
body.iframe-context .hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Ensure sections with scroll-mt don't create extra space when hidden */
body.iframe-context .hidden[class*="scroll-mt"] {
  scroll-margin-top: 0 !important;
}

/* Prevent content from being cut off at top */
body.iframe-context main {
  padding-top: 0 !important;
}

/* Ensure calculator container doesn't create extra space */
body.iframe-context #calculator.hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* Ensure loading element doesn't affect height when hidden or when calculator is visible */
body.iframe-context #loading.hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* When calculator is visible, loading should be completely excluded from layout */
body.iframe-context main:has(#calculator:not(.hidden)) #loading {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Ensure loading element doesn't affect height when hidden or when calculator is visible */
body.iframe-context #loading.hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* When calculator is visible, loading should be completely excluded from layout */
body.iframe-context main:has(#calculator:not(.hidden)) #loading {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* When calculator is visible, loading should be completely excluded from layout */
body.iframe-context #calculator:not(.hidden) ~ #loading,
body.iframe-context #calculator:not(.hidden) + #loading {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
}

/* ============================================
   TYPOGRAPHY - FONT FAMILIES
   ============================================ */

/* Base font for entire document - DM Sans (applied to body, inherited by all) */
html {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Headlines: Cabinet Grotesk - Applied to all heading elements */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600;
}

/* Ensure headings in headers also use Cabinet Grotesk */
header h1, header h2, header h3, header h4, header h5, header h6 {
  font-family: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Body text elements - Explicitly set DM Sans */
p, span, div, a, button, input, select, textarea,
label, li, td, th, 
.text, .body-text {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Override Tailwind's default font stack to use DM Sans */
.font-sans,
[class*="font-"]:not([class*="font-display"]) {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Display font utility for Cabinet Grotesk */
.font-display {
  font-family: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Prevent scrolling when sections are hidden */
.hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Loading animation enhancement */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

#loading p {
  animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Industry results hover effect */
#industryResults > div:hover {
  transform: translateX(4px);
  transition: transform 0.2s ease;
}

/* Input focus effects */
input:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Disabled select styling */
select:disabled {
  background-color: #f3f4f6 !important;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Button press effect */
button:active {
  transform: scale(0.98);
}

/* Custom scrollbar for industry results */
#industryResults::-webkit-scrollbar,
#browseResults::-webkit-scrollbar {
  width: 8px;
}

#industryResults::-webkit-scrollbar-track,
#browseResults::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

#industryResults::-webkit-scrollbar-thumb,
#browseResults::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

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

/* Industry mode tabs */
#searchTab, #browseTab {
  transition: all 0.2s ease;
}

#searchTab.border-b-2, #browseTab.border-b-2 {
  border-bottom-width: 2px;
}

/* Browse results styling */
#browseResults > div {
  transition: background-color 0.2s ease;
}

#browseResults > div:hover {
  background-color: #f9fafb;
}

/* Responsive text sizing */
@media (max-width: 640px) {
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
}

/* Print styles */
@media print {
  header, footer, #step1, #step2, button {
    display: none;
  }
  
  #results {
    margin: 0;
    padding: 20px;
  }
}

/* Interactive Chart Styles */
.chart-wrapper {
  position: relative;
  height: 400px;
  margin-bottom: 1rem;
  padding-bottom: 60px; /* Space for legend */
}

/* Ensure Chart.js legend is visible */
.chart-wrapper canvas {
  max-height: 400px;
}

.chart-tooltip {
  position: fixed;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 1rem;
  max-width: 350px;
  min-width: 280px;
  z-index: 1000;
  pointer-events: none;
  transition: opacity 0.2s;
  border: 1px solid #E5E7EB;
}

.chart-tooltip.hidden {
  opacity: 0;
  pointer-events: none;
}

.tooltip-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #E5E7EB;
}

.tooltip-icon {
  font-size: 1.25rem;
}

.tooltip-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: #111827;
}

.tooltip-content {
  font-size: 0.875rem;
  line-height: 1.5;
}

.tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tooltip-row span {
  color: #6B7280;
}

.tooltip-row strong {
  color: #111827;
  font-weight: 600;
}

.tooltip-row.highlight {
  background: #F3F4F6;
  padding: 0.5rem;
  border-radius: 4px;
  margin-top: 0.5rem;
}

.tooltip-divider {
  height: 1px;
  background: #E5E7EB;
  margin: 0.75rem 0;
}

.tooltip-section-title {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 0.5rem;
}

.tooltip-hint {
  font-size: 0.75rem;
  color: #3B82F6;
  text-align: center;
  margin-top: 0.75rem;
  font-weight: 500;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  background: #F9FAFB;
  border-radius: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.legend-color.all-businesses {
  background: linear-gradient(135deg, #EF4444, #3B82F6);
}

.legend-color.incorporated {
  background: linear-gradient(135deg, #EF4444, #10B981);
}

.legend-color.unincorporated {
  background: linear-gradient(135deg, #EF4444, #F59E0B);
}

/* Mobile Responsiveness for Chart */
@media (max-width: 768px) {
  .chart-wrapper {
    height: 300px;
  }
  
  .chart-legend {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .chart-tooltip {
    max-width: 280px;
    font-size: 0.8rem;
  }
}

/* Smooth transitions for screen changes */
#industryOverview,
#step2,
#results,
#expenseAnalysis,
#completeAnalysis {
  transition: opacity 0.3s ease-in-out;
}

/* Chart click feedback */
.distribution-chart-container canvas {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.distribution-chart-container canvas:active {
  transform: scale(0.98);
}

/* Radio button highlight animation */
label:has(input[type="radio"]:checked) {
  transition: all 0.3s ease;
}

/* Expense Input Styles */
.expense-input-group {
  animation: slideIn 0.3s ease-out;
  transition: max-height 0.5s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out;
}

.expense-input-group.expense-completed {
  transition: all 0.3s ease-out;
}

.expense-input-group.expense-completed:hover {
  opacity: 0.8 !important;
  transform: scale(1.01) !important;
  border-color: #93c5fd !important;
}

.expense-input-group.expense-completed .expense-input {
  pointer-events: auto;
  cursor: text;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.expense-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.expense-input.border-emerald-400 {
  animation: pulse-green 0.5s ease-out;
}

@keyframes pulse-green {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
  }
}

.expense-feedback {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Comparison bar markers */
[id^="comparison_"] [style*="bg-blue-600"],
[id^="comparison_"] [style*="bg-emerald-600"] {
  transition: left 0.3s ease-out;
}

/* Additional expenses slide in */
.additional-expense {
  animation: slideIn 0.4s ease-out;
}

/* Autocomplete dropdown styles */
.autocomplete-dropdown {
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}

.autocomplete-option {
  transition: background-color 0.15s ease;
}

.autocomplete-option:hover,
.autocomplete-option.bg-blue-100 {
  background-color: #dbeafe !important;
}

.autocomplete-option:last-child {
  border-bottom: none;
}

/* Expense entry styles */
.expense-entry {
  transition: all 0.3s ease;
}

.expense-entry:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Category input dropdown arrow animation */
.category-input.dropdown-open + div svg {
  transform: translateY(-50%) rotate(180deg);
  transition: transform 0.2s ease;
}

/* Autocomplete dropdown header sticky */
.autocomplete-dropdown > div:first-child {
  z-index: 10;
}

/* Expense category info modal */
#expenseCategoryInfoModal .bg-white {
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Industry selection - Select button styling */
.select-level-btn {
  transition: background-color 0.2s ease, transform 0.1s ease;
  white-space: nowrap;
}

.select-level-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
}

.select-level-btn:active {
  transform: scale(0.95);
}

/* Hide default details/summary disclosure arrow */
details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::marker {
  display: none;
}

/* Smooth details expansion animation */
details summary svg:last-child {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] summary svg:last-child {
  transform: rotate(180deg);
}

/* Ensure content wrapper is ready for animation */
details > div {
  overflow: hidden;
}

/* ============================================
   DARK MODE COMPONENT STYLES
   ============================================ */

/* Header & Footer */
.dark-mode header {
  background-color: var(--bg-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 3px var(--shadow) !important;
}

.dark-mode header h1,
.dark-mode header h2,
.dark-mode header p {
  color: var(--text-primary) !important;
}

.dark-mode footer {
  background-color: var(--bg-primary) !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* Progress Indicator */
.dark-mode #progressIndicator {
  background-color: var(--bg-secondary) !important;
  border-top-color: var(--border-color) !important;
}

.dark-mode #progressIndicator * {
  color: var(--text-secondary) !important;
}

.dark-mode #progressBar {
  background-color: var(--border-color) !important;
}

/* Cards & Sections */
.dark-mode .bg-white,
.dark-mode [class*="bg-white"] {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.dark-mode .bg-gray-50,
.dark-mode [class*="bg-gray-50"],
.dark-mode body.bg-gray-50 {
  background-color: var(--bg-primary) !important;
}

.dark-mode .bg-blue-50,
.dark-mode [class*="bg-blue-50"] {
  background-color: #1e3a5f !important;
  color: var(--text-primary) !important;
}

.dark-mode .bg-emerald-50,
.dark-mode [class*="bg-emerald-50"] {
  background-color: #064e3b !important;
  color: var(--text-primary) !important;
}

.dark-mode .bg-purple-50,
.dark-mode [class*="bg-purple-50"] {
  background-color: #3d2a5f !important;
  color: var(--text-primary) !important;
}

.dark-mode .bg-indigo-50,
.dark-mode [class*="bg-indigo-50"] {
  background-color: #2a2a5f !important;
  color: var(--text-primary) !important;
}

.dark-mode .bg-gradient-to-r,
.dark-mode .bg-gradient-to-br {
  background-image: linear-gradient(to right, var(--bg-secondary), var(--bg-tertiary)) !important;
}

.dark-mode .shadow-md,
.dark-mode .shadow-lg,
.dark-mode .shadow-sm {
  box-shadow: 0 4px 6px -1px var(--shadow), 0 2px 4px -1px var(--shadow) !important;
}

/* Text Colors */
.dark-mode .text-gray-800,
.dark-mode .text-gray-900,
.dark-mode [class*="text-gray-8"],
.dark-mode [class*="text-gray-9"] {
  color: var(--text-primary) !important;
}

.dark-mode .text-gray-600,
.dark-mode .text-gray-700,
.dark-mode [class*="text-gray-6"],
.dark-mode [class*="text-gray-7"] {
  color: var(--text-secondary) !important;
}

.dark-mode .text-gray-500,
.dark-mode .text-gray-400,
.dark-mode [class*="text-gray-5"],
.dark-mode [class*="text-gray-4"] {
  color: var(--text-muted) !important;
}

/* Borders */
.dark-mode .border-gray-200,
.dark-mode .border-gray-300,
.dark-mode [class*="border-gray"] {
  border-color: var(--border-color) !important;
}

.dark-mode .border-blue-200,
.dark-mode .border-blue-300,
.dark-mode [class*="border-blue"] {
  border-color: #1e40af !important;
}

/* Form Inputs */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="number"],
.dark-mode select,
.dark-mode textarea {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: #666666 !important;
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

.dark-mode select:disabled {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-muted) !important;
}

/* Buttons */
.dark-mode button.bg-gray-200,
.dark-mode button[class*="bg-gray-2"] {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.dark-mode button.bg-gray-200:hover,
.dark-mode button[class*="bg-gray-2"]:hover {
  background-color: #1a1a1a !important;
}

/* White buttons with blue text - ensure good contrast */
button.bg-white.text-blue-600,
button.bg-white.text-blue-700 {
  color: #1e40af !important; /* Darker blue for better contrast on white */
}

button.bg-white.text-blue-600:hover,
button.bg-white.text-blue-700:hover {
  color: #1e3a8a !important; /* Even darker on hover */
}

.dark-mode button.bg-white {
  background-color: #ffffff !important;
  color: #1e40af !important; /* Dark blue text on white background */
}

.dark-mode button.bg-white:hover {
  background-color: #f3f4f6 !important;
  color: #1e3a8a !important;
}

/* Links */
.dark-mode a,
.dark-mode button[class*="text-blue"] {
  color: #60a5fa !important;
}

.dark-mode a:hover,
.dark-mode button[class*="text-blue"]:hover {
  color: #93c5fd !important;
}

/* Industry Search Results */
.dark-mode #industryResults,
.dark-mode #browseResults {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

.dark-mode #industryResults > div,
.dark-mode #browseResults > div {
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.dark-mode #industryResults > div:hover,
.dark-mode #browseResults > div:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Tabs */
.dark-mode #searchTab,
.dark-mode #browseTab {
  color: var(--text-secondary) !important;
}

.dark-mode #searchTab.border-b-2,
.dark-mode #browseTab.border-b-2 {
  border-bottom-color: #60a5fa !important;
  color: #60a5fa !important;
}

/* Modals */
.dark-mode #methodologyModal,
.dark-mode #expenseCategoryInfoModal {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

.dark-mode #methodologyModal .bg-white,
.dark-mode #expenseCategoryInfoModal .bg-white {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

.dark-mode #methodologyModal h2,
.dark-mode #methodologyModal h3,
.dark-mode #expenseCategoryInfoModal h2,
.dark-mode #expenseCategoryInfoModal h3 {
  color: var(--text-primary) !important;
}

.dark-mode #methodologyModal p,
.dark-mode #methodologyModal li,
.dark-mode #expenseCategoryInfoModal p,
.dark-mode #expenseCategoryInfoModal li {
  color: var(--text-secondary) !important;
}

.dark-mode #methodologyModal button[class*="text-gray"],
.dark-mode #expenseCategoryInfoModal button[class*="text-gray"] {
  color: var(--text-secondary) !important;
}

.dark-mode #methodologyModal button[class*="text-gray"]:hover,
.dark-mode #expenseCategoryInfoModal button[class*="text-gray"]:hover {
  color: var(--text-primary) !important;
}

/* Chart Tooltip */
.dark-mode .chart-tooltip {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 4px 12px var(--shadow) !important;
}

.dark-mode .tooltip-header {
  border-bottom-color: var(--border-color) !important;
}

.dark-mode .tooltip-title {
  color: var(--text-primary) !important;
}

.dark-mode .tooltip-row span {
  color: var(--text-muted) !important;
}

.dark-mode .tooltip-row strong {
  color: var(--text-primary) !important;
}

.dark-mode .tooltip-row.highlight {
  background-color: var(--bg-tertiary) !important;
}

.dark-mode .tooltip-divider {
  background-color: var(--border-color) !important;
}

.dark-mode .tooltip-section-title {
  color: var(--text-muted) !important;
}

.dark-mode .tooltip-hint {
  color: #60a5fa !important;
}

.dark-mode .chart-legend {
  background-color: var(--bg-secondary) !important;
}

/* Scrollbars */
.dark-mode #industryResults::-webkit-scrollbar-track,
.dark-mode #browseResults::-webkit-scrollbar-track,
.dark-mode .autocomplete-dropdown::-webkit-scrollbar-track {
  background: #1a1a1a !important;
}

.dark-mode #industryResults::-webkit-scrollbar-thumb,
.dark-mode #browseResults::-webkit-scrollbar-thumb,
.dark-mode .autocomplete-dropdown::-webkit-scrollbar-thumb {
  background: #444444 !important;
}

.dark-mode #industryResults::-webkit-scrollbar-thumb:hover,
.dark-mode #browseResults::-webkit-scrollbar-thumb:hover,
.dark-mode .autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
  background: #555555 !important;
}

/* Autocomplete Dropdown */
.dark-mode .autocomplete-dropdown {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

.dark-mode .autocomplete-option {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.dark-mode .autocomplete-option:hover,
.dark-mode .autocomplete-option.bg-blue-100 {
  background-color: var(--bg-tertiary) !important;
}

/* Loading Spinner */
.dark-mode .animate-spin {
  border-color: var(--border-color) !important;
  border-top-color: #60a5fa !important;
}

.dark-mode #loading p {
  color: var(--text-secondary) !important;
}

/* Info Banners */
.dark-mode .bg-blue-50.border-l-4,
.dark-mode [class*="bg-blue-50"][class*="border-l-4"] {
  background-color: #1e3a5f !important;
  border-left-color: #3b82f6 !important;
}

.dark-mode .bg-blue-50.border-l-4 * {
  color: var(--text-primary) !important;
}

.dark-mode .bg-emerald-50.border-l-4,
.dark-mode [class*="bg-emerald-50"][class*="border-l-4"] {
  background-color: #1a3a2e !important;
  border-left-color: #10b981 !important;
}

.dark-mode .bg-purple-50.border-l-4,
.dark-mode [class*="bg-purple-50"][class*="border-l-4"] {
  background-color: #3d2a5f !important;
  border-left-color: #9333ea !important;
}

/* Expense Input Groups */
.dark-mode .expense-input-group {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.dark-mode .expense-input-group.expense-completed:hover {
  border-color: #60a5fa !important;
}

.dark-mode .expense-input {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.dark-mode .expense-input:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

/* Debug Panel */
.dark-mode #debugPanel {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

.dark-mode #debugPanel .bg-gray-800 {
  background-color: var(--bg-tertiary) !important;
}

.dark-mode #debugPanel .bg-gray-50 {
  background-color: var(--bg-secondary) !important;
}

.dark-mode #debugPanel input {
  background-color: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Details/Summary Elements */
.dark-mode details {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

.dark-mode details summary {
  color: var(--text-primary) !important;
}

.dark-mode details[open] summary {
  background-color: var(--bg-tertiary) !important;
}

.dark-mode details .bg-white,
.dark-mode details [class*="bg-white"] {
  background-color: var(--bg-secondary) !important;
}

.dark-mode details .bg-blue-50,
.dark-mode details [class*="bg-blue-50"] {
  background-color: #1e3a5f !important;
}

/* Radio Buttons & Checkboxes */
.dark-mode input[type="radio"],
.dark-mode input[type="checkbox"] {
  accent-color: #60a5fa !important;
}

/* Select Level Button */
.dark-mode .select-level-btn {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.dark-mode .select-level-btn:hover {
  background-color: #1a1a1a !important;
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3) !important;
}

/* Comparison Bars */
.dark-mode [id^="comparison_"] {
  background-color: var(--bg-tertiary) !important;
}

/* Expense Entry */
.dark-mode .expense-entry {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

.dark-mode .expense-entry:hover {
  box-shadow: 0 4px 6px -1px var(--shadow), 0 2px 4px -1px var(--shadow) !important;
}

/* Dynamically Generated Content - Additional Overrides */
.dark-mode .bg-gray-50 {
  background-color: var(--bg-tertiary) !important;
}

.dark-mode .text-gray-800,
.dark-mode .text-gray-900 {
  color: var(--text-primary) !important;
}

.dark-mode .text-gray-600,
.dark-mode .text-gray-700 {
  color: var(--text-secondary) !important;
}

.dark-mode .text-gray-500,
.dark-mode .text-gray-400 {
  color: var(--text-muted) !important;
}

.dark-mode .bg-blue-50 {
  background-color: #1e3a5f !important;
}

.dark-mode .text-emerald-600 {
  color: #10b981 !important;
}

.dark-mode .text-red-500,
.dark-mode .text-red-600 {
  color: #f87171 !important;
}

.dark-mode .text-red-700 {
  color: #ef4444 !important;
}

.dark-mode .border-gray-200 {
  border-color: var(--border-color) !important;
}

.dark-mode .border-blue-300 {
  border-color: #1e40af !important;
}

.dark-mode .border-blue-100 {
  border-color: #1e3a5f !important;
}

/* Loading Overlay */
.dark-mode .loading-overlay {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

.dark-mode .loading-overlay h3,
.dark-mode .loading-overlay p {
  color: var(--text-primary) !important;
}

/* Results Section */
.dark-mode #results {
  color: var(--text-primary) !important;
}

.dark-mode #results .bg-white {
  background-color: var(--bg-secondary) !important;
}

.dark-mode #results .bg-gray-50 {
  background-color: var(--bg-tertiary) !important;
}

/* Results quartile boxes - ensure good contrast */
.dark-mode #results .bg-blue-600 {
  background-color: #1e40af !important;
}

.dark-mode #results .bg-blue-50 {
  background-color: #1e3a5f !important;
}

.dark-mode #results .bg-blue-100 {
  background-color: #1e3a5f !important;
}

.dark-mode #results .text-blue-800 {
  color: var(--text-primary) !important;
}

.dark-mode #results .text-gray-700,
.dark-mode #results .text-gray-800,
.dark-mode #results .text-gray-900 {
  color: var(--text-primary) !important;
}

.dark-mode #results .text-gray-600 {
  color: var(--text-secondary) !important;
}

.dark-mode #results .bg-white.border {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Complete Analysis Section */
.dark-mode #completeAnalysis {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.dark-mode #completeAnalysis .bg-white {
  background-color: var(--bg-secondary) !important;
}

.dark-mode #completeAnalysis .bg-gray-50 {
  background-color: var(--bg-tertiary) !important;
}

/* Pre elements (code blocks) */
.dark-mode pre {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Business Type Toggle Switch */
.business-type-toggle {
  width: 100%;
  position: relative;
  display: flex;
  background-color: #e5e7eb;
  border-radius: 9999px;
  padding: 4px;
}

.business-type-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: calc(50% - 4px);
  background-color: #2563eb;
  border-radius: 9999px;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.business-type-toggle[data-value="1"] .business-type-slider {
  left: 4px;
}

.business-type-toggle[data-value="2"] .business-type-slider {
  left: calc(50% + 2px);
}

.business-type-option {
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 0.2s ease;
}

.business-type-option:hover {
  color: #374151;
}

.business-type-option.active {
  color: #ffffff;
  font-weight: 600;
}

.business-type-option:not(.active) {
  color: #6b7280;
}

/* Dark mode styles for toggle */
.dark-mode .business-type-toggle {
  background-color: var(--bg-tertiary) !important;
}

.dark-mode .business-type-slider {
  background-color: #60a5fa !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .business-type-option.active {
  color: var(--text-primary) !important;
}

.dark-mode .business-type-option:not(.active) {
  color: var(--text-muted) !important;
}

.dark-mode .business-type-option:not(.active):hover {
  color: var(--text-secondary) !important;
}