/* HOM - Market Widget Dark Theme Styles */

.hom-market-widget,
.hom-market-widget-container {
  /* Base colors */
  --primary: #00ded1;
  --primary-dark: #00b3a9;
  --primary-light: rgba(0, 222, 209, 0.15);
  --accent: #00ded1;
  --success: #4caf50;
  --danger: #f44336;
  --warning: #ff9800;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-light: #999999;
  --bg-dark: #121212;
  --bg-darker: #0a0a0a;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --border-color: #333333;
  --border-radius: 8px;
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5);
  --link-color: #00ded1;
  --link-hover-color: #0cffec;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --transition: all 0.3s ease;
  
  /* Chart.js customization variables */
  --chart-grid-color: rgba(255, 255, 255, 0.1);
  --chart-border-color: rgba(255, 255, 255, 0.2);
  --chart-tick-color: rgba(255, 255, 255, 0.7);
  --chart-label-color: rgba(255, 255, 255, 0.9);
  --chart-tooltip-bg: rgba(0, 0, 0, 0.7);
  --chart-tooltip-border: #333333;
  
  font-family: var(--font-family);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  max-width: 100%;
  padding: 1.5rem;
}

.hom-market-widget h2 {
  color: var(--text-primary) !important;
  margin-bottom: 15px;
  font-size: 1.375rem;
  font-weight: 600;
}

/* Ensure metro area titles are properly styled in dark mode */
.hom-market-widget h2[style*="color: #333"] {
  color: var(--text-primary) !important;
}

/* Ensure all location text including "Metro Area" text is light */
.hom-market-widget div > h2:first-of-type {
  color: var(--text-primary) !important;
}

.hom-market-widget div[style*="color: #666"] {
  color: var(--text-secondary) !important;
}

/* Metric cards styling */
.hom-market-widget div[style*="background: #f9f9f9"] {
  background: var(--bg-darker) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

/* Font colors */
.hom-market-widget div[style*="color: #666"] {
  color: var(--text-secondary) !important;
}

.hom-market-widget div[style*="color: #0066cc"] {
  color: var(--primary) !important;
  font-weight: bold;
}

/* Trend indicators */
.hom-market-widget div[style*="color: green"] {
  color: var(--success) !important;
}

.hom-market-widget div[style*="color: red"] {
  color: var(--danger) !important;
}

/* Footer text */
.hom-market-widget div[style*="color: #999"] {
  color: var(--text-light) !important;
}

/* Chart styling */
.hom-market-widget canvas {
  background-color: var(--bg-darker);
  border-radius: calc(var(--border-radius) / 2);
  border: 1px solid var(--border-color);
  padding: 0.5rem;
}

/* Loading state */
.hom-market-widget div[style*="text-align: center; padding: 40px;"] {
  color: var(--text-secondary);
  background-color: var(--bg-card);
}

/* Error messages */
.hom-market-widget div[style*="color: red; padding: 20px;"] {
  color: var(--danger) !important;
  background-color: rgba(244, 67, 54, 0.1);
  border-radius: var(--border-radius);
  border: 1px solid rgba(244, 67, 54, 0.3);
}

/* Link styling for dark theme */
.hom-market-widget a,
.hom-market-widget-container a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.hom-market-widget a:hover,
.hom-market-widget-container a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* Footer links in dark theme */
.hom-market-footer a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 500;
}

.hom-market-footer a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}