/* --- Custom CSS Variables for Day/Night Mode (Food/Organic Theme) --- */
/* --- PREVIOUS CSS VARIABLES (Keep these) --- */
:root {
  /* ... keep your existing variables ... */
  --day-bg: #fdfbf7;
  --day-text: #3e2723;
  --day-panel: #ffffff;
  --day-border: #e5e7eb;
  
  --night-bg: #121212;
  --night-text: #e0e0e0;
  --night-panel: #1e1e1e;
  --night-border: #374151;
}

/* --- FORCE HEADER BUTTONS TO REACT --- */

/* 1. Header Background */
header, nav {
  background-color: var(--day-panel) !important;
  border-bottom: 1px solid var(--day-border);
}
.dark header, .dark nav {
  background-color: var(--night-panel) !important;
  border-bottom: 1px solid var(--night-border);
}

/* 2. Header Icons & Buttons (Menu, Cart, Theme Toggle) */
header button, header a {
  color: var(--day-text); /* Default to dark brown */
}

/* Force dark mode text for header icons */
.dark header button, 
.dark header a {
  color: var(--night-text) !important;
}

/* 3. Hover States for Header Items */
header button:hover, 
header a:hover {
  background-color: #f3f4f6 !important; /* Light Gray for Day */
}
.dark header button:hover, 
.dark header a:hover {
  background-color: #374151 !important; /* Dark Gray for Night */
}

/* 4. Active Tab (Blue Button) - Keep it Blue */
header a.bg-blue-600 {
  background-color: #2563eb !important;
  color: white !important;
}
.dark header a.bg-blue-600 {
  background-color: #3b82f6 !important;
}

:root {
  /* Day Mode: Warm, Organic, Fresh */
  --day-bg: #fdfbf7;      /* Warm Oatmeal */
  --day-panel: #ffffff;   /* Pure White */
  --day-text: #3e2723;    /* Espresso Brown */
  --day-heading: #15803d; /* Basil Green */
  --day-label: #a16207;   /* Golden/Spice */
  --day-border: #e5e7eb;  /* Soft Gray */
  --day-btn-text: #ffffff;

  /* Night Mode: Sleek, Deep */
  --night-bg: #121212;    /* Deep Black */
  --night-panel: #1e1e1e; /* Dark Gray Card */
  --night-text: #e0e0e0;  /* Light Gray */
  --night-heading: #86efac; /* Mint Green */
  --night-label: #fcd34d; /* Soft Gold */
  --night-border: #374151; /* Dark Border */
}

/* --- 1. GLOBAL BACKGROUNDS & TEXT --- */
body {
  background-color: var(--day-bg) !important;
  color: var(--day-text) !important;
}

/* Force standard Tailwind background classes to use our variables */
.bg-gray-50, .bg-gray-100, .min-h-screen {
  background-color: var(--day-bg) !important;
}

.bg-white, .bg-gray-50, .card, .panel {
  background-color: var(--day-panel) !important;
  border-color: var(--day-border) !important;
  color: var(--day-text) !important;
}

/* --- 2. TEXT COLOR OVERRIDES --- */
.text-gray-900, .text-gray-800, .text-gray-700, p, li, span, div {
  color: var(--day-text) !important;
}

.text-gray-500, .text-gray-600 {
  color: #5d4037 !important; /* Lighter brown */
}

h1, h2, h3, h4, h5, h6, strong, b, th {
  color: var(--day-heading) !important;
}

/* --- 3. BUTTONS & INPUTS (Crucial Fix) --- */
input, select, textarea {
  background-color: var(--day-panel) !important;
  color: var(--day-text) !important;
  border: 1px solid var(--day-border) !important;
}

/* Fix for Buttons not changing */
button {
  transition: background-color 0.3s, color 0.3s;
}

/* --- DARK MODE OVERRIDES --- */
.dark body {
  background-color: var(--night-bg) !important;
  color: var(--night-text) !important;
}

/* Fix Backgrounds in Dark Mode */
.dark .bg-gray-50, 
.dark .bg-gray-100, 
.dark .bg-slate-900, 
.dark .min-h-screen {
  background-color: var(--night-bg) !important;
}

.dark .bg-white, 
.dark .bg-gray-800, 
.dark .card {
  background-color: var(--night-panel) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
}

/* Fix Text in Dark Mode */
.dark .text-gray-900, .dark .text-white, .dark .text-gray-800, 
.dark p, .dark li, .dark span, .dark div {
  color: var(--night-text) !important;
}

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

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, 
.dark strong, .dark b, .dark th {
  color: var(--night-heading) !important;
}

/* Fix Inputs in Dark Mode */
.dark input, .dark select, .dark textarea {
  background-color: #2d2d2d !important; /* Slightly lighter than bg */
  color: var(--night-text) !important;
  border-color: var(--night-border) !important;
}

/* --- SPECIFIC FIX FOR BUTTONS IN DARK MODE --- */
/* This ensures default buttons don't stay white/gray */
.dark button.bg-white, 
.dark button.bg-gray-100 {
  background-color: var(--night-panel) !important;
  color: var(--night-text) !important;
  border: 1px solid var(--night-border);
}

/* Primary Action Buttons (Blue/Green) - Keep them popping */
.dark .bg-blue-600 {
  background-color: #2563eb !important; /* Slightly brighter blue for dark mode */
  color: white !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: var(--night-border) !important;
}

/* --- TABLE FIXES --- */
th {
  border-bottom: 2px solid var(--day-heading);
}
.dark th {
  border-bottom: 2px solid var(--night-heading);
}
td {
  border-bottom: 1px solid var(--day-border);
}
.dark td {
  border-bottom: 1px solid var(--night-border);
}