/* ========== THEME SYSTEM — CSS VARIABLES ========== */

/* Light Mode (default) */
:root {
  --bg-body: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-border: #e2e8f0;
  --bg-input: #ffffff;
  --bg-input-border: #d1d5db;
  --bg-header: rgba(255, 255, 255, 0.9);
  --bg-header-border: #e2e8f0;
  --text-heading: #111827;
  --text-body: #1f2937;
  --text-label: #374151;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --bg-slot: #ffffff;
  --bg-slot-border: #e5e7eb;
  --bg-pass: rgba(220, 252, 231, 0.7);
  --bg-pass-border: #86efac;
  --bg-fail: rgba(254, 226, 226, 0.7);
  --bg-fail-border: #fca5a5;
  --bg-warn: rgba(254, 243, 199, 0.7);
  --bg-warn-border: #fcd34d;
  --text-pass: #15803d;
  --text-fail: #dc2626;
  --text-warn: #d97706;
  --bg-dropzone: rgba(249, 250, 251, 0.8);
  --bg-dropzone-border: #d1d5db;
  --shadow: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-lg: 0 4px 15px rgba(0,0,0,0.08);
}

/* Dark Mode */
html.dark {
  --bg-body: #020617;
  --bg-card: rgba(30, 41, 59, 0.5);
  --bg-card-border: rgba(51, 65, 85, 0.5);
  --bg-input: rgba(15, 23, 42, 0.5);
  --bg-input-border: #475569;
  --bg-header: rgba(15, 23, 42, 0.8);
  --bg-header-border: rgba(51, 65, 85, 0.5);
  --text-heading: #f1f5f9;
  --text-body: #e2e8f0;
  --text-label: #cbd5e1;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --bg-slot: rgba(15, 23, 42, 0.5);
  --bg-slot-border: rgba(51, 65, 85, 0.5);
  --bg-pass: rgba(34, 197, 94, 0.12);
  --bg-pass-border: rgba(34, 197, 94, 0.4);
  --bg-fail: rgba(239, 68, 68, 0.12);
  --bg-fail-border: rgba(239, 68, 68, 0.4);
  --bg-warn: rgba(245, 158, 11, 0.12);
  --bg-warn-border: rgba(245, 158, 11, 0.4);
  --text-pass: #4ade80;
  --text-fail: #f87171;
  --text-warn: #fbbf24;
  --bg-dropzone: rgba(15, 23, 42, 0.5);
  --bg-dropzone-border: rgba(100, 116, 139, 0.5);
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
}

html.dark body {
  background-image: 
    radial-gradient(at 20% 20%, rgba(99, 102, 241, 0.08) 0px, transparent 50%),
    radial-gradient(at 80% 80%, rgba(139, 92, 246, 0.06) 0px, transparent 50%);
  background-attachment: fixed;
}

/* ========== THEME CLASSES ========== */
.theme-bg { background-color: var(--bg-body); color: var(--text-body); }
.theme-header { background: var(--bg-header); backdrop-filter: blur(12px); border-bottom: 1px solid var(--bg-header-border); }
.theme-card { background: var(--bg-card); border: 1px solid var(--bg-card-border); box-shadow: var(--shadow-lg); }
.theme-heading { color: var(--text-heading); }
.theme-text { color: var(--text-body); }
.theme-label { color: var(--text-label); }
.theme-muted { color: var(--text-muted); }
.theme-input { background: var(--bg-input); border: 1px solid var(--bg-input-border); color: var(--text-body); }
.theme-input::placeholder { color: var(--text-faint); }
.theme-toggle-btn { color: var(--text-muted); background: transparent; border: 1px solid var(--bg-card-border); }
.theme-toggle-btn:hover { color: var(--text-heading); background: var(--bg-card); }

/* ========== COMPONENT STYLES ========== */

/* Upload drop zone */
.upload-zone {
  border: 2px dashed var(--bg-dropzone-border);
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bg-dropzone);
}
.upload-zone:hover {
  border-color: #6366f1;
  background-color: rgba(99, 102, 241, 0.05);
}
.upload-zone.active {
  border-color: #6366f1;
  background-color: rgba(99, 102, 241, 0.1);
}
.upload-zone.compact {
  padding: 0.75rem 1rem;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}
.status-pending { background: rgba(100, 116, 139, 0.15); color: var(--text-muted); border: 1px solid rgba(100, 116, 139, 0.3); }
.status-analyzing { background: rgba(99, 102, 241, 0.15); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); }
.status-pass { background: rgba(34, 197, 94, 0.15); color: var(--text-pass); border: 1px solid rgba(34, 197, 94, 0.3); }
.status-fail { background: rgba(239, 68, 68, 0.15); color: var(--text-fail); border: 1px solid rgba(239, 68, 68, 0.3); }
.status-review { background: rgba(245, 158, 11, 0.15); color: var(--text-warn); border: 1px solid rgba(245, 158, 11, 0.3); }

/* Photo slots */
.photo-slot {
  background: var(--bg-slot);
  border-color: var(--bg-slot-border);
}

