/* ============================================
   USER PREFERENCES CSS
   ============================================
   
   This file contains CSS custom properties for user-customizable settings:
   - Custom highlight colors
   - Theme preferences
   - Dynamic user preference application
*/

/* ============================================
   USER HIGHLIGHT COLOR CUSTOM PROPERTIES
   ============================================ */

:root {
  /* Default highlight color (updated to soft teal) */
  --user-highlight-color: #E8F4F8; /* Soft Teal - professional default */
  
  /* Professional color enhancements for soft tones */
  --user-highlight-border: color-mix(in srgb, var(--user-highlight-color) 80%, #666);
  --user-highlight-text: color-mix(in srgb, var(--user-highlight-color) 70%, #333);
  
  /* User-customizable highlight variations */
  --user-highlight-light: color-mix(in srgb, var(--user-highlight-color) 30%, white);
  --user-highlight-medium: color-mix(in srgb, var(--user-highlight-color) 50%, white);
  --user-highlight-selected: color-mix(in srgb, var(--user-highlight-color) 70%, var(--user-highlight-border));
  --user-highlight-hover: color-mix(in srgb, var(--user-highlight-color) 25%, white);
  
  /* User highlight color with opacity variations */
  --user-highlight-bg-05: color-mix(in srgb, var(--user-highlight-color) 8%, transparent);
  --user-highlight-bg-10: color-mix(in srgb, var(--user-highlight-color) 15%, transparent);
  --user-highlight-bg-15: color-mix(in srgb, var(--user-highlight-color) 20%, transparent);
  --user-highlight-bg-20: color-mix(in srgb, var(--user-highlight-color) 25%, transparent);
  --user-highlight-bg-25: color-mix(in srgb, var(--user-highlight-color) 30%, transparent);
  --user-highlight-bg-30: color-mix(in srgb, var(--user-highlight-color) 35%, transparent);
  --user-highlight-bg-35: color-mix(in srgb, var(--user-highlight-color) 40%, transparent);
}

/* ============================================
   VERSE HIGHLIGHTING WITH USER COLOR
   ============================================ */

/* Override verse number highlighting with user color */
.chapter-content .v:hover {
  background: var(--user-highlight-bg-20) !important;
  border: 1px solid var(--user-highlight-border) !important;
  border-radius: 4px;
  color: var(--user-highlight-text) !important;
  transition: all 0.2s ease;
}

.chapter-content .v.selected {
  background: var(--user-highlight-selected) !important;
  border: 2px solid var(--user-highlight-border) !important;
  border-radius: 6px;
  color: var(--user-highlight-text) !important;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--user-highlight-border) 20%, transparent);
}

/* Enhanced dark theme verse number highlighting */
[data-theme="dark"] .chapter-content .v:hover {
  background: var(--user-highlight-bg-20) !important;
  border: 1px solid var(--user-highlight-border) !important;
  color: var(--user-highlight-text) !important;
  box-shadow: 
    0 2px 6px color-mix(in srgb, var(--user-highlight-border) 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--user-highlight-color) 15%, rgba(255,255,255,0.1));
}

[data-theme="dark"] .chapter-content .v.selected {
  background: var(--user-highlight-selected) !important;
  border: 2px solid var(--user-highlight-border) !important;
  color: var(--user-highlight-text) !important;
  box-shadow: 
    0 4px 8px color-mix(in srgb, var(--user-highlight-border) 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--user-highlight-color) 20%, rgba(255,255,255,0.15));
}

/* Override verse text highlighting with user color */
@media (hover: hover) and (pointer: fine) {
  .verse-text:hover, 
  .verse-text-wrapper:hover {
    background: var(--user-highlight-bg-20) !important;
    border: 1px solid var(--user-highlight-border) !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--user-highlight-border) 15%, transparent);
  }
}

.verse-text.underline, 
.verse-text-wrapper.underline {
  background: var(--user-highlight-selected) !important;
  border: 2px solid var(--user-highlight-border) !important;
  border-radius: 8px;
  box-shadow: 
    0 2px 8px color-mix(in srgb, var(--user-highlight-border) 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--user-highlight-color) 40%, white);
  position: relative;
}

