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

/* ============================================
   MOBILE FONT SIZE OPTIMIZATION
   ============================================ */
html {
  font-size: 14px;
}

@media (min-width: 640px) {
  html {
    font-size: 16px;
  }
}

/* ============================================
   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-active) !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 */
}

/* ============================================
   CONTENT MODERATION BLOCKS - DARK THEME
   ============================================ */
/* Legal compliance and plagiarism check boxes */
:root[data-theme="dark"] .border-green-200.bg-green-50 {
  background-color: #064e3b !important; /* dark green background */
  border-color: #10b981 !important; /* green-500 border */
}

:root[data-theme="dark"] .border-green-200.bg-green-50 h3,
:root[data-theme="dark"] .border-green-200.bg-green-50 .text-green-900 {
  color: #a7f3d0 !important; /* light green text */
}

:root[data-theme="dark"] .border-green-200.bg-green-50 .text-green-700 {
  color: #6ee7b7 !important; /* green-300 */
}

:root[data-theme="dark"] .border-red-200.bg-red-50 {
  background-color: #450a0a !important; /* dark red background */
  border-color: #f87171 !important; /* red-400 border */
}

:root[data-theme="dark"] .border-red-200.bg-red-50 h3,
:root[data-theme="dark"] .border-red-200.bg-red-50 .text-red-900 {
  color: #fecaca !important; /* light red text */
}

:root[data-theme="dark"] .border-red-200.bg-red-50 .text-red-700 {
  color: #fca5a5 !important; /* red-300 */
}

:root[data-theme="dark"] .border-orange-200.bg-orange-50 {
  background-color: #431407 !important; /* dark orange background */
  border-color: #fb923c !important; /* orange-400 border */
}

:root[data-theme="dark"] .border-orange-200.bg-orange-50 h3,
:root[data-theme="dark"] .border-orange-200.bg-orange-50 .text-orange-900 {
  color: #fed7aa !important; /* light orange text */
}

:root[data-theme="dark"] .border-orange-200.bg-orange-50 .text-orange-700 {
  color: #fdba74 !important; /* orange-300 */
}

/* Moderation issue items inside boxes */
:root[data-theme="dark"] .moderation-issue.bg-yellow-100.text-yellow-800 {
  background-color: #422006 !important; /* dark amber background */
  color: #fef3c7 !important; /* amber-100 text */
}

:root[data-theme="dark"] .moderation-issue.bg-orange-100.text-orange-800 {
  background-color: #431407 !important; /* dark orange background */
  color: #fed7aa !important; /* orange-200 text */
}

:root[data-theme="dark"] .moderation-issue.bg-red-100.text-red-800 {
  background-color: #450a0a !important; /* dark red background */
  color: #fecaca !important; /* red-200 text */
}

/* Age rating badge */
:root[data-theme="dark"] .bg-gray-200.text-gray-800 {
  background-color: #374151 !important; /* gray-700 */
  color: #e5e7eb !important; /* gray-200 */
}

/* Originality score badges */
:root[data-theme="dark"] .bg-green-200.text-green-800 {
  background-color: #065f46 !important; /* dark green */
  color: #a7f3d0 !important; /* light green */
}

:root[data-theme="dark"] .bg-yellow-200.text-yellow-800 {
  background-color: #78350f !important; /* dark amber */
  color: #fef3c7 !important; /* light amber */
}

:root[data-theme="dark"] .bg-red-200.text-red-800 {
  background-color: #7f1d1d !important; /* dark red */
  color: #fecaca !important; /* light red */
}

/* ============================================
   VERDICT BADGE - DARK THEME
   ============================================ */
:root[data-theme="dark"] .bg-blue-100.text-blue-800 {
  background-color: #1e3a8a !important; /* blue-900 */
  color: #bfdbfe !important; /* blue-200 */
  border-color: #3b82f6 !important; /* blue-500 */
}

:root[data-theme="dark"] .bg-green-100.text-green-800 {
  background-color: #064e3b !important; /* dark green */
  color: #a7f3d0 !important; /* light green */
  border-color: #10b981 !important; /* green-500 */
}

:root[data-theme="dark"] .bg-yellow-100.text-yellow-800 {
  background-color: #78350f !important; /* dark amber */
  color: #fef3c7 !important; /* light amber */
  border-color: #f59e0b !important; /* amber-500 */
}

:root[data-theme="dark"] .bg-red-50.text-red-900 {
  background-color: #450a0a !important; /* dark red */
  color: #fecaca !important; /* light red */
  border-color: #ef4444 !important; /* red-500 */
}

/* ============================================
   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 - dark background by default (dark theme), light background in light theme */
.review-summary-block {
  background-color: #1a1a2e !important; /* Almost black for default/dark theme */
}

:root[data-theme="light"] .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 */
}

/* Default theme (dark) - text colors for dark background */
.review-summary-block h3 {
  color: white !important;
}

.review-summary-block p {
  color: #e5e7eb !important; /* gray-200 */
}

.review-summary-block span {
  color: #d1d5db !important; /* gray-300 */
}

/* Light theme - text colors for light background (dark text on light background) */
:root[data-theme="light"] .review-summary-block h3 {
  color: #111827 !important; /* gray-900 for light theme */
}

:root[data-theme="light"] .review-summary-block p {
  color: #111827 !important; /* gray-900 for light theme */
}

:root[data-theme="light"] .review-summary-block span {
  color: #374151 !important; /* gray-700 for light theme */
}

/* Dark theme - text colors for dark background (same as default) */
: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 */
}

/* Review summary cards - fix text contrast */
/* Light theme - light cards with dark text */
:root[data-theme="light"] .review-summary-card,
:root[data-theme="light"] .review-summary-block .review-summary-card {
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%) !important;
}

:root[data-theme="light"] .review-summary-card *,
:root[data-theme="light"] .review-summary-block .review-summary-card * {
  color: #111827 !important; /* gray-900 - dark text */
}

/* Dark theme - dark cards with light text */
:root[data-theme="dark"] .review-summary-card,
:root[data-theme="dark"] .review-summary-block .review-summary-card,
.review-summary-card,
.review-summary-block .review-summary-card {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important; /* gray-700 to gray-800 */
}

:root[data-theme="dark"] .review-summary-card *,
:root[data-theme="dark"] .review-summary-block .review-summary-card *,
.review-summary-card *,
.review-summary-block .review-summary-card * {
  color: #f9fafb !important; /* gray-50 - light text on dark card */
}

/* Purple accent colors for scores */
.review-summary-card .text-purple-600,
.review-summary-card .text-purple-400,
:root[data-theme="dark"] .review-summary-card .text-purple-600,
:root[data-theme="dark"] .review-summary-card .text-purple-400 {
  color: #a78bfa !important; /* purple-400 for good contrast on both themes */
}