/* Pulsing border animation for AI warnings */
@keyframes border-pulse {
  0%, 100% { border-color: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
  50% { border-color: #fca5a5; box-shadow: 0 0 15px rgba(239, 68, 68, 0.1); }
}
.animate-border-pulse {
  animation: border-pulse 1.5s ease-in-out infinite;
}

/* Section hover */
section {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Input dark mode color scheme */
html.dark input[type="text"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark textarea,
html.dark select {
  color-scheme: dark;
}

/* Checkbox/radio accent */
input[type="checkbox"], input[type="radio"] {
  accent-color: #6366f1;
}

/* Scrollbar (dark mode only) */
html.dark ::-webkit-scrollbar { width: 8px; }
html.dark ::-webkit-scrollbar-track { background: #0f172a; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }


/* Result boxes */
.result-pass { background: var(--bg-pass); border: 1px solid var(--bg-pass-border); border-radius: 0.5rem; }
.result-fail { background: var(--bg-fail); border: 1px solid var(--bg-fail-border); border-radius: 0.5rem; }
.result-review { background: var(--bg-warn); border: 1px solid var(--bg-warn-border); border-radius: 0.5rem; }
.result-pass-text { color: var(--text-pass); }
.result-fail-text { color: var(--text-fail); }
.result-review-text { color: var(--text-warn); }


/* Override Tailwind gray text colors in dark mode for readability */
html.dark .text-gray-900 { color: #f1f5f9 !important; }
html.dark .text-gray-800 { color: #e2e8f0 !important; }
html.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .text-gray-600 { color: #94a3b8 !important; }
html.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-gray-400 { color: #64748b !important; }

/* Override Tailwind gray backgrounds in dark mode */
html.dark .bg-gray-50 { background-color: rgba(30, 41, 59, 0.5) !important; }
html.dark .bg-gray-100 { background-color: rgba(30, 41, 59, 0.7) !important; }
html.dark .border-gray-100 { border-color: rgba(51, 65, 85, 0.5) !important; }
html.dark .border-gray-200 { border-color: rgba(51, 65, 85, 0.5) !important; }
html.dark .border-gray-300 { border-color: #475569 !important; }

/* Override amber warning boxes in dark mode */
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; }
html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; }
html.dark .text-amber-700 { color: #fbbf24 !important; }
html.dark .text-amber-600 { color: #fbbf24 !important; }

/* Override green result boxes in dark mode */
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; }
html.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.3) !important; }
html.dark .text-green-700 { color: #4ade80 !important; }
html.dark .text-green-600 { color: #4ade80 !important; }

/* Override red boxes in dark mode */
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; }
html.dark .border-red-300 { border-color: rgba(239, 68, 68, 0.4) !important; }
html.dark .text-red-700 { color: #f87171 !important; }
html.dark .text-red-600 { color: #f87171 !important; }
html.dark .text-red-500 { color: #f87171 !important; }

/* File info bars in dark mode */
html.dark .bg-gray-50.rounded-lg { background-color: rgba(15, 23, 42, 0.5) !important; }


/* Disclaimer callout — subtle attention pulse */
@keyframes disclaimer-pulse {
  0%, 100% { border-color: #f59e0b; box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
  50% { border-color: #fbbf24; box-shadow: 0 0 12px rgba(245, 158, 11, 0.4); }
}
.disclaimer-callout {
  animation: disclaimer-pulse 2s ease-in-out infinite;
}
html.dark .disclaimer-callout {
  background-color: rgba(245, 158, 11, 0.1) !important;
}


/* ========== MOBILE OPTIMIZATION ========== */
@media (max-width: 640px) {
  /* Tighter page padding on phones */
  main {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Larger touch targets for radio/checkbox */
  input[type="radio"], input[type="checkbox"] {
    min-width: 1.15rem;
    min-height: 1.15rem;
  }

  /* Photo slot: keep preview + buttons from cramping */
  .photo-slot .flex.items-start {
    flex-wrap: wrap;
  }

  /* Bigger tap targets for upload/remove buttons on mobile */
  .photo-slot button {
    min-height: 38px;
  }

  /* QA checklist Yes/No labels bigger tap area */
  .status-badge {
    font-size: 0.7rem;
  }

  /* Reduce big section header padding */
  section .p-5 {
    padding: 1rem !important;
  }

  /* Make section headings wrap gracefully */
  h3 { font-size: 0.95rem; }

  /* Upload zones a bit more compact */
  .upload-zone { padding: 1.5rem 1rem; }
}

/* ========== TABLET/LAPTOP ========== */
@media (min-width: 641px) and (max-width: 1024px) {
  main { max-width: 42rem; }
}

/* Prevent iOS zoom on input focus (font-size >= 16px) */
@media (max-width: 640px) {
  input[type="text"], input[type="number"], input[type="date"],
  textarea, select {
    font-size: 16px !important;
  }
}

/* Smooth scrolling and better touch behavior */
html { scroll-behavior: smooth; }
button, a, input, label { -webkit-tap-highlight-color: rgba(99, 102, 241, 0.2); }