/* Enhanced dark theme highlighting */
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .verse-text:hover,
  [data-theme="dark"] .verse-text-wrapper:hover {
    background: var(--user-highlight-bg-20) !important;
    border: 1px solid var(--user-highlight-border) !important;
    color: var(--bible-text-primary) !important; /* Dark text for better contrast on light backgrounds */
    box-shadow: 
      0 2px 6px color-mix(in srgb, var(--user-highlight-border) 30%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--user-highlight-color) 20%, rgba(255,255,255,0.1));
  }
}

[data-theme="dark"] .verse-text.underline,
[data-theme="dark"] .verse-text-wrapper.underline {
  background: var(--user-highlight-selected) !important;
  border: 2px solid var(--user-highlight-border) !important;
  color: #000000 !important; /* Force black text for maximum contrast on highlighted backgrounds */
  box-shadow: 
    0 4px 12px color-mix(in srgb, var(--user-highlight-border) 40%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--user-highlight-color) 30%, rgba(255,255,255,0.15)),
    inset 0 -1px 0 color-mix(in srgb, var(--user-highlight-border) 50%, transparent);
  text-shadow: none !important; /* Remove any conflicting text shadows */
}

/* Removed problematic white shine effect that was covering text */

/* Dark theme text readability enhancements */
[data-theme="dark"] .verse-text.underline *,
[data-theme="dark"] .verse-text-wrapper.underline * {
  color: inherit !important; /* Ensure all nested elements inherit the dark text color */
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .verse-text:hover *,
  [data-theme="dark"] .verse-text-wrapper:hover * {
    color: inherit !important; /* Ensure all nested elements inherit the dark text color */
  }
}

/* Ensure highlighted content maintains readability */
[data-theme="dark"] .verse-text.underline,
[data-theme="dark"] .verse-text-wrapper.underline {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); /* Light text shadow for dark text on light backgrounds */
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .verse-text:hover,
  [data-theme="dark"] .verse-text-wrapper:hover {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); /* Light text shadow for dark text on light backgrounds */
  }
}

/* Dark theme verse number text enhancement */
[data-theme="dark"] .chapter-content .v:hover,
[data-theme="dark"] .chapter-content .v.selected {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
  font-weight: inherit; /* Prevent boldness on selection */
}

/* Verse text selected state */
.chapter-content sup.selected {
  color: var(--user-highlight-text) !important;
  font-weight: inherit;
}

/* ============================================
   THEME PREFERENCE OVERRIDES
   ============================================ */

/* Force light theme when user selects it */
body[data-user-theme="light"] {
  /* Override any dark theme settings */
  --theme-override: light;
}

/* Force dark theme when user selects it */
body[data-user-theme="dark"] {
  /* Override any light theme settings */
  --theme-override: dark;
}

/* ============================================
   AI PROMPTING VISIBILITY CONTROLS
   ============================================ */

/* Hide AI prompts when user has disabled them */
body[data-ai-prompting="false"] .prompt-pill,
body[data-ai-prompting="false"] .ai-chat-container,
body[data-ai-prompting="false"] .study-prompts-container {
  display: none !important;
}

/* Show subtle indicator when AI prompting is disabled */
body[data-ai-prompting="false"] .bible-main-content::before {
  content: "AI features disabled in profile settings";
  display: block;
  background: color-mix(in srgb, var(--user-highlight-color) 10%, transparent);
  color: var(--user-highlight-color);
  text-align: center;
  padding: 0.5rem;
  font-size: 0.85rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  opacity: 0.7;
}

/* ============================================
   HIGHLIGHT COLOR PALETTE VARIANTS
   ============================================ */

