/* app/assets/stylesheets/theme.css */

/* ============================================
   DARK THEME (Default)
   ============================================ */
:root {
  /* Background colors - avoiding pure black */
  --color-bg-primary: #0f172a; /* Main background (slate-900) */
  --color-bg-secondary: #1e293b; /* Secondary surfaces (slate-800) */
  --color-bg-tertiary: #334155; /* Cards, panels (slate-700) */
  --color-bg-hover: #475569; /* Hover states (slate-600) */
  --color-bg-active: #64748b; /* Active states (slate-500) */

  /* Text colors - maintaining high contrast */
  --color-text-primary: #f1f5f9; /* Main text (contrast 13.8:1) */
  --color-text-secondary: #cbd5e1; /* Secondary text (contrast 9.2:1) */
  --color-text-muted: #94a3b8; /* Muted text (contrast 5.1:1) */
  --color-text-disabled: #64748b; /* Disabled text */
  --color-text-inverse: #ffffff; /* Text on light backgrounds */

  /* Border colors */
  --color-border-primary: #475569; /* Default borders */
  --color-border-secondary: #334155; /* Subtle borders */
  --color-border-focus: #818cf8; /* Focus rings (lighter for dark) */
  --color-border-error: #f87171; /* Error states */

  /* Shadow colors - softer in dark mode */
  --color-shadow-sm: rgba(0, 0, 0, 0.2);
  --color-shadow-md: rgba(0, 0, 0, 0.3);
  --color-shadow-lg: rgba(0, 0, 0, 0.4);

  /* Accent colors - adjusted for dark background */
  --color-accent-primary: #818cf8; /* Lighter primary for contrast */
  --color-accent-hover: #a5b4fc; /* Hover state */
  --color-accent-active: #c7d2fe; /* Active state */
  --color-accent-light: #312e81; /* Dark accent background */

  /* Status colors - adjusted brightness */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #60a5fa;

  /* Special UI elements */
  --color-code-bg: #1e293b;
  --color-code-text: #e2e8f0;
  --color-selection-bg: #1e3a8a;
  --color-selection-text: #bfdbfe;

  /* Transitions */
  --transition-duration: 200ms;
  --transition-easing: ease-in-out;
}

/* ============================================
   LIGHT THEME
   ============================================ */
:root[data-theme="light"] {
  /* Background colors */
  --color-bg-primary: #ffffff; /* Main background */
  --color-bg-secondary: #f9fafb; /* Secondary surfaces */
  --color-bg-tertiary: #f3f4f6; /* Cards, panels */
  --color-bg-hover: #f3f4f6; /* Hover states */
  --color-bg-active: #e5e7eb; /* Active/pressed states */

  /* Text colors */
  --color-text-primary: #111827; /* Main text (contrast 16.1:1) */
  --color-text-secondary: #374151; /* Secondary text (contrast 10.3:1) */
  --color-text-muted: #6b7280; /* Muted text (contrast 4.7:1) */
  --color-text-disabled: #9ca3af; /* Disabled text */
  --color-text-inverse: #0f172a; /* Text on dark backgrounds */

  /* Border colors */
  --color-border-primary: #d1d5db; /* Default borders */
  --color-border-secondary: #e5e7eb; /* Subtle borders */
  --color-border-focus: #6366f1; /* Focus rings */
  --color-border-error: #ef4444; /* Error states */

  /* Shadow colors */
  --color-shadow-sm: rgba(0, 0, 0, 0.05);
  --color-shadow-md: rgba(0, 0, 0, 0.1);
  --color-shadow-lg: rgba(0, 0, 0, 0.15);

  /* Accent colors (brand) */
  --color-accent-primary: #6366f1; /* Primary brand color */
  --color-accent-hover: #4f46e5; /* Hover state */
  --color-accent-active: #4338ca; /* Active state */
  --color-accent-light: #e0e7ff; /* Light accent background */

  /* Status colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Special UI elements */
  --color-code-bg: #f3f4f6;
  --color-code-text: #1f2937;
  --color-selection-bg: #dbeafe;
  --color-selection-text: #1e40af;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration: 0ms;
  }
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  width: 40px;
  height: 40px;
  padding: 0;

  /* Appearance */
  background-color: var(--color-bg-secondary);
  border: 2px solid var(--color-border-primary);
  border-radius: 8px;
  color: var(--color-text-primary);
  cursor: pointer;

  /* Transitions */
  transition: all var(--transition-duration) var(--transition-easing);

  /* Remove default button styles */
  font: inherit;
  outline: none;
}

