/* Define CSS Variables for Light and Dark Themes */
:root {
  /* Light Theme Defaults */
  --color-bg-body: #f0f2f5;
  --color-text-body: #333;
  --color-bg-card: white;
  --color-text-card-heading: #1f2937; /* gray-900 */
  --color-text-card-label: #4b5563; /* gray-700 */
  --color-input-bg: white;
  --color-input-text: #4b5563; /* gray-700 */
  --color-input-border: #d1d5db; /* gray-300 */
  --color-list-item-bg: #f9fafb; /* gray-50 */
  --color-modal-bg: white;
  --color-modal-text: #1f2937;
  --color-bg-sub-card: #edf2f7;
  --color-bg-alt-card:  #e2e8f0;


  /* Header Colors */
  --color-header-bg: #d1d5db; /* gray-300 */
  --color-header-text: #020202 ;
  --color-header-link: #1f2937; /* gray-900 */
  --color-header-link-hover: black;

  /* Heading Colors */
  --color-h1-heading: #f59e0b; /* yello-500 */
  --color-h2-heading: #1a202c; /* gray-900 */
  --color-h3-heading: #1f2937; /* gray-900 */

  /* Button Colors */
  --color-btn-primary-bg: #16a34a; /* green-600 */
  --color-btn-primary-hover-bg: #15803d; /* green-700 */
  --color-btn-text: white;
  --color-btn-logout-bg: #dc2626; /* red-600 */
  --color-btn-logout-hover-bg: #b91c1c; /* red-700 */
  --color-btn-toggle-bg: #4b5563; /* gray-700 */
  --color-btn-toggle-hover-bg: #6b7280; /* gray-600 */
  --color-btn-edit-text: #2563eb; /* blue-600 */
  --color-btn-edit-hover-text: #1d4ed8; /* blue-800 */
  --color-btn-delete-text: #ef4444; /* red-600 */
  --color-btn-delete-hover-text: #dc2626; /* red-800 */

  /* Footer Colors */
  --color-footer-bg: white; /* gray-900 */
  --color-footer-text-main: white;
  --color-footer-text-secondary: #9ca3af; /* gray-400 */
  --color-footer-border: #374151; /* gray-700 */
}

/* Dark Theme Overrides - Based on provided screenshots */
body[data-theme="dark"] {
  --color-bg-body: #1a202c; /* Dark background from original site */
  --color-text-body: #e2e8f0; /* Light text from original site */
  --color-bg-card: #2d3748; /* Card background from original site */
  --color-text-card-heading: #e2e8f0; /* Light text for card headings */
  --color-text-card-label: #a0aec0; /* gray-400 for labels */
  --color-input-bg: #4a5568; /* darker input background */
  --color-input-text: #e2e8f0; /* Light text */
  --color-input-border: #4a5568; /* darker border */
  --color-list-item-bg: #4a5568; /* gray-700 for list items */
  --color-modal-bg: #2d3748; /* Modal background matches cards */
  --color-modal-text: #e2e8f0; /* Light text for modal */
  --color-bg-sub-card: #1f2937;
  --color-bg-alt-card: #374151;

  /* Header Colors - Dark */
  --color-header-bg: #111827; /* Very dark header/footer from screenshots */
  --color-header-text: #e2e8f0; /* Light text */
  --color-header-link: #d1d5db; /* gray-300 for links */
  --color-header-link-hover: #f9fafb; /* Light text on hover */

  /* Heading Colors - Dark */
  --color-h1-heading: #d97706; /* Main heading is light in dark mode */
  --color-h2-heading: #e2e8f0; /* H2 headings are light */
  --color-h3-heading: #e2e8f0; /* H3 headings are light */

  /* Button Colors - Dark (matching the yellow button in screenshots) */
  --color-btn-primary-bg: #f59e0b; /* yellow-500 */
  --color-btn-primary-hover-bg: #d97706; /* yellow-600 */
  --color-btn-text: #1f2937; /* gray-900 for text on yellow button */
  --color-btn-logout-bg: #ef4444; /* red-500 */
  --color-btn-logout-hover-bg: #dc2626; /* red-600 */
  --color-btn-toggle-bg: #6b7280; /* gray-600 */
  --color-btn-toggle-hover-bg: #9ca3af; /* gray-400 */
  --color-btn-edit-text: #60a5fa; /* blue-400 */
  --color-btn-edit-hover-text: #3b82f6; /* blue-500 */
  --color-btn-delete-text: #f87171; /* red-400 */
  --color-btn-delete-hover-text: #ef4444; /* red-500 */

  /* Footer Colors - Dark */
  --color-footer-bg: #111827; /* Matches header background */
  --color-footer-text-main: #e2e8f0; /* Light text */
  --color-footer-text-secondary: #a0aec0; /* gray-400 */
  --color-footer-border: #4b5563; /* gray-700 */
}