/* Professional color palette - Light theme base colors */
:root[data-highlight-color="#E8F4F8"] {
  --user-highlight-color: #E8F4F8; /* Soft Teal */
  --user-highlight-border: color-mix(in srgb, #E8F4F8 80%, #4A5568);
  --user-highlight-text: color-mix(in srgb, #E8F4F8 70%, #2D3748);
}

:root[data-highlight-color="#E3F2FD"] {
  --user-highlight-color: #E3F2FD; /* Pale Blue */
  --user-highlight-border: color-mix(in srgb, #E3F2FD 80%, #4A5568);
  --user-highlight-text: color-mix(in srgb, #E3F2FD 70%, #2D3748);
}

:root[data-highlight-color="#F3E5F5"] {
  --user-highlight-color: #F3E5F5; /* Lavender */
  --user-highlight-border: color-mix(in srgb, #F3E5F5 80%, #4A5568);
  --user-highlight-text: color-mix(in srgb, #F3E5F5 70%, #2D3748);
}

:root[data-highlight-color="#FCE4EC"] {
  --user-highlight-color: #FCE4EC; /* Blush Pink */
  --user-highlight-border: color-mix(in srgb, #FCE4EC 80%, #4A5568);
  --user-highlight-text: color-mix(in srgb, #FCE4EC 70%, #2D3748);
}

:root[data-highlight-color="#FFF8E1"] {
  --user-highlight-color: #FFF8E1; /* Warm Beige */
  --user-highlight-border: color-mix(in srgb, #FFF8E1 80%, #4A5568);
  --user-highlight-text: color-mix(in srgb, #FFF8E1 70%, #2D3748);
}

:root[data-highlight-color="#E8F5E8"] {
  --user-highlight-color: #E8F5E8; /* Mint Green */
  --user-highlight-border: color-mix(in srgb, #E8F5E8 80%, #4A5568);
  --user-highlight-text: color-mix(in srgb, #E8F5E8 70%, #2D3748);
}

:root[data-highlight-color="#FFF3E0"] {
  --user-highlight-color: #FFF3E0; /* Peach */
  --user-highlight-border: color-mix(in srgb, #FFF3E0 80%, #4A5568);
  --user-highlight-text: color-mix(in srgb, #FFF3E0 70%, #2D3748);
}

:root[data-highlight-color="#F1F8E9"] {
  --user-highlight-color: #F1F8E9; /* Sage */
  --user-highlight-border: color-mix(in srgb, #F1F8E9 80%, #4A5568);
  --user-highlight-text: color-mix(in srgb, #F1F8E9 70%, #2D3748);
}

/* Dark theme adaptations for professional colors - Light backgrounds with dark text */
[data-theme="dark"] :root[data-highlight-color="#E8F4F8"] {
  --user-highlight-color: #B8E6ED; /* Light teal background for dark text */
  --user-highlight-border: #4A7A82;
  --user-highlight-text: #1A202C; /* Dark text for better contrast */
  --user-highlight-light: #C8EAEF;
  --user-highlight-medium: #A8E2EA;
  --user-highlight-selected: #98DEEB;
  --user-highlight-hover: #D8EEF1;
}

[data-theme="dark"] :root[data-highlight-color="#E3F2FD"] {
  --user-highlight-color: #B3D9FF; /* Light blue background for dark text */
  --user-highlight-border: #4A8BC2;
  --user-highlight-text: #1A202C; /* Dark text for better contrast */
  --user-highlight-light: #C3E1FF;
  --user-highlight-medium: #A3D5FF;
  --user-highlight-selected: #93CFFF;
  --user-highlight-hover: #D3E7FF;
}

[data-theme="dark"] :root[data-highlight-color="#F3E5F5"] {
  --user-highlight-color: #E1BEE7; /* Light lavender background for dark text */
  --user-highlight-border: #9C7AA2;
  --user-highlight-text: #1A202C; /* Dark text for better contrast */
  --user-highlight-light: #E9CEEB;
  --user-highlight-medium: #D9AEE3;
  --user-highlight-selected: #D1A4DF;
  --user-highlight-hover: #F1DEEF;
}

[data-theme="dark"] :root[data-highlight-color="#FCE4EC"] {
  --user-highlight-color: #F8BBD9; /* Light pink background for dark text */
  --user-highlight-border: #C7889F;
  --user-highlight-text: #1A202C; /* Dark text for better contrast */
  --user-highlight-light: #FACBDD;
  --user-highlight-medium: #F6ABD5;
  --user-highlight-selected: #F49BD1;
  --user-highlight-hover: #FCDBE1;
}

[data-theme="dark"] :root[data-highlight-color="#FFF8E1"] {
  --user-highlight-color: #F5E6C8; /* Light beige background for dark text */
  --user-highlight-border: #B8A082;
  --user-highlight-text: #1A202C; /* Dark text for better contrast */
  --user-highlight-light: #F7EACC;
  --user-highlight-medium: #F3E2C4;
  --user-highlight-selected: #F1DEC0;
  --user-highlight-hover: #F9F2D0;
}

[data-theme="dark"] :root[data-highlight-color="#E8F5E8"] {
  --user-highlight-color: #C8E6C9; /* Light green background for dark text */
  --user-highlight-border: #7FA080;
  --user-highlight-text: #1A202C; /* Dark text for better contrast */
  --user-highlight-light: #D2EACD;
  --user-highlight-medium: #BEE2C5;
  --user-highlight-selected: #B4DEC1;
  --user-highlight-hover: #DCF2DD;
}

[data-theme="dark"] :root[data-highlight-color="#FFF3E0"] {
  --user-highlight-color: #FFCCBC; /* Light peach background for dark text */
  --user-highlight-border: #CC9A83;
  --user-highlight-text: #1A202C; /* Dark text for better contrast */
  --user-highlight-light: #FFD6C0;
  --user-highlight-medium: #FFC2B8;
  --user-highlight-selected: #FFB8B4;
  --user-highlight-hover: #FFE0D4;
}

[data-theme="dark"] :root[data-highlight-color="#F1F8E9"] {
  --user-highlight-color: #DCEDC8; /* Light sage background for dark text */
  --user-highlight-border: #A5B881;
  --user-highlight-text: #1A202C; /* Dark text for better contrast */
  --user-highlight-light: #E4F1CC;
  --user-highlight-medium: #D4E9C4;
  --user-highlight-selected: #CCE5C0;
  --user-highlight-hover: #ECF5D1;
}

/* Legacy color variants (kept for backward compatibility) */
:root[data-highlight-color="purple"] {
  --user-highlight-color: #7c3aed;
}

:root[data-highlight-color="blue"] {
  --user-highlight-color: #2563eb;
}

:root[data-highlight-color="green"] {
  --user-highlight-color: #059669;
}

:root[data-highlight-color="orange"] {
  --user-highlight-color: #ea580c;
}

:root[data-highlight-color="red"] {
  --user-highlight-color: #dc2626;
}

:root[data-highlight-color="pink"] {
  --user-highlight-color: #db2777;
}

:root[data-highlight-color="yellow"] {
  --user-highlight-color: #ca8a04;
}

:root[data-highlight-color="indigo"] {
  --user-highlight-color: #4f46e5;
}

/* ============================================
   RESPONSIVE USER PREFERENCES
   ============================================ */

/* Ensure user preferences work on all screen sizes */
@media (max-width: 768px) {
  body[data-ai-prompting="false"] .bible-main-content::before {
    font-size: 0.8rem;
    padding: 0.4rem;
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Ensure sufficient contrast for user highlight colors */
.verse-text.underline, 
.verse-text-wrapper.underline {
  /* Ensure text remains readable on highlighted background */
  color: var(--bible-text-primary) !important;
}

/* Focus indicators using user highlight color */
.chapter-content .v:focus,
.verse-text:focus,
.verse-text-wrapper:focus {
  outline: 2px solid var(--user-highlight-color);
  outline-offset: 2px;
}

/* ============================================
   MOBILE-SPECIFIC HIGHLIGHT TRANSPARENCY
   ============================================ */

@media (max-width: 768px) {
  /* Make user highlight colors more transparent on mobile */
  .chapter-content .v:hover {
    background: color-mix(in srgb, var(--user-highlight-color) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--user-highlight-border) 50%, transparent) !important;
  }

  .chapter-content .v.selected {
    background: color-mix(in srgb, var(--user-highlight-color) 20%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--user-highlight-border) 60%, transparent) !important;
  }

  /* Make verse text highlighting more transparent on mobile */
  .verse-text.selected,
  .verse-text-wrapper.selected {
    background: color-mix(in srgb, var(--user-highlight-color) 15%, transparent) !important;
    border-left: 2px solid color-mix(in srgb, var(--user-highlight-border) 40%, transparent) !important;
  }

  /* Reduce user highlight color intensity variables for mobile */
  :root {
    --user-highlight-bg-10: color-mix(in srgb, var(--user-highlight-color) 8%, transparent);
    --user-highlight-bg-20: color-mix(in srgb, var(--user-highlight-color) 12%, transparent);
    --user-highlight-bg-30: color-mix(in srgb, var(--user-highlight-color) 18%, transparent);
  }
}