/* Hover state */
.theme-toggle-btn:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-border-focus);
  transform: scale(1.05);
}

/* Focus state (keyboard navigation) */
.theme-toggle-btn:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* Active state (clicking) */
.theme-toggle-btn:active {
  transform: scale(0.95);
  background-color: var(--color-bg-active);
}

/* Icon styling */
.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-primary);
  transition: transform var(--transition-duration) var(--transition-easing);
}

.theme-toggle-btn:hover svg {
  transform: rotate(15deg);
}

/* Disabled state (if needed) */
.theme-toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hidden utility class */
.hidden {
  display: none;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .theme-toggle-btn {
    width: 44px; /* Larger touch target */
    height: 44px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .theme-toggle-btn:focus {
    outline-width: 3px;
  }
}

/* Reduced motion for theme toggle */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-btn,
  .theme-toggle-btn svg {
    transition: none !important;
  }
}

/* ============================================
   GLOBAL DARK THEME OVERRIDES
   Override Tailwind classes with CSS variables
   ============================================

   NOTE ON !important USAGE:
   All dark theme overrides use !important to reliably override Tailwind utility classes.
   This is intentional and justified because:

   1. Tailwind utilities are designed with high specificity
   2. Overriding them without !important would require complex selector chains
   3. The theme system must work consistently across all pages
   4. !important provides clear intent: "theme always wins"

   Alternative approaches (e.g., :root[data-theme="dark"] html body .text-gray-900)
   would be more complex, harder to maintain, and more fragile.

   This is a standard pattern for CSS theme systems that need to override
   utility-first frameworks like Tailwind CSS.
   ============================================ */

/* ============================================
   TAILWIND OVERRIDES FOR DEFAULT (DARK) THEME
   Remove hardcoded light colors from views
   ============================================ */
/* Override gradients - remove them in dark theme */
:root .bg-gradient-to-br,
:root .bg-gradient-to-r,
:root .bg-gradient-to-l,
:root .bg-gradient-to-t,
:root .bg-gradient-to-b {
  background-image: none !important;
  background-color: var(--color-bg-primary) !important;
}

/* Restore gradients in light theme */
:root[data-theme="light"] .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
  background-color: transparent !important;
}

:root[data-theme="light"] .bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  background-color: transparent !important;
}

:root[data-theme="light"] .bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops)) !important;
  background-color: transparent !important;
}

:root[data-theme="light"] .bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops)) !important;
  background-color: transparent !important;
}

:root[data-theme="light"] .bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
  background-color: transparent !important;
}

/* Override light background colors in dark theme (default) */
:root .bg-white {
  background-color: var(--color-bg-secondary) !important;
}

:root .bg-gray-50,
:root .bg-gray-100 {
  background-color: var(--color-bg-secondary) !important;
}

:root .bg-gray-200 {
  background-color: var(--color-bg-tertiary) !important;
}

/* Override colored backgrounds in dark theme (default) */
:root .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.15) !important; /* indigo with opacity */
}

:root .bg-purple-50 {
  background-color: rgba(168, 85, 247, 0.15) !important; /* purple with opacity */
}

:root .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.15) !important; /* blue with opacity */
}

:root .bg-teal-50 {
  background-color: rgba(20, 184, 166, 0.15) !important; /* teal with opacity */
}

:root .bg-green-50 {
  background-color: rgba(34, 197, 94, 0.15) !important; /* green with opacity */
}

/* Override colored borders in dark theme (default) */
:root .border-indigo-100 {
  border-color: rgba(99, 102, 241, 0.3) !important;
}

:root .border-purple-100 {
  border-color: rgba(168, 85, 247, 0.3) !important;
}

