/* Global light theme accessibility and responsiveness layer */
:root {
  --eco-text: #111827;
  --eco-text-soft: #374151;
  --eco-text-muted: #4b5563;
  --eco-border: #d1d5db;
  --eco-surface: #ffffff;
  --eco-surface-soft: #f9fafb;
  --eco-focus: rgba(5, 150, 105, 0.32);
}

html, body {
  color: var(--eco-text);
  background-color: #ffffff;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Enforce light-only behavior */
.dark, .dark * {
  color-scheme: light !important;
}

/* Better readability in white layouts */
.text-gray-400 { color: #4b5563 !important; }
.text-gray-500 { color: #374151 !important; }
.text-gray-600 { color: #374151 !important; }
.text-gray-700 { color: #1f2937 !important; }

input, select, textarea {
  color: var(--eco-text) !important;
  border-color: var(--eco-border) !important;
  background-color: var(--eco-surface) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--eco-text-muted) !important;
  opacity: 0.9;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--eco-focus);
}

.surface {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--eco-border) !important;
}

/* Keep white text on dark/colored action elements */
.eco-header,
.bg-eco-600,
.bg-eco-700,
.bg-red-600,
.bg-red-700,
.bg-gray-900,
.bg-gray-800,
.btn-primary,
.keep-white {
  color: #ffffff !important;
}

.eco-header .text-white,
.bg-eco-600 .text-white,
.bg-eco-700 .text-white,
.bg-red-600 .text-white,
.bg-red-700 .text-white,
.bg-gray-900 .text-white,
.bg-gray-800 .text-white {
  color: #ffffff !important;
}

/* Force accessible status feedback colors even if `.dark` class is present */
.dark .dark\:text-red-200,
.dark .dark\:text-green-200,
.dark .dark\:text-blue-200 {
  color: var(--eco-text) !important;
}

.dark .dark\:border-red-900\/40,
.dark .dark\:border-green-900\/40,
.dark .dark\:border-blue-900\/40 {
  border-color: var(--eco-border) !important;
}

.dark .dark\:bg-red-900\/20,
.dark .dark\:bg-green-900\/20,
.dark .dark\:bg-blue-900\/20 {
  background-color: var(--eco-surface-soft) !important;
}

/* Improve contrast for common inline status colors used in alerts/toasts */
.text-red-200 { color: #991b1b !important; }
.text-green-200 { color: #166534 !important; }
.text-blue-200 { color: #1e40af !important; }

/* Responsive behavior for mobile + desktop */
main {
  width: min(100%, 1100px);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(0px, env(safe-area-inset-left, 0));
  padding-right: max(0px, env(safe-area-inset-right, 0));
}

.max-w-md {
  width: min(100%, 48rem) !important;
  max-width: 48rem !important;
}

@media (max-width: 640px) {
  .max-w-md {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1024px) {
  .max-w-md {
    width: min(100%, 68rem) !important;
    max-width: 68rem !important;
  }
}

@media (max-width: 768px) {
  .grid {
    gap: 0.75rem;
  }
}

table {
  width: 100%;
}

.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Better safe area spacing for bottom fixed navs */
.bottom-nav,
nav.fixed.bottom-0,
.fixed.bottom-0.left-0.right-0 {
  padding-bottom: env(safe-area-inset-bottom, 0);
}