/* ============================================
   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;
}

/* ============================================
   FOOTER LINKS - RESPONSIVE LAYOUT
   ============================================ */
/* Footer links with separators - desktop only */
@media (min-width: 1024px) {
  .footer-links a:not(:last-child)::after {
    content: "|";
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    color: var(--color-text-muted);
  }
}

/* Footer links grid for mobile and tablet */
@media (max-width: 1023px) {
  .footer-links {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
    text-align: center;
  }
}

/* Very small screens - single column */
@media (max-width: 479px) {
  .footer-links {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   NAVIGATION - RESPONSIVE LAYOUT
   ============================================ */
/* Desktop menu - hidden by default, shown on large screens */
.desktop-menu {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-menu {
    display: flex !important;
  }
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu-overlay.active {
  transform: translateX(0);
}

/* Tablet-specific adjustments for navigation (1024px-1280px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .desktop-menu {
    gap: 0.75rem !important;
  }
  .desktop-menu a {
    font-size: 0.875rem;
    white-space: nowrap;
  }
}
/* app/assets/stylesheets/button_theme.css */

/* Orange button theme variations */
.btn-orange-theme {
  background-color: rgb(249 115 22); /* orange-500 */
}

.btn-orange-theme:hover {
  background-color: rgb(234 88 12); /* orange-600 */
}

/* Dark theme overrides */
html[data-theme="dark"] .btn-orange-theme {
  background-color: rgb(124 45 18); /* orange-900 - very muted orange */
}

html[data-theme="dark"] .btn-orange-theme:hover {
  background-color: rgb(67 20 7); /* orange-950 - almost brown */
}
/* app/assets/stylesheets/cookie_consent.css */
.cookie-consent-banner {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background-color: #f9fafb;
  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.2);
  border-top: 2px solid #d1d5db;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  display: none;
}

.cookie-consent-banner p,
.cookie-consent-banner span,
.cookie-consent-banner div:not(:has(button)) {
  color: #111827 !important;
}

.cookie-consent-banner button.bg-blue-600,
.cookie-consent-banner button.dark\:bg-blue-500 {
  color: #ffffff !important;
}

.cookie-consent-banner button.bg-white {
  color: #111827 !important;
}

/* Dark theme styles */
[data-theme="dark"] .cookie-consent-banner,
.dark .cookie-consent-banner,
html.dark .cookie-consent-banner {
  background-color: #1f2937;
  border-top-color: #374151;
  box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .cookie-consent-banner p,
[data-theme="dark"] .cookie-consent-banner span,
[data-theme="dark"] .cookie-consent-banner div:not(:has(button)),
.dark .cookie-consent-banner p,
.dark .cookie-consent-banner span,
.dark .cookie-consent-banner div:not(:has(button)),
html.dark .cookie-consent-banner p,
html.dark .cookie-consent-banner span,
html.dark .cookie-consent-banner div:not(:has(button)) {
  color: #f3f4f6 !important;
}

[data-theme="dark"] .cookie-consent-banner button.bg-white,
.dark .cookie-consent-banner button.bg-white,
html.dark .cookie-consent-banner button.bg-white {
  color: #111827 !important;
}

[data-theme="dark"] .cookie-consent-banner button.dark\:bg-gray-800,
.dark .cookie-consent-banner button.dark\:bg-gray-800,
html.dark .cookie-consent-banner button.dark\:bg-gray-800 {
  color: #f3f4f6 !important;
}

.cookie-consent-banner.show {
  transform: translateY(0);
  display: block !important;
}
/* app/assets/stylesheets/book_wizard.css */

.wizard-step {
  display: none;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.wizard-step.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

/* Safari-friendly select styling */
#wizard-form select,
.wizard-step select,
select[data-step] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  padding: 1rem 2rem !important;
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--color-border-primary) !important;
  border-radius: 1.5rem !important;
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 3rem !important;
  box-shadow: 0 1px 2px 0 var(--color-shadow-sm) !important;
  transition: all var(--transition-duration) var(--transition-easing) !important;
  cursor: pointer !important;
}

#wizard-form select:hover,
.wizard-step select:hover,
select[data-step]:hover {
  box-shadow: 0 4px 6px -1px var(--color-shadow-md), 0 2px 4px -2px var(--color-shadow-sm) !important;
  border-color: var(--color-text-disabled) !important;
}

#wizard-form select:focus,
.wizard-step select:focus,
select[data-step]:focus {
  outline: none !important;
  border-color: var(--color-border-focus) !important;
  box-shadow: 0 0 0 3px var(--color-accent-light) !important;
}
/* app/assets/stylesheets/book_characters.css */

/* ============================================
   BOOK CHARACTER CONSTRUCTOR FORM STYLES
   ============================================ */

/* Select boxes styling for character constructor */
.book-character-form select,
form[action*="/book_characters"] select {
  /* Remove default browser styling */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  /* Explicit colors for light theme */
  background-color: #ffffff !important;
  color: #1f2937 !important;

  /* Add custom dropdown arrow using SVG */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 3rem !important; /* Space for arrow */

  /* Ensure cursor pointer for better UX */
  cursor: pointer !important;

  /* Smooth transitions */
  transition: all var(--transition-duration, 200ms) var(--transition-easing, ease-in-out) !important;
}

/* Option elements - ensure visibility */
.book-character-form select option,
form[action*="/book_characters"] select option {
  background-color: #ffffff;
  color: #1f2937;
  padding: 0.5rem;
}

/* Hover state for select boxes */
.book-character-form select:hover,
form[action*="/book_characters"] select:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.06) !important;
  border-color: #9ca3af !important;
}

/* Focus state for select boxes */
.book-character-form select:focus,
form[action*="/book_characters"] select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3) !important;
}

/* Dark theme overrides for character form selects */
:root[data-theme="dark"] .book-character-form select,
:root[data-theme="dark"] form[action*="/book_characters"] select {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-primary) !important;

  /* Update arrow color for dark theme */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

:root[data-theme="dark"] .book-character-form select:focus,
:root[data-theme="dark"] form[action*="/book_characters"] select:focus {
  background-color: var(--color-bg-tertiary) !important;
  border-color: var(--color-accent-primary) !important;
}

/* Datalist input styling (for name autocomplete) */
.book-character-form input[list],
form[action*="/book_characters"] input[list] {
  position: relative;
}

/* Optional: Add subtle indicator for datalist fields */
.book-character-form input[list]::after,
form[action*="/book_characters"] input[list]::after {
  content: "";
  /* No visual indicator needed - HTML5 datalist provides native UI */
}