:root .border-blue-100 {
  border-color: rgba(59, 130, 246, 0.3) !important;
}

:root .border-teal-100 {
  border-color: rgba(20, 184, 166, 0.3) !important;
}

:root .border-green-100 {
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* Override colored text in dark theme (default) */
:root .text-indigo-900,
:root .text-indigo-700 {
  color: #c7d2fe !important; /* light indigo */
}

:root .text-purple-900,
:root .text-purple-700 {
  color: #e9d5ff !important; /* light purple */
}

:root .text-blue-900,
:root .text-blue-700 {
  color: #dbeafe !important; /* light blue */
}

:root .text-teal-900,
:root .text-teal-700 {
  color: #ccfbf1 !important; /* light teal */
}

:root .text-green-900 {
  color: #bbf7d0 !important; /* light green */
}

/* Restore original colors in light theme */
:root[data-theme="light"] .bg-white {
  background-color: #ffffff !important;
}

:root[data-theme="light"] .bg-gray-50 {
  background-color: #f9fafb !important;
}

:root[data-theme="light"] .bg-gray-100 {
  background-color: #f3f4f6 !important;
}

:root[data-theme="light"] .bg-gray-200 {
  background-color: #e5e7eb !important;
}

/* Restore colored backgrounds in light theme */
:root[data-theme="light"] .bg-indigo-50 {
  background-color: #eef2ff !important;
}

:root[data-theme="light"] .bg-purple-50 {
  background-color: #faf5ff !important;
}

:root[data-theme="light"] .bg-blue-50 {
  background-color: #eff6ff !important;
}

:root[data-theme="light"] .bg-teal-50 {
  background-color: #f0fdfa !important;
}

:root[data-theme="light"] .bg-green-50 {
  background-color: #f0fdf4 !important;
}

/* Restore colored borders in light theme */
:root[data-theme="light"] .border-indigo-100 {
  border-color: #e0e7ff !important;
}

:root[data-theme="light"] .border-purple-100 {
  border-color: #f3e8ff !important;
}

:root[data-theme="light"] .border-blue-100 {
  border-color: #dbeafe !important;
}

:root[data-theme="light"] .border-teal-100 {
  border-color: #ccfbf1 !important;
}

:root[data-theme="light"] .border-green-100 {
  border-color: #dcfce7 !important;
}

/* Restore colored text in light theme */
:root[data-theme="light"] .text-indigo-900 {
  color: #312e81 !important;
}

:root[data-theme="light"] .text-indigo-700 {
  color: #4338ca !important;
}

:root[data-theme="light"] .text-purple-900 {
  color: #581c87 !important;
}

:root[data-theme="light"] .text-purple-700 {
  color: #7e22ce !important;
}

:root[data-theme="light"] .text-blue-900 {
  color: #1e3a8a !important;
}

:root[data-theme="light"] .text-blue-700 {
  color: #1d4ed8 !important;
}

:root[data-theme="light"] .text-teal-900 {
  color: #134e4a !important;
}

:root[data-theme="light"] .text-teal-700 {
  color: #0f766e !important;
}

:root[data-theme="light"] .text-green-900 {
  color: #14532d !important;
}

/* Override Tailwind text colors */
:root[data-theme="dark"] .text-gray-900 {
  color: var(--color-text-primary) !important;
}
:root[data-theme="dark"] .text-gray-800 {
  color: var(--color-text-primary) !important;
}
:root[data-theme="dark"] .text-gray-700 {
  color: var(--color-text-secondary) !important;
}
:root[data-theme="dark"] .text-gray-600 {
  color: var(--color-text-secondary) !important;
}
:root[data-theme="dark"] .text-gray-500 {
  color: var(--color-text-muted) !important;
}
:root[data-theme="dark"] .text-gray-400 {
  color: var(--color-text-muted) !important;
}
:root[data-theme="dark"] .text-gray-300 {
  color: var(--color-text-muted) !important;
}
:root[data-theme="dark"] .text-gray-100 {
  color: #f3f4f6 !important; /* light gray for dark theme */
}

/* Override text colors in LIGHT theme - make them darker for better contrast */
:root[data-theme="light"] .text-gray-900 {
  color: #000000 !important; /* Pure black for maximum contrast */
}

:root[data-theme="light"] .text-gray-700 {
  color: #1f2937 !important; /* gray-800 - much darker than default gray-700 */
}

:root[data-theme="light"] .text-purple-600 {
  color: #6d28d9 !important; /* purple-800 - darker than default purple-600 */
}

/* Override Tailwind background colors */
:root[data-theme="dark"] .bg-white {
  background-color: var(--color-bg-secondary) !important;
}
:root[data-theme="dark"] .bg-white\/90 {
  background-color: rgba(30, 41, 59, 0.9) !important;
}
:root[data-theme="dark"] .bg-gray-50 {
  background-color: var(--color-bg-secondary) !important;
}
:root[data-theme="dark"] .bg-gray-100 {
  background-color: var(--color-bg-tertiary) !important;
}
:root[data-theme="dark"] .bg-gray-200 {
  background-color: var(--color-bg-hover) !important;
}
:root[data-theme="dark"] .bg-gray-300 {
  background-color: #374151 !important; /* gray-700 for disabled button */
}
:root[data-theme="dark"] .bg-gray-700 {
  background-color: #374151 !important; /* darker background */
}
:root[data-theme="dark"] .bg-gray-800 {
  background-color: #1f2937 !important; /* darker background */
}

/* DaisyUI base colors - theme-aware backgrounds */
:root[data-theme="dark"] .bg-base-100 {
  background-color: var(--color-bg-primary) !important; /* #0f172a */
}
:root[data-theme="dark"] .bg-base-200 {
  background-color: var(--color-bg-secondary) !important; /* #1e293b */
}
:root[data-theme="dark"] .bg-base-300 {
  background-color: var(--color-bg-tertiary) !important; /* #334155 - lighter for better contrast */
}

:root[data-theme="light"] .bg-base-100 {
  background-color: #ffffff !important;
}
:root[data-theme="light"] .bg-base-200 {
  background-color: #f9fafb !important; /* gray-50 */
}
:root[data-theme="light"] .bg-base-300 {
  background-color: #f3f4f6 !important; /* gray-100 */
}

/* Devise Forms - Elevated Surface

   Specificity: 0-3-1 (attribute + pseudo-class + class)
   Matches: app/views/layouts/devise.html.haml `.devise-auth-card`

   Provides visual separation for authentication forms in dark theme
   by using --color-bg-secondary (#1e293b) instead of --color-bg-primary (#0f172a).

   If Devise layout changes classes, update the `.devise-auth-card` selector.
*/
:root[data-theme="dark"] .devise-auth-card {
  background-color: var(--color-bg-secondary) !important;
}

/* Override Tailwind border colors */
:root[data-theme="dark"] .border-white {
  border-color: var(--color-border-primary) !important;
}
:root[data-theme="dark"] .border-gray-300 {
  border-color: var(--color-border-primary) !important;
}
:root[data-theme="dark"] .border-gray-200 {
  border-color: var(--color-border-secondary) !important;
}

/* Override indigo colors for links/buttons */
:root[data-theme="dark"] .text-indigo-600 {
  color: var(--color-accent-primary) !important;
}
:root[data-theme="dark"] .bg-indigo-600 {
  background-color: var(--color-accent-primary) !important;
}
:root[data-theme="dark"] .hover\:bg-indigo-700:hover {
  background-color: var(--color-accent-hover) !important;
}
:root[data-theme="dark"] .hover\:text-gray-900:hover {
  color: var(--color-text-primary) !important;
}
:root[data-theme="dark"] .focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--color-accent-primary) !important;
}
:root[data-theme="dark"] .focus\:border-indigo-500:focus {
  border-color: var(--color-accent-primary) !important;
}