/* Apply CSS Variables to elements */
body {
  font-family: "Inter", sans-serif;
  background-color: var(--color-bg-body);
  color: var(--color-text-body);
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}
h1,
h2,
h3 {
  font-family: "Playfair Display", sans-serif;
}

/* Overriding Tailwind classes with CSS variables for dynamic theming */
/* Header */
.bg-gray-300 {
  background-color: var(--color-header-bg) !important;
}
.text-white {
  color: var(--color-header-text) !important;
}
.text-gray-300 {
  color: var(--color-header-link) !important;
}
.hover\:text-white:hover {
  color: var(--color-header-link-hover) !important;
}

/* Headings */
.text-green-800 {
  color: var(--color-h1-heading) !important;
}
.text-gray-900 {
  color: var(--color-h2-heading) !important;
}
.text-gray-800 {
  color: var(--color-h3-heading) !important;
}

/* Cards and General Content Background/Text */
.bg-white {
  background-color: var(--color-bg-card) !important;
}
.bg-gray-700 {
  background-color: var(--color-bg-alt-card) !important;
}
.bg-gray-800 {
  background-color: var(--color-bg-sub-card) !important;
}
.text-gray-700 {
  color: var(--color-text-card-label) !important;
} /* For labels in forms */

/* Input fields */
input[type="text"],
input[type="date"],
textarea {
  background-color: var(--color-input-bg) !important;
  color: var(--color-input-text) !important;
  border-color: var(--color-input-border) !important;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}
input[type="text"]::placeholder,
textarea::placeholder {
  color: var(--color-text-card-label) !important; /* Placeholder text color */
}
input:focus,
textarea:focus {
  border-color: var(
    --color-h1-heading
  ) !important; /* Use primary green/light for focus */
  outline: none;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5) !important; /* green-500 with opacity for light, adjusted for dark */
}
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.5) !important; /* green-400 with opacity for dark */
}

/* Existing Content Overview list items */
.bg-gray-50 {
  background-color: var(--color-list-item-bg) !important;
}
.bg-gray-200 {
  background-color: var(--color-bg-body) !important;
} /* Match main body background for this section */

/* Buttons */
.bg-green-600 {
  background-color: var(--color-btn-primary-bg) !important;
}
.hover\:bg-green-700:hover {
  background-color: var(--color-btn-primary-hover-bg) !important;
}
.text-white {
  color: var(--color-btn-text) !important;
} /* Applies to button text */

.bg-red-600 {
  background-color: var(--color-btn-logout-bg) !important;
}
.hover\:bg-red-700:hover {
  background-color: var(--color-btn-logout-hover-bg) !important;
}

.bg-gray-710 {
  background-color: var(--color-btn-toggle-bg) !important;
}
.hover\:bg-gray-600:hover {
  background-color: var(--color-btn-toggle-hover-bg) !important;
}

.text-blue-600 {
  color: var(--color-btn-edit-text) !important;
}
.hover\:text-blue-800:hover {
  color: var(--color-btn-edit-hover-text) !important;
}

.text-red-600 {
  color: var(--color-btn-delete-text) !important;
}
.hover\:text-red-800:hover {
  color: var(--color-btn-delete-hover-text) !important;
}

/* Footer */
.bg-gray-900 {
  background-color: var(--color-footer-bg) !important;
}
.text-gray-500 {
  color: var(--color-footer-text-secondary) !important;
}
.border-gray-700 {
  border-color: var(--color-footer-border) !important;
}

/* Modal specific styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  background-color: var(--color-modal-bg) !important;
  color: var(--color-modal-text) !important;
  padding: 2rem;
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* shadow-lg */
  max-width: 90%;
  width: 400px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-body) !important; /* Match body background */
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(
    --color-text-card-label
  ) !important; /* Use a mid-tone color */
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-body) !important; /* Darker on hover */
}