/* Light/Dark Mode Styles */
:root {
  --background-color: #f9fafb;
  --text-color: #1f2937;
  --header-bg: #ffffff;
  --header-text: #4f46e5;
  --nav-text: #6b7280;
  --font-sans: 'Geist Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --nav-hover: #374151;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --footer-bg: #ffffff;
  --footer-text: #6b7280;
  --card-bg: #ffffff;
  --border-color: rgba(229, 231, 235, 0.8);
  --prose-headings: #111827;
  --prose-body: #374151;
  --input-bg: #ffffff;
  --input-border: rgba(209, 213, 219, 0.8);
  --hover-bg: rgba(243, 244, 246, 0.7);
  --logo-height: 3rem;
  --logo-max-width: 200px;
}

[data-theme="dark"] {
  --background-color: #000000;
  --text-color: #f9fafb;
  --header-bg: #111111;
  --header-text: #818cf8;
  --nav-text: #9ca3af;
  --font-sans: 'Geist Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --nav-hover: #d1d5db;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --footer-bg: #111111;
  --footer-text: #9ca3af;
  --card-bg: #111111;
  --border-color: rgba(75, 85, 99, 0.6);
  --prose-headings: #f9fafb;
  --prose-body: #d1d5db;
  --input-bg: #111111;
  --input-border: rgba(107, 114, 128, 0.4);
  --hover-bg: rgba(55, 65, 81, 0.5);
  --sidebar-bg: #111111;
  --sidebar-border: rgba(75, 85, 99, 0.6);
  --sidebar-text: #d1d5db;
  --sidebar-hover: rgba(55, 65, 81, 0.5);
  --logo-height: 3rem;
  --logo-max-width: 200px;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-sans);
  transition: background-color 0.3s ease, color 0.3s ease;
}

header {
  background-color: var(--header-bg) !important;
  box-shadow: 0 1px 3px var(--shadow-color) !important;
  border-bottom: 1px solid var(--border-color);
}

header .text-indigo-600 {
  color: var(--header-text);
}

header nav a {
  color: var(--nav-text);
}

header nav a:hover {
  color: var(--nav-hover);
}

footer {
  background-color: var(--footer-bg) !important;
  border-top: 1px solid var(--border-color);
}

footer p {
  color: var(--footer-text);
}

/* Prose content styling */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: var(--prose-headings) !important;
}

.prose p, .prose ul, .prose ol, .prose li {
  color: var(--prose-body) !important;
}

.prose a {
  color: var(--accent-color) !important;
  text-decoration: none;
}

.prose a:hover {
  text-decoration: underline;
}

.prose code, .prose pre {
  background-color: var(--input-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--prose-body) !important;
}

/* Additional specific styling for code blocks to ensure contrast */
[data-theme="light"] .prose code, [data-theme="light"] .prose pre {
  color: #1f2937 !important; /* Dark text for light mode */
  background-color: #f3f4f6 !important; /* Light gray background for better contrast */
}

[data-theme="dark"] .prose code, [data-theme="dark"] .prose pre {
  color: #e5e7eb !important; /* Light text for dark mode */
  background-color: #1f2937 !important; /* Darker background for better contrast */
}

.prose strong {
  color: var(--prose-headings) !important;
}

.prose ul > li::marker,
.prose ol > li::marker {
  color: var(--prose-body) !important;
}

.prose blockquote {
  border-color: var(--border-color) !important;
  color: var(--prose-body) !important;
}

.prose hr {
  border-color: var(--border-color) !important;
}

/* Input and card styling */
input, select {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
}

textarea {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--input-border) !important;
}

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

.shadow, div[class*="shadow"] {
  box-shadow: 0 1px 3px var(--shadow-color) !important;
}

div:not([class*="bg-"]), li:not([class*="bg-"]) {
  background-color: var(--card-bg) !important;
}

.hover\:bg-opacity-5:hover {
  background-color: var(--hover-bg) !important;
}

.border-opacity-10, .border-opacity-20 {
  border-color: var(--border-color) !important;
}

.divide-opacity-20 > * + * {
  border-color: var(--border-color) !important;
}

/* Theme Toggle Button Styles */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.theme-toggle:hover {
  background-color: rgba(107, 114, 128, 0.1);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--nav-text);
  transition: stroke 0.3s ease;
}

.theme-toggle:hover svg {
  stroke: var(--nav-hover);
}

/* Add these new rules */
nav.w-64 {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

nav.w-64 a {
  color: var(--prose-body) !important;
}

nav.w-64 a:hover {
  background-color: var(--hover-bg) !important;
  color: var(--prose-headings) !important;
}

nav.w-64 a.active {
  background-color: var(--hover-bg);
  color: var(--header-text) !important;
}

/* Glass effect styles */
.backdrop-filter {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.backdrop-blur-md {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* For browsers that don't support backdrop-filter */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .backdrop-filter, .backdrop-blur-md {
    background-color: var(--card-bg) !important;
    opacity: 0.95 !important;
  }
  
  .backdrop-blur-sm {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }
}

/* Add logo styling */
header img.logo {
    height: var(--logo-height);
    width: auto;
    max-width: var(--logo-max-width);
    object-fit: contain;
    transition: all 0.3s ease;
}

/* For admin dashboard preview */
.admin-logo-preview {
    max-height: 5rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.sidebar-active {
    background-color: rgba(var(--accent-color-rgb), 0.2) !important; /* 20% opacity */
}