/* Override green colors (success states, highlights) */
:root[data-theme="dark"] .bg-green-100 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}
:root[data-theme="dark"] .bg-green-600 {
  background-color: var(--color-success) !important;
}
:root[data-theme="dark"] .bg-green-700 {
  background-color: #047857 !important; /* darker green for better contrast */
}
:root[data-theme="dark"] .bg-green-800 {
  background-color: #065f46 !important; /* very dark green */
}
:root[data-theme="dark"] .bg-green-900 {
  background-color: #064e3b !important; /* even darker green */
}
:root[data-theme="dark"] .bg-green-950 {
  background-color: #042f2e !important; /* almost black green */
}
:root[data-theme="dark"] .bg-teal-800 {
  background-color: #115e59 !important; /* dark teal */
}
:root[data-theme="dark"] .bg-teal-900 {
  background-color: #134e4a !important; /* darker teal */
}
:root[data-theme="dark"] .bg-teal-950 {
  background-color: #042f2e !important; /* almost black teal */
}
:root[data-theme="dark"] .hover\:bg-green-700:hover {
  background-color: #059669 !important;
}
:root[data-theme="dark"] .text-green-700 {
  color: var(--color-success) !important;
}
:root[data-theme="dark"] .border-green-500 {
  border-color: var(--color-success) !important;
}

