/* UI Fixes for ResumeRewriter */

/* Apply theme colors to body */
body {
  background-color: var(--color-background) !important;
  color: var(--color-text-primary) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Apply theme colors to navigation */
.nav {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.3s ease;
}

/* Apply theme colors to cards */
.card {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Apply theme colors to sections */
.section {
  background-color: transparent;
}

.section.bg-neutral-50 {
  background-color: var(--color-surface-hover) !important;
}

.section.bg-neutral-100 {
  background-color: var(--color-surface-hover) !important;
}

/* Dark mode specific overrides */
[data-theme="dark"] .hero {
  background: linear-gradient(135deg, var(--color-neutral-900) 0%, var(--color-neutral-950) 100%);
}

[data-theme="dark"] .text-secondary {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .nav-link {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .nav-link:hover {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .nav-brand {
  color: var(--color-text-primary) !important;
}

/* Light mode specific overrides */
[data-theme="light"] .hero {
  background: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%);
}

/* Fix container padding for proper breathing room */
.container {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

@media (min-width: 640px) {
  .container {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
}

/* Fix navigation container spacing */
.nav-container {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* Fix button text color on hover */
.btn-primary {
  color: white !important;
}

.btn-primary:hover {
  color: white !important;
  background-color: var(--color-brand-700);
}

.btn-white {
  background-color: white;
  color: var(--color-brand-600) !important;
}

.btn-white:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-brand-700) !important;
}

.btn-outline-white {
  background-color: transparent;
  color: white !important;
  border: 2px solid white;
}

.btn-outline-white:hover {
  background-color: white;
  color: var(--color-brand-600) !important;
}

/* Ensure theme toggle is properly clickable */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  color: var(--color-text-secondary);
}

.theme-toggle:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text-primary);
}

/* Fix theme toggle icon visibility */
[data-theme="light"] .theme-toggle-light {
  display: block !important;
}

[data-theme="light"] .theme-toggle-dark {
  display: none !important;
}

[data-theme="dark"] .theme-toggle-light {
  display: none !important;
}

[data-theme="dark"] .theme-toggle-dark {
  display: block !important;
}

/* Ensure proper spacing in navigation */
.nav {
  padding: 0 !important;
}

.nav .container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Fix any text contrast issues in dark mode */
[data-theme="dark"] .text-brand-100 {
  color: var(--color-brand-200) !important;
}

/* Additional spacing fixes */
.section {
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Hero section specific fixes */
.hero .container {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .hero .container {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}