/* Ensure datalist dropdown works properly */
datalist {
  display: none; /* Hidden by default, shown by browser when input is focused */
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .book-character-form select,
  form[action*="/book_characters"] select {
    /* Larger touch targets on mobile */
    min-height: 44px;
    font-size: 16px; /* Prevent iOS zoom on focus */
  }

  .book-character-form input[list],
  form[action*="/book_characters"] input[list] {
    font-size: 16px; /* Prevent iOS zoom on focus */
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .book-character-form select,
  .book-character-form input,
  form[action*="/book_characters"] select,
  form[action*="/book_characters"] input {
    transition: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .book-character-form select,
  form[action*="/book_characters"] select {
    border-width: 3px !important;
  }

  .book-character-form select:focus,
  form[action*="/book_characters"] select:focus {
    outline-width: 3px !important;
  }
}

/* Disabled state styling */
.book-character-form select:disabled,
form[action*="/book_characters"] select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f3f4f6;
}

:root[data-theme="dark"] .book-character-form select:disabled,
:root[data-theme="dark"] form[action*="/book_characters"] select:disabled {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-disabled);
}

/* ============================================
   WIZARD STEPS FUNCTIONALITY
   ============================================ */

/* Hide all wizard steps by default */
.wizard-step {
  display: none;
}

/* Show only active step */
.wizard-step.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

/* Fade in animation for step transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Disable animation for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wizard-step.active {
    animation: none;
  }
}
/* app/assets/stylesheets/autosave.css
 * Frontend styling for autosave functionality
 * Created: 2025-11-10
 */

/* ============================================
   LOADING ANIMATION
   Pulsing dots during save operation
   ============================================ */
@keyframes autosave-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.autosave-dots {
  display: inline-block;
  animation: autosave-pulse 1.5s infinite ease-in-out;
}

/* ============================================
   BUTTON STATE TRANSITIONS
   Smooth color changes (200ms)
   ============================================ */
button[type="submit"] {
  transition: background-color 200ms ease-in-out,
              border-color 200ms ease-in-out,
              color 200ms ease-in-out,
              opacity 200ms ease-in-out,
              transform 200ms ease-in-out;
}

/* Prevent layout shift during state changes */
button[type="submit"] {
  min-width: fit-content;
}

/* ============================================
   ERROR MESSAGE STYLING
   Inline validation errors
   ============================================ */
.autosave-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-error, #ef4444);
  font-weight: 500;
}

/* Dark theme support */
:root[data-theme="dark"] .autosave-error {
  color: var(--color-error, #f87171);
}

/* ============================================
   SCREEN READER ONLY UTILITY
   Visually hidden but accessible
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   INPUT ERROR STATE
   Red border for invalid fields
   ============================================ */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--color-error, #ef4444) !important;
  border-width: 2px;
}