/* Override form input styles */
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-primary) !important;
}

:root[data-theme="dark"] input[type="email"]:focus,
:root[data-theme="dark"] input[type="password"]:focus,
:root[data-theme="dark"] input[type="text"]:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
  background-color: var(--color-bg-tertiary) !important;
  border-color: var(--color-accent-primary) !important;
}

/* Override link colors */
:root[data-theme="dark"] a {
  color: var(--color-accent-primary) !important;
}

:root[data-theme="dark"] a:hover {
  color: var(--color-accent-hover) !important;
}

/* Remove gradient backgrounds in dark mode */
:root[data-theme="dark"] .bg-gradient-to-br,
:root[data-theme="dark"] .bg-gradient-to-r {
  background-image: none !important;
}

/* Override green backgrounds with dark gradient */
:root[data-theme="dark"] .bg-gradient-to-r.from-green-50 {
  background: linear-gradient(to right, #1e293b, #334155) !important;
}

/* Override character creation block gradient (purple to indigo) */
:root[data-theme="dark"] .bg-gradient-to-r.from-purple-500.to-indigo-600 {
  background: linear-gradient(to right, #7c3aed, #4f46e5) !important;
}

/* Override book summary block gradient (indigo to purple) */
:root[data-theme="dark"] .bg-gradient-to-r.from-indigo-600.to-purple-600 {
  background: linear-gradient(to right, #4f46e5, #7c3aed) !important;
}

/* Override publishers hero gradient - significantly darker in dark theme, lighter in light theme */
:root[data-theme="dark"] .publishers-hero.bg-gradient-to-r.from-indigo-600.to-purple-600 {
  background: linear-gradient(
    to right,
    #1f2937,
    #111827
  ) !important; /* gray-800 to gray-900 - very dark */
}

:root[data-theme="light"] .publishers-hero.bg-gradient-to-r.from-indigo-600.to-purple-600 {
  background: linear-gradient(
    to right,
    #6b7280,
    #4b5563
  ) !important; /* gray-500 to gray-600 - lighter by 2 tones */
}

/* Override colored icon backgrounds */
:root[data-theme="dark"] .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.15) !important;
}
:root[data-theme="dark"] .bg-yellow-100 {
  background-color: rgba(251, 191, 36, 0.15) !important;
}

/* Override colored text for icons */
:root[data-theme="dark"] .text-blue-600 {
  color: #60a5fa !important;
}
:root[data-theme="dark"] .text-green-600 {
  color: var(--color-success) !important;
}
:root[data-theme="dark"] .text-yellow-600 {
  color: #fbbf24 !important;
}

/* Override green borders */
:root[data-theme="dark"] .border-green-200 {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

/* ============================================
   HTML ELEMENT STYLES
   Smooth scroll for anchor navigation
   ============================================ */
html {
  scroll-behavior: smooth;
}

/* Disable smooth scroll for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   BODY ELEMENT STYLES
   Apply theme colors to body (NO TRANSITIONS to prevent flash)
   ============================================ */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Apply transitions only when theme is fully loaded */
body.theme-transitions-enabled {
  transition:
    background-color var(--transition-duration) var(--transition-easing),
    color var(--transition-duration) var(--transition-easing);
}

/* Fix hover states for language switcher and buttons */
:root[data-theme="dark"] .hover\:bg-gray-100:hover {
  background-color: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

:root[data-theme="dark"] .text-white {
  color: #ffffff !important;
}

/* ============================================
   CUSTOM SELECT STYLING
   ============================================ */
.styled-select {
  /* Ensure proper background and text colors */
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-primary) !important;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
}

.styled-select:hover {
  border-color: var(--color-border-focus);
}

.styled-select:focus {
  border-color: var(--color-border-focus) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Style for select options */
.styled-select option {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  padding: 0.5rem 1rem;
}

/* Placeholder option styling */
.styled-select option:disabled {
  color: var(--color-text-muted);
}

/* Dark theme adjustments */
:root[data-theme="dark"] .styled-select {
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-primary) !important;
}

:root[data-theme="dark"] .styled-select option {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* ============================================
   REVIEW ISSUE/WIN BLOCKS - DARK THEME
   ============================================ */
:root[data-theme="dark"] .bg-red-50 {
  background-color: #0f0f0f !important; /* almost black for dark theme */
}

:root[data-theme="dark"] .bg-blue-50 {
  background-color: #0f0f0f !important; /* almost black for dark theme */
}

:root[data-theme="dark"] .bg-purple-50 {
  background-color: #0f0f0f !important; /* almost black for dark theme */
}

:root[data-theme="dark"] .text-gray-700 {
  color: #d1d5db !important; /* gray-300 for better readability */
}

:root[data-theme="dark"] .text-red-900 {
  color: #fca5a5 !important; /* red-300 for better readability in dark theme */
}

/* ============================================
   BOOK COMPLETION - FIX TAILWIND OKLCH COLORS
   ============================================ */
/* Override broken Tailwind 4.x OKLCH colors for light theme */
.book-progress-container .bg-indigo-50 {
  background-color: #eef2ff;
}
.book-progress-container .bg-purple-50 {
  background-color: #faf5ff;
}
.book-progress-container .bg-blue-50 {
  background-color: #eff6ff;
}
.book-progress-container .bg-teal-50 {
  background-color: #f0fdfa;
}
.book-progress-container .bg-green-50 {
  background-color: #f0fdf4;
}

.book-progress-container .text-gray-900 {
  color: #111827;
}
.book-progress-container .text-indigo-900 {
  color: #312e81;
}
.book-progress-container .text-purple-900 {
  color: #581c87;
}
.book-progress-container .text-blue-900 {
  color: #1e3a8a;
}
.book-progress-container .text-teal-900 {
  color: #134e4a;
}
.book-progress-container .text-green-900 {
  color: #14532d;
}

.book-progress-container .text-indigo-700 {
  color: #4338ca;
}
.book-progress-container .text-purple-700 {
  color: #7e22ce;
}
.book-progress-container .text-blue-700 {
  color: #1d4ed8;
}
.book-progress-container .text-teal-700 {
  color: #0f766e;
}
.book-progress-container .text-green-700 {
  color: #15803d;
}

.book-progress-container .border-indigo-100 {
  border-color: #e0e7ff;
}
.book-progress-container .border-purple-100 {
  border-color: #f3e8ff;
}
.book-progress-container .border-blue-100 {
  border-color: #dbeafe;
}
.book-progress-container .border-teal-100 {
  border-color: #ccfbf1;
}
.book-progress-container .border-green-100 {
  border-color: #dcfce7;
}

/* Dark theme overrides - restore dark theme colors */
:root[data-theme="dark"] .book-progress-container .bg-indigo-50 {
  background-color: rgba(49, 46, 129, 0.3); /* dark:bg-indigo-900 dark:bg-opacity-30 */
}
:root[data-theme="dark"] .book-progress-container .bg-purple-50 {
  background-color: rgba(88, 28, 135, 0.3); /* dark:bg-purple-900 dark:bg-opacity-30 */
}
:root[data-theme="dark"] .book-progress-container .bg-blue-50 {
  background-color: rgba(30, 58, 138, 0.3); /* dark:bg-blue-900 dark:bg-opacity-30 */
}
:root[data-theme="dark"] .book-progress-container .bg-teal-50 {
  background-color: rgba(19, 78, 74, 0.3); /* dark:bg-teal-900 dark:bg-opacity-30 */
}
:root[data-theme="dark"] .book-progress-container .bg-green-50 {
  background-color: rgba(20, 83, 45, 0.3); /* dark:bg-green-900 dark:bg-opacity-30 */
}

:root[data-theme="dark"] .book-progress-container .text-gray-900,
:root[data-theme="dark"] .book-progress-container .text-indigo-900,
:root[data-theme="dark"] .book-progress-container .text-purple-900,
:root[data-theme="dark"] .book-progress-container .text-blue-900,
:root[data-theme="dark"] .book-progress-container .text-teal-900,
:root[data-theme="dark"] .book-progress-container .text-green-900 {
  color: #e5e7eb; /* gray-200 */
}

:root[data-theme="dark"] .book-progress-container .text-indigo-700,
:root[data-theme="dark"] .book-progress-container .text-purple-700,
:root[data-theme="dark"] .book-progress-container .text-blue-700,
:root[data-theme="dark"] .book-progress-container .text-teal-700,
:root[data-theme="dark"] .book-progress-container .text-green-700 {
  color: #9ca3af; /* gray-400 */
}

:root[data-theme="dark"] .book-progress-container .border-indigo-100 {
  border-color: rgba(67, 56, 202, 0.7); /* dark:border-indigo-700 */
}
:root[data-theme="dark"] .book-progress-container .border-purple-100 {
  border-color: rgba(126, 34, 206, 0.7); /* dark:border-purple-700 */
}
:root[data-theme="dark"] .book-progress-container .border-blue-100 {
  border-color: rgba(29, 78, 216, 0.7); /* dark:border-blue-700 */
}
:root[data-theme="dark"] .book-progress-container .border-teal-100 {
  border-color: rgba(15, 118, 110, 0.7); /* dark:border-teal-700 */
}
:root[data-theme="dark"] .book-progress-container .border-green-100 {
  border-color: rgba(21, 128, 61, 0.7); /* dark:border-green-700 */
}

/* ============================================
   REVIEW SUMMARY CARDS - ENSURE VISIBILITY
   ============================================ */
.review-summary-card {
  background-color: white !important;
}

:root[data-theme="dark"] .review-summary-card {
  background-color: #1f2937 !important; /* gray-800 */
}

/* Review summary main block - light background in light theme, almost black in dark theme */
.review-summary-block {
  background-color: #f3e8ff !important; /* purple-100 - very light purple for light theme */
}

:root[data-theme="dark"] .review-summary-block {
  background-color: #1a1a2e !important; /* Almost black for dark theme */
}

/* Review summary block - text colors for light theme (dark text on light background) */
.review-summary-block h3 {
  color: #111827 !important; /* gray-900 for light theme */
}

.review-summary-block p {
  color: #111827 !important; /* gray-900 for light theme */
}

.review-summary-block span {
  color: #374151 !important; /* gray-700 for light theme */
}

/* Keep dark theme text colors unchanged */
:root[data-theme="dark"] .review-summary-block h3 {
  color: white !important;
}

:root[data-theme="dark"] .review-summary-block p {
  color: #e5e7eb !important; /* gray-200 */
}

:root[data-theme="dark"] .review-summary-block span {
  color: #d1d5db !important; /* gray-300 */
}

/* ============================================
   BUTTON CURSOR FIX - ALL BUTTONS
   ============================================ */
/* Ensure all buttons have pointer cursor when not disabled */
button:not(:disabled),
button:not([disabled]),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
a[role="button"]:not(:disabled) {
  cursor: pointer !important;
}

/* Ensure disabled buttons have not-allowed cursor */
button:disabled,
button[disabled],
input[type="submit"]:disabled,
input[type="button"]:disabled,
a[role="button"][disabled] {
  cursor: not-allowed !important;
}