/* Custom styles for Mileage Calendar */

* {
  box-sizing: border-box;
}

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

/* Mobile bottom nav spacing */
@media (max-width: 767px) {
  #app-content {
    padding-bottom: 80px; /* Space for bottom nav */
  }
}

/* Ensure touch targets are at least 44px */
button {
  min-height: 44px;
  min-width: 44px;
}

/* Dark mode styles */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #1f2937;
  color: #f9fafb;
}

html.dark .bg-white {
  background-color: #374151 !important;
}

html.dark .bg-gray-50 {
  background-color: #1f2937 !important;
}

html.dark .bg-gray-100 {
  background-color: #374151 !important;
}

html.dark .text-gray-900 {
  color: #f9fafb !important;
}

html.dark .text-gray-800 {
  color: #e5e7eb !important;
}

html.dark .text-gray-700 {
  color: #d1d5db !important;
}

html.dark .text-gray-600 {
  color: #9ca3af !important;
}

html.dark .text-gray-500 {
  color: #6b7280 !important;
}

html.dark .border-gray-200 {
  border-color: #4b5563 !important;
}

html.dark .border-gray-300 {
  border-color: #6b7280 !important;
}

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

html.dark .bg-green-50 {
  background-color: #1a3a2a !important;
}

html.dark .divide-gray-200 > * {
  border-color: #4b5563 !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #374151;
  border-color: #6b7280;
  color: #f9fafb;
}

html.dark input::placeholder {
  color: #9ca3af;
}

html.dark .hover\:bg-gray-50:hover {
  background-color: #4b5563 !important;
}

html.dark .hover\:bg-gray-100:hover {
  background-color: #4b5563 !important;
}