/* Dark theme error border */
:root[data-theme="dark"] input[aria-invalid="true"],
:root[data-theme="dark"] textarea[aria-invalid="true"],
:root[data-theme="dark"] select[aria-invalid="true"] {
  border-color: var(--color-error, #f87171) !important;
}

/* Focus ring on invalid fields */
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
  outline: 2px solid var(--color-error, #ef4444);
  outline-offset: 2px;
}

/* ============================================
   REDUCED MOTION SUPPORT
   Respect user preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .autosave-dots {
    animation: none;
    opacity: 1;
  }

  button[type="submit"] {
    transition: none;
  }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   Enhanced visibility for accessibility
   ============================================ */
@media (prefers-contrast: high) {
  .autosave-error {
    font-weight: 700;
    text-decoration: underline;
  }

  input[aria-invalid="true"],
  textarea[aria-invalid="true"],
  select[aria-invalid="true"] {
    border-width: 3px !important;
  }
}

/* ============================================
   MOBILE OPTIMIZATIONS
   Touch-friendly targets
   ============================================ */
@media (max-width: 640px) {
  button[type="submit"] {
    min-height: 44px; /* WCAG 2.1 AA minimum touch target */
    padding: 12px 16px;
  }

  .autosave-error {
    font-size: 0.8125rem; /* 13px - slightly smaller on mobile */
  }
}
/* app/assets/stylesheets/how_to_earn.css */

/* CTA Block styling for light theme only - dark theme uses default */
html[data-theme="light"] .cta-block-earn {
  background: linear-gradient(135deg, #312e81 0%, #581c87 50%, #1e3a8a 100%) !important;
}

html[data-theme="light"] .cta-block-earn h2,
html[data-theme="light"] .cta-block-earn p,
html[data-theme="light"] .cta-block-earn a:last-child {
  color: white !important;
}

html[data-theme="light"] .cta-block-earn a:last-child {
  border-color: white !important;
}

html[data-theme="light"] .cta-block-earn a:last-child:hover {
  background: white !important;
  color: #312e81 !important;
}
/* app/assets/stylesheets/printing_partner.css */

/* CTA Block styling for light theme only - dark theme uses default */
html[data-theme="light"] .cta-block-printing {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #d97706 100%) !important;
}

html[data-theme="light"] .cta-block-printing .absolute {
  display: none !important;
}

html[data-theme="light"] .cta-block-printing h2,
html[data-theme="light"] .cta-block-printing p {
  color: white !important;
}
/* app/assets/stylesheets/errors.css */

/* Giant error code sizes for error pages */
.text-\[120px\] {
  font-size: 120px;
}

.md\:text-\[180px\] {
  font-size: 180px;
}

.lg\:text-\[220px\] {
  font-size: 220px;
}

/* Responsive breakpoints */
@media (min-width: 768px) {
  .md\:text-\[180px\] {
    font-size: 180px;
  }
}

@media (min-width: 1024px) {
  .lg\:text-\[220px\] {
    font-size: 220px;
  }
}
/* app/assets/stylesheets/profile.css */
.tab-button {
  padding: 0.875rem 1.25rem;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  white-space: nowrap;
  cursor: pointer;
}

.tab-button:hover {
  color: #4f46e5;
  background-color: #f9fafb;
}

.tab-button.active {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
  background-color: #fafafa;
}

@media (max-width: 768px) {
  .tab-button {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  .tab-button svg {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
  }
}
/* app/assets/stylesheets/carousel.css */

/* Scroll-snap utilities for carousel */
.snap-x {
  scroll-snap-type: x mandatory;
}

.snap-mandatory {
  scroll-snap-type: x mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

/* Hide scrollbar while maintaining scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Smooth scrolling behavior */
.snap-x,
.snap-mandatory {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Ensure cursor pointer for navigation buttons */
[data-carousel-prev],
[data-carousel-next],
[data-carousel-indicator] {
  cursor: pointer;
}
/* app/assets/stylesheets/public_preview.css */

/**
 * Public Book Preview Styles
 *
 * CRITICAL: All interactive elements MUST have cursor: pointer
 * This includes:
 * - Chapter items in table of contents
 * - "Read more" links
 * - Review section links
 * - Call-to-action buttons
 * - Navigation links
 */

/* Table of Contents - Chapter Items */
.border-l-4.cursor-pointer {
  cursor: pointer;
}

.border-l-4.cursor-pointer:hover {
  transform: translateX(4px);
  transition: all 0.2s ease-in-out;
}

/* Review Summary Card - Enhanced styling */
.review-summary-card {
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.dark .review-summary-card {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.review-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Enhanced interactive elements - ensure cursor: pointer */
a[href].cursor-pointer,
button.cursor-pointer,
.cursor-pointer {
  cursor: pointer !important;
}

/* Chapter excerpts - prose styling */
.prose {
  line-height: 1.75;
}

.prose p {
  margin-bottom: 1em;
}

.dark .prose {
  color: #e5e7eb;
}

/* Gradient backgrounds for sections */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* Hero section animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.max-w-5xl > .bg-white:first-child {
  animation: fadeInUp 0.6s ease-out;
}

/* Table of contents items - interactive feedback */
nav[aria-label] .cursor-pointer {
  position: relative;
  overflow: hidden;
}

nav[aria-label] .cursor-pointer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(79, 70, 229, 0.05);
  transition: left 0.3s ease;
}

nav[aria-label] .cursor-pointer:hover::before {
  left: 0;
}

.dark nav[aria-label] .cursor-pointer::before {
  background: rgba(129, 140, 248, 0.1);
}

/* Chapter preview articles - enhanced spacing */
article[aria-labelledby] {
  scroll-margin-top: 2rem;
}

/* Review badge animation */
.inline-flex.items-center.gap-2.px-4.py-2 {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* Call to action button - enhanced hover effect */
.transform.hover\:scale-105 {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transform.hover\:scale-105:hover {
  cursor: pointer;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Responsive typography adjustments */
@media (max-width: 640px) {
  h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.4;
  }
}

/* Dark mode specific enhancements */
.dark {
  /* Ensure good contrast in dark mode */
  --tw-prose-body: #e5e7eb;
  --tw-prose-headings: #f9fafb;
  --tw-prose-links: #a78bfa;
  --tw-prose-bold: #f3f4f6;
  --tw-prose-quotes: #d1d5db;
}

/* Focus states for accessibility */
a:focus,
button:focus {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.dark a:focus,
.dark button:focus {
  outline-color: #818cf8;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Print styles */
@media print {
  .bg-gradient-to-br,
  .bg-gradient-to-r {
    background: white !important;
    color: black !important;
  }

  .shadow-xl,
  .shadow-2xl {
    box-shadow: none !important;
  }

  nav[aria-label] .cursor-pointer:hover::before {
    display: none;
  }
}
/* app/assets/stylesheets/card_activation.css */

/* ============================================
   CARD ACTIVATION PAGE STYLES
   ============================================ */

/* Container Styles */
.card-activation-page-container {
  min-height: 100vh;
  transition: background-color 200ms ease-in-out;
}

/* Form Container */
.card-activation-form {
  position: relative;
}

/* Payment Widget Wrapper */
.payment-widget-wrapper {
  transition: all 200ms ease-in-out;
  position: relative;
  min-height: 200px;
}

.payment-widget-wrapper:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* Payment Widget Placeholder */
.payment-widget-wrapper svg {
  transition: color 200ms ease-in-out;
}

/* Token Input Field */
.payment-widget-wrapper input[type="text"] {
  transition: all 200ms ease-in-out;
}

.payment-widget-wrapper input[type="text"]:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.payment-widget-wrapper input[type="text"][aria-invalid="true"] {
  border-color: var(--color-border-error);
}

.payment-widget-wrapper input[type="text"][aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Terms Checkbox */
.card-activation-form input[type="checkbox"] {
  cursor: pointer;
  transition: all 150ms ease-in-out;
}

.card-activation-form input[type="checkbox"]:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.card-activation-form input[type="checkbox"][aria-invalid="true"] {
  outline: 2px solid var(--color-border-error);
  outline-offset: 2px;
}

/* Terms Label */
.card-activation-form label.cursor-pointer {
  cursor: pointer;
  transition: color 150ms ease-in-out;
}

.card-activation-form label.cursor-pointer:hover {
  color: var(--color-text-primary);
}

/* Security Badges */
.card-activation-form .flex.flex-wrap .flex.items-center {
  transition: transform 150ms ease-in-out;
}

.card-activation-form .flex.flex-wrap .flex.items-center:hover {
  transform: translateY(-1px);
}

/* Submit Button */
.card-activation-form button[type="submit"],
.card-activation-form input[type="submit"] {
  cursor: pointer;
  transition: all 200ms ease-in-out;
  position: relative;
}

.card-activation-form button[type="submit"]:hover:not(:disabled),
.card-activation-form input[type="submit"]:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
}

.card-activation-form button[type="submit"]:active:not(:disabled),
.card-activation-form input[type="submit"]:active:not(:disabled) {
  transform: translateY(0);
}

.card-activation-form button[type="submit"]:disabled,
.card-activation-form input[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Cancel Button/Link */
.card-activation-form a.cursor-pointer {
  cursor: pointer;
  transition: all 200ms ease-in-out;
}

.card-activation-form a.cursor-pointer:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-border-primary);
}

/* Sidebar Cards */
.card-activation-page-container .rounded-xl {
  transition: all 200ms ease-in-out;
}

.card-activation-page-container .rounded-xl:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
}

/* Step Numbers */
.card-activation-page-container .w-8.h-8.rounded-full {
  transition: all 200ms ease-in-out;
}

/* Amount Display */
.card-activation-page-container .text-xl.font-bold {
  transition: color 200ms ease-in-out;
}

/* Links in Sidebar */
.card-activation-page-container a.block.w-full {
  cursor: pointer;
  transition: all 200ms ease-in-out;
}

.card-activation-page-container a.block.w-full:hover {
  background-color: var(--color-accent-primary);
  color: white !important;
}

/* Trust Indicators List */
.card-activation-page-container ul.space-y-3 li {
  transition: transform 150ms ease-in-out;
}

.card-activation-page-container ul.space-y-3 li:hover {
  transform: translateX(4px);
}

/* Error Alert Styles */
.card-activation-form div[role="alert"] {
  animation: slideInDown 300ms ease-out;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading Spinner Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Focus Visible Styles (Keyboard Navigation) */
.card-activation-form *:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Screen Reader Only Class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .card-activation-page-container .text-3xl {
    font-size: 1.875rem;
  }

  .card-activation-page-container .text-4xl {
    font-size: 2.25rem;
  }

  .payment-widget-wrapper {
    min-height: 250px;
  }

  .card-activation-form .flex.flex-col.sm\\:flex-row {
    flex-direction: column;
  }

  .card-activation-form .flex.flex-col.sm\\:flex-row > * {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .card-activation-page-container .grid.grid-cols-1.lg\\:grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .card-activation-page-container .lg\\:col-span-2,
  .card-activation-page-container .lg\\:col-span-1 {
    grid-column: span 1;
  }
}

/* Dark Theme Specific Adjustments */
html[data-theme="dark"] .payment-widget-wrapper {
  border-color: var(--color-border-primary);
}

html[data-theme="dark"] .payment-widget-wrapper:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
}

html[data-theme="dark"] .card-activation-form button[type="submit"]:hover:not(:disabled),
html[data-theme="dark"] .card-activation-form input[type="submit"]:hover:not(:disabled) {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .card-activation-page-container .rounded-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Light Theme Specific Adjustments */
html[data-theme="light"] .payment-widget-wrapper {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-border-primary);
}

html[data-theme="light"] .payment-widget-wrapper:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

html[data-theme="light"] .card-activation-form button[type="submit"]:hover:not(:disabled),
html[data-theme="light"] .card-activation-form input[type="submit"]:hover:not(:disabled) {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .card-activation-page-container .rounded-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.06);
}

/* Print Styles */
@media print {
  .card-activation-form button,
  .card-activation-form a.cursor-pointer {
    display: none;
  }

  .card-activation-page-container {
    background: white !important;
    color: black !important;
  }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  .card-activation-page-container *,
  .card-activation-form * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .payment-widget-wrapper {
    border-width: 2px;
  }

  .card-activation-form button[type="submit"],
  .card-activation-form input[type="submit"] {
    border: 2px solid currentColor;
  }

  .card-activation-form input[type="checkbox"] {
    border-width: 2px;
  }
}
/* app/assets/stylesheets/modals.css */
/* Styles for modal components */

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Custom select styling for dark theme modals */
.translate-modal-dialog select,
.modal-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239CA3AF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

/* Dark theme select styling */
.dark .translate-modal-dialog select,
.dark .modal-select {
  background-color: #374151 !important; /* gray-700 */
  color: #F9FAFB !important; /* gray-50 */
  border-color: #4B5563 !important; /* gray-600 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239CA3AF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

.dark .translate-modal-dialog select:focus,
.dark .modal-select:focus {
  border-color: #3B82F6 !important; /* blue-500 */
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* Option styling for dark theme */
.dark .translate-modal-dialog select option,
.dark .modal-select option {
  background-color: #374151;
  color: #F9FAFB;
}

.dark .translate-modal-dialog select option:disabled,
.dark .modal-select option:disabled {
  color: #6B7280;
}
/* app/assets/stylesheets/unsubscribe.css */

/* Container */
.unsubscribe-container {
  flex-grow: 1;
  padding-bottom: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .unsubscribe-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .unsubscribe-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.unsubscribe-wrapper {
  max-width: 28rem;
  width: 100%;
  margin: 0 auto;
  margin-top: 5rem;
}

/* Header */
.unsubscribe-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
}

.unsubscribe-description {
  font-size: 1rem;
  color: var(--color-text-secondary);
}

/* Card */
.unsubscribe-card {
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 2rem;
  background-color: var(--color-bg-secondary);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Input Field */
.unsubscribe-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
}

.unsubscribe-input {
  appearance: none;
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-size: 0.875rem;
  transition: all 200ms ease-in-out;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.unsubscribe-input::placeholder {
  color: var(--color-text-muted);
}

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

/* Submit Button */
.unsubscribe-submit {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-size: 1rem;
  font-weight: 500;
  color: white;
  transition: all 200ms ease-in-out;
  cursor: pointer;
  margin-top: 0.5rem;
  background: linear-gradient(to right, var(--color-accent-primary), var(--color-accent-hover));
}

.unsubscribe-submit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.unsubscribe-submit:active {
  transform: translateY(0);
}

/* Back Link */
.unsubscribe-back-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 200ms ease-in-out;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-accent-primary);
  border: 2px solid var(--color-accent-primary);
  background-color: var(--color-bg-secondary);
}

.unsubscribe-back-link:hover {
  background-color: var(--color-accent-primary);
  color: white;
  transform: translateY(-1px);
}

.unsubscribe-back-link:active {
  transform: translateY(0);
}
/* app/assets/stylesheets/usage_limits.css */

/* Usage limit badge styles */
.usage-limit-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  cursor: default;
  transition: transform 0.15s ease-in-out;
}

.usage-limit-badge:hover {
  transform: scale(1.05);
}

/* Badge color states */
.usage-limit-badge--unlimited {
  background-color: rgb(219 234 254); /* bg-blue-100 */
  color: rgb(30 64 175); /* text-blue-800 */
}

.usage-limit-badge--exhausted {
  background-color: rgb(254 226 226); /* bg-red-100 */
  color: rgb(153 27 27); /* text-red-800 */
}

.usage-limit-badge--warning {
  background-color: rgb(254 249 195); /* bg-yellow-100 */
  color: rgb(133 77 14); /* text-yellow-800 */
}

.usage-limit-badge--available {
  background-color: rgb(220 252 231); /* bg-green-100 */
  color: rgb(22 101 52); /* text-green-800 */
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .usage-limit-badge--unlimited {
    background-color: rgb(30 58 138); /* bg-blue-900 */
    color: rgb(191 219 254); /* text-blue-200 */
  }

  .usage-limit-badge--exhausted {
    background-color: rgb(127 29 29); /* bg-red-900 */
    color: rgb(254 202 202); /* text-red-200 */
  }

  .usage-limit-badge--warning {
    background-color: rgb(113 63 18); /* bg-yellow-900 */
    color: rgb(254 240 138); /* text-yellow-200 */
  }

  .usage-limit-badge--available {
    background-color: rgb(20 83 45); /* bg-green-900 */
    color: rgb(187 247 208); /* text-green-200 */
  }
}

/* Limit exceeded modal styles */
.limit-exceeded-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.5);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.limit-exceeded-modal-overlay.show {
  opacity: 1;
}

.limit-exceeded-modal-content {
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 2rem;
  max-width: 28rem;
  margin: 0 1rem;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
}

.limit-exceeded-modal-overlay.show .limit-exceeded-modal-content {
  transform: scale(1);
  opacity: 1;
}

/* Dark mode for modal */
@media (prefers-color-scheme: dark) {
  .limit-exceeded-modal-content {
    background-color: rgb(31 41 55); /* bg-gray-800 */
  }
}

/* Button styles - ensure cursor pointer */
.limit-exceeded-modal-content button,
.limit-exceeded-modal-content a[role="button"],
.limit-exceeded-modal-content a.btn {
  cursor: pointer;
}

/* Badge with tooltip animation */
.usage-limit-badge[title] {
  position: relative;
}

/* Pulse animation for warning state */
@keyframes pulse-warning {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.usage-limit-badge--warning {
  animation: pulse-warning 2s ease-in-out infinite;
}

/* Shake animation for exhausted state on hover */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}

.usage-limit-badge--exhausted:hover {
  animation: shake 0.3s ease-in-out;
}
/* app/assets/stylesheets/feed.css */
/* Styles for feed view modes (grid/feed) and related components */

/* ============================================================
   View Mode Toggle Button States
   ============================================================ */

/* Active state for view mode buttons */
[data-feed-view-mode-target="gridButton"].active,
[data-feed-view-mode-target="feedButton"].active {
  background-color: rgb(79 70 229); /* indigo-600 */
  color: white;
}

.dark [data-feed-view-mode-target="gridButton"].active,
.dark [data-feed-view-mode-target="feedButton"].active {
  background-color: rgb(99 102 241); /* indigo-500 */
}

/* ============================================================
   Feed Container - Grid Mode (Default)
   ============================================================ */

/* Default grid layout */
.feed-container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .feed-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .feed-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   View Mode: Grid
   ============================================================ */

[data-view-mode="grid"] .feed-container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 768px) {
  [data-view-mode="grid"] .feed-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  [data-view-mode="grid"] .feed-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* In grid mode, show grid cards and hide feed cards */
[data-view-mode="grid"] .feed-item-wrapper-grid {
  display: block;
}

[data-view-mode="grid"] .feed-item-wrapper-feed {
  display: none !important;
}

/* ============================================================
   View Mode: Feed (Single Column)
   ============================================================ */

[data-view-mode="feed"] .feed-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* In feed mode, hide grid cards and show feed cards */
[data-view-mode="feed"] .feed-item-wrapper-grid {
  display: none !important;
}

[data-view-mode="feed"] .feed-item-wrapper-feed {
  display: block !important;
}

/* Feed mode card specific styles */
[data-view-mode="feed"] .feed-item-feed {
  max-width: 100%;
}

/* ============================================================
   Feed Item Card Styles
   ============================================================ */

/* Grid card aspect ratio */
.feed-item-grid {
  display: flex;
  flex-direction: column;
}

/* Feed card horizontal layout on larger screens */
.feed-item-feed {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .feed-item-feed > .flex.flex-col.md\:flex-row {
    flex-direction: row;
  }
}

/* ============================================================
   Admin Icons Hover Effect
   ============================================================ */

.feed-item-grid:hover .admin-icons,
.feed-item-feed:hover .admin-icons {
  opacity: 1;
}

/* Show admin icons always on touch devices (no hover support) */
@media (hover: none) {
  .feed-item-grid .absolute.flex.gap-1,
  .feed-item-feed .absolute.flex.gap-2 {
    opacity: 1 !important;
  }
}

/* ============================================================
   Collapsible Comments Animation
   ============================================================ */

.collapsible-comments .comments-content {
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  overflow: hidden;
}

.collapsible-comments .comments-content.hidden {
  max-height: 0;
  opacity: 0;
}

.collapsible-comments .comments-content:not(.hidden) {
  max-height: 2000px; /* Large enough for content */
  opacity: 1;
}

/* ============================================================
   Tag Cloud Styles
   ============================================================ */

.tag-cloud {
  transition: all 0.2s ease;
}

/* Cloud container - creates scattered effect */
.tag-cloud-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

/* Varied positioning for cloud effect */
.tag-cloud-container a:nth-child(3n) {
  margin-top: 0.75rem;
}

.tag-cloud-container a:nth-child(3n+1) {
  margin-bottom: 0.5rem;
}

.tag-cloud-container a:nth-child(5n) {
  margin-top: 1rem;
}

.tag-cloud-container a:nth-child(5n+2) {
  margin-bottom: 0.75rem;
}

.tag-cloud-container a:nth-child(7n) {
  transform: rotate(-2deg);
}

.tag-cloud-container a:nth-child(7n+3) {
  transform: rotate(2deg);
}

.tag-cloud a {
  transition: all 0.2s ease;
  display: inline-block;
}

.tag-cloud a:hover {
  transform: scale(1.1) translateY(-2px) !important;
  z-index: 10;
}

/* Active tag state */
.tag-cloud a[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Loading States
   ============================================================ */

/* Spinner animation is handled by Tailwind's animate-spin class */

/* Load more trigger visibility */
#load_more_trigger {
  min-height: 80px;
}

/* ============================================================
   Responsive Adjustments
   ============================================================ */

/* On mobile, always use single column */
@media (max-width: 640px) {
  .feed-container {
    grid-template-columns: 1fr !important;
  }

  /* Hide view toggle on mobile (already done with Tailwind classes) */
}

/* Ensure feed item images don't overflow */
.feed-item-grid img,
.feed-item-feed img {
  object-fit: cover;
  max-width: 100%;
}

/* ============================================================
   Golden Vignette Frame - 19th Century Oil Painting Style
   ============================================================ */

/* Image container with golden vignette overlay */
.feed-image-frame {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}

/* Golden vignette overlay - subtle darkening at edges with warm tones */
.feed-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Radial gradient vignette: warm golden center fading to darker edges */
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(139, 90, 43, 0.08) 60%,
    rgba(101, 67, 33, 0.15) 75%,
    rgba(59, 39, 19, 0.25) 90%,
    rgba(30, 20, 10, 0.35) 100%
  );
  /* Subtle golden inner glow */
  box-shadow: inset 0 0 60px rgba(212, 175, 55, 0.12);
}

/* Decorative antique frame border */
.feed-image-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Double border effect: outer dark, inner golden */
  border: 3px solid rgba(139, 90, 43, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.3),
    inset 0 0 0 4px rgba(59, 39, 19, 0.15);
  border-radius: 0.5rem;
  z-index: 1;
}

/* Feed card images - apply vignette frame */
.feed-item-grid .feed-image-frame img,
.feed-item-feed .feed-image-frame img,
.feed-item-full .feed-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Show page main image frame - larger, more prominent */
article.bg-white .feed-image-frame::after,
.show-image-frame::after {
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(139, 90, 43, 0.1) 55%,
    rgba(101, 67, 33, 0.18) 70%,
    rgba(59, 39, 19, 0.28) 85%,
    rgba(30, 20, 10, 0.4) 100%
  );
  box-shadow: inset 0 0 80px rgba(212, 175, 55, 0.15);
}

/* Show page frame border - thicker and more ornate */
article.bg-white .feed-image-frame::before,
.show-image-frame::before {
  border-width: 4px;
  border-color: rgba(139, 90, 43, 0.5);
  box-shadow:
    inset 0 0 0 2px rgba(212, 175, 55, 0.35),
    inset 0 0 0 6px rgba(59, 39, 19, 0.2),
    0 4px 12px rgba(30, 20, 10, 0.3);
}

/* Alternative: simple golden border (for smaller images) */
.feed-image-border-simple {
  border: 2px solid rgba(212, 175, 55, 0.5);
  box-shadow:
    0 0 0 1px rgba(139, 90, 43, 0.3),
    0 2px 8px rgba(30, 20, 10, 0.2);
  border-radius: 0.375rem;
}

/* Dark theme adjustments - warmer, more visible vignette */
.dark .feed-image-frame::after,
:root[data-theme="dark"] .feed-image-frame::after {
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(139, 90, 43, 0.12) 55%,
    rgba(101, 67, 33, 0.22) 70%,
    rgba(59, 39, 19, 0.35) 85%,
    rgba(20, 12, 5, 0.5) 100%
  );
  box-shadow: inset 0 0 70px rgba(212, 175, 55, 0.18);
}

.dark .feed-image-frame::before,
:root[data-theme="dark"] .feed-image-frame::before {
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.4),
    inset 0 0 0 4px rgba(30, 20, 10, 0.3);
}

/* Carousel images - apply frame to container */
.carousel-frame {
  position: relative;
}

.carousel-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(139, 90, 43, 0.08) 60%,
    rgba(101, 67, 33, 0.15) 75%,
    rgba(59, 39, 19, 0.25) 90%,
    rgba(30, 20, 10, 0.35) 100%
  );
  box-shadow: inset 0 0 60px rgba(212, 175, 55, 0.12);
  z-index: 5;
}

/* ============================================================
   Dark Mode Adjustments
   ============================================================ */

.dark .tag-cloud a[aria-current="true"] {
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.4);
}

/* ============================================================
   Print Styles
   ============================================================ */

@media print {
  .feed-container {
    display: block;
  }

  .feed-item-wrapper {
    page-break-inside: avoid;
    margin-bottom: 2rem;
  }

  .tag-cloud,
  .view-mode-toggle,
  #load_more_trigger {
    display: none;
  }
}

/* ============================================================
   CURSOR POINTER FIX FOR ALL INTERACTIVE ELEMENTS
   ============================================================ */

/* All clickable elements in feed views must have pointer cursor */

/* Tags - both in tag cloud and on feed items */
.tag-cloud a,
.tag-cloud-container a,
article a[href*="tag="] {
  cursor: pointer !important;
}

/* Reaction buttons (like/dislike) - form submit buttons */
[data-controller="feed-reaction"] button,
[data-controller="feed-reaction"] form button,
turbo-frame[id*="reactions"] button,
turbo-frame[id*="reactions"] form button {
  cursor: pointer !important;
}

/* Share buttons and dropdown */
[data-controller="dropdown"] button,
[data-controller="feed-share"] a,
[data-controller="feed-share"] button,
.share-section a,
.share-section button {
  cursor: pointer !important;
}

/* Comments toggle button */
.collapsible-comments button,
[data-controller="feed-comments-toggle"] button {
  cursor: pointer !important;
}

/* Embed section toggle */
[data-controller="feed-embed"] button {
  cursor: pointer !important;
}

/* View mode toggle buttons */
[data-controller="feed-view-mode"] button,
.view-mode-toggle button {
  cursor: pointer !important;
}

/* Newsletter and email share modals */
[data-controller="newsletter"] button,
[data-controller="email-share"] button {
  cursor: pointer !important;
}

/* Generic: any link styled as button in feed */
article .rounded-full[href],
article a.transition[href] {
  cursor: pointer !important;
}

/* All buttons in feed item cards and show page */
.feed-item-grid button,
.feed-item-feed button,
article button {
  cursor: pointer !important;
}

/* All links in feed item cards */
.feed-item-grid a[href],
.feed-item-feed a[href],
article a[href] {
  cursor: pointer !important;
}

/* ============================================================
   Poetry/Verse Content Styling
   ============================================================ */

/* Reduced paragraph spacing for poetry and classic continuation content */
/* This prevents excessive line spacing when content has many short lines */
.prose-poetry p {
  margin-top: 0.25em !important;
  margin-bottom: 0.25em !important;
}

/* Add extra spacing only between stanzas (empty paragraphs or double breaks) */
.prose-poetry p:empty {
  margin-top: 0.75em !important;
  margin-bottom: 0 !important;
}

/* First paragraph no top margin */
.prose-poetry p:first-child {
  margin-top: 0 !important;
}

/* Last paragraph no bottom margin */
.prose-poetry p:last-child {
  margin-bottom: 0 !important;
}

/* ============================================================
   Special Content Type Styles
   ============================================================ */

/* Midnight Story Card - Dark theme for night reading */
.midnight-story-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  color: #e2e8f0 !important;
  border-color: #374151 !important;
}

.midnight-story-card .prose,
.midnight-story-card .prose-lg {
  color: #e2e8f0 !important;
}

.midnight-story-card h2,
.midnight-story-card h3,
.midnight-story-card .text-gray-900 {
  color: #f1f5f9 !important;
}

.midnight-story-card .text-gray-600,
.midnight-story-card .text-gray-500 {
  color: #94a3b8 !important;
}

.midnight-story-card .border-gray-100,
.midnight-story-card .border-gray-200 {
  border-color: #374151 !important;
}

/* Moon icon decoration for midnight story */
.midnight-story-icon::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fbbf24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* Star decorations for midnight story */
.midnight-story-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(251, 191, 36, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 80% 10%, rgba(251, 191, 36, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 40% 30%, rgba(251, 191, 36, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 90% 40%, rgba(251, 191, 36, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.5;
}

/* Haiku Card - Minimalist, centered design */
.haiku-card .haiku-content {
  text-align: center;
  font-size: 1.25rem;
  line-height: 2;
  font-style: italic;
  letter-spacing: 0.05em;
  padding: 2rem 1rem;
}

.haiku-card .haiku-content p {
  margin-bottom: 0.5rem;
}

/* Haiku author attribution */
.haiku-card .haiku-author {
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

.dark .haiku-card .haiku-author {
  color: #9ca3af;
  border-color: #374151;
}

/* Haiku decorative elements - subtle brush stroke effect */
.haiku-card::before,
.haiku-card::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f43f5e, transparent);
  opacity: 0.5;
}

.haiku-card::before {
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.haiku-card::after {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Poetry Continuation - elegant serif styling */
.poetry-continuation-card .poetry-content {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.8;
  white-space: pre-line;
}

/* Classics Now - modern adaptation styling */
.classics-now-card {
  border-left: 4px solid #10b981 !important;
}

.classics-now-card .original-text {
  background-color: #ecfdf5;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  font-style: italic;
}

.dark .classics-now-card .original-text {
  background-color: rgba(16, 185, 129, 0.1);
}

/* ============================================================
   Content Type Filter Pills - New Types
   ============================================================ */

/* Midnight Story filter - dark badge */
a[href*="type=midnight_story"].bg-indigo-600 {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  border: 1px solid #fbbf24;
}

/* Haiku filter - rose accent */
a[href*="type=haiku"].bg-indigo-600 {
  background-color: #f43f5e !important;
}

/* ============================================================
   Rubric Styles - Fairy Tales, Horror, 0101
   ============================================================ */

/* Rubric tabs cursor pointer */
.rubric-tab {
  cursor: pointer !important;
}

/* Rubric header backgrounds */
.rubric-header {
  padding: 1.5rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.75rem;
  color: white;
}

/* Fairy Tales header - soft purple gradient */
.rubric-header-fairy_tales {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  border: 1px solid rgba(167, 139, 250, 0.3);
}

.rubric-header-fairy_tales .rubric-icon {
  color: #fef3c7;
}

/* Horror header - dark red gradient */
.rubric-header-horror {
  background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 50%, #991b1b 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.rubric-header-horror .rubric-icon {
  color: #fca5a5;
  animation: flicker 3s infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
  75% { opacity: 0.9; }
}

/* 0101 Midnight Tales header - dark blue with stars */
.rubric-header-0101 {
  background: linear-gradient(135deg, #0c0a1d 0%, #1a1a2e 50%, #16213e 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  position: relative;
  overflow: hidden;
}

.rubric-header-0101::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(251, 191, 36, 0.15) 1px, transparent 1px),
    radial-gradient(circle at 80% 10%, rgba(251, 191, 36, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(251, 191, 36, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 90% 60%, rgba(251, 191, 36, 0.15) 1px, transparent 1px),
    radial-gradient(circle at 20% 50%, rgba(251, 191, 36, 0.08) 1px, transparent 1px);
  background-size: 100px 100px;
  pointer-events: none;
}

.rubric-header-0101 .rubric-icon {
  color: #fbbf24;
}

/* Active rubric tab styles */
.rubric-horror-active {
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.rubric-0101-active {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}

/* Rubric badge styles for feed items */
.rubric-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.rubric-badge-fairy_tales {
  background-color: rgba(167, 139, 250, 0.2);
  color: #7c3aed;
}

.dark .rubric-badge-fairy_tales {
  background-color: rgba(167, 139, 250, 0.3);
  color: #c4b5fd;
}

.rubric-badge-horror {
  background-color: rgba(239, 68, 68, 0.2);
  color: #b91c1c;
}

.dark .rubric-badge-horror {
  background-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.rubric-badge-0101 {
  background-color: rgba(24, 24, 27, 0.2);
  color: #3f3f46;
}

.dark .rubric-badge-0101 {
  background-color: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* Horror card styling enhancements */
.feed-item-horror {
  background: linear-gradient(135deg, #1a1a2e 0%, #1f1f2e 100%) !important;
  border-color: rgba(127, 29, 29, 0.5) !important;
}

.feed-item-horror::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(127, 29, 29, 0.1) 100%);
  pointer-events: none;
}

/* Fairy tale card styling */
.feed-item-fairy_tale {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}

.dark .feed-item-fairy_tale {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

/* Atmospheric hover effects for rubric items */
.feed-item-horror:hover {
  box-shadow: 0 10px 30px rgba(127, 29, 29, 0.3);
}

.feed-item-fairy_tale:hover {
  box-shadow: 0 10px 30px rgba(167, 139, 250, 0.3);
}

/* ============================================================
   Dark Romance Rubric Styles
   ============================================================ */

/* Dark Romance header - crimson/burgundy gradient */
.rubric-header-dark_romance {
  background: linear-gradient(135deg, #881337 0%, #be123c 50%, #e11d48 100%);
  border: 1px solid rgba(244, 63, 94, 0.3);
  position: relative;
  overflow: hidden;
}

/* Subtle rose petal overlay effect */
.rubric-header-dark_romance::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(ellipse at 15% 30%, rgba(251, 113, 133, 0.15) 2px, transparent 2px),
    radial-gradient(ellipse at 75% 20%, rgba(251, 113, 133, 0.12) 2px, transparent 2px),
    radial-gradient(ellipse at 45% 70%, rgba(251, 113, 133, 0.1) 2px, transparent 2px),
    radial-gradient(ellipse at 85% 55%, rgba(251, 113, 133, 0.15) 2px, transparent 2px);
  background-size: 80px 80px;
  pointer-events: none;
}

.rubric-header-dark_romance .rubric-icon {
  color: #fda4af;
}

/* Dark Romance badge for feed items */
.rubric-badge-dark_romance {
  background-color: rgba(244, 63, 94, 0.2);
  color: #be123c;
}

.dark .rubric-badge-dark_romance {
  background-color: rgba(244, 63, 94, 0.3);
  color: #fda4af;
}

/* Active rubric tab style for dark romance */
.rubric-dark_romance-active {
  background: linear-gradient(135deg, #881337 0%, #be123c 100%) !important;
  border: 1px solid rgba(244, 63, 94, 0.5);
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.3);
}

/* Dark Romance card styling */
.feed-item-dark_romance {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1f2f 100%) !important;
  border-color: rgba(190, 18, 60, 0.4) !important;
  position: relative;
}

.feed-item-dark_romance::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(136, 19, 55, 0.15) 100%);
  pointer-events: none;
}

.dark .feed-item-dark_romance {
  background: linear-gradient(135deg, #18181b 0%, #27171f 100%) !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}

/* Light mode variant */
.feed-item-dark_romance-light {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
  border-color: rgba(190, 18, 60, 0.3) !important;
}

/* Atmospheric hover effect for dark romance */
.feed-item-dark_romance:hover {
  box-shadow: 0 10px 30px rgba(190, 18, 60, 0.3);
}
/* app/assets/stylesheets/application.css */
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * IMPORTANT: Order matters! Load files in the correct order:
 * 1. theme.css - theme variables and overrides (must be after Tailwind)
 * 2. button_theme.css - button styles
 * 3. cookie_consent.css - cookie banner styles
 * 4. book_wizard.css - wizard form styles
 * 5. book_characters.css - character styles
 * 6. autosave.css - autosave indicator styles
 */

/*


















 */