/* ============================================
   INLINE STYLES MOVED TO EXTERNAL CSS
   ============================================
   
   This file contains styles that were previously inline
   to improve CSS validation and maintainability
*/

/* ============================================
   FROSTED GLASS BACKDROP UTILITY
   ============================================ */

/* Frosted Glass Backdrop Effect */
.backdrop {
  /* Backdrop filter with vendor prefixes for Safari support */
  -webkit-backdrop-filter: blur(10px); /* Safari */
  backdrop-filter: blur(10px);         /* Modern browsers */
  
  /* Semi-transparent background for frosted glass effect */
  background: rgba(255, 255, 255, 0.1);
  
  /* Padding for content spacing */
  padding: 1.5rem;
  
  /* Rounded corners */
  border-radius: 12px;
  
  /* Subtle border to enhance the glass effect */
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  /* Box shadow for depth */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Dark theme variant for backdrop */
[data-theme="dark"] .backdrop {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Light theme variant for backdrop */
[data-theme="light"] .backdrop {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ============================================
   HIDDEN UTILITY CLASSES
   ============================================ */

.hidden,
#template-data,
#ai-loading {
  display: none !important;
}

/* Initially hidden content sections - will be shown via JavaScript */
#study-prompts-section.hidden,
#regenerate-prompts-section.hidden {
  display: none !important;
}

/* Initially hidden modal elements - will be shown via JavaScript */
#books-modal-overlay,
#bible-translation-modal,
#loginModal.hidden {
  display: none !important;
}

/* Initially hidden content sections - will be shown via JavaScript */
#books-grid.hidden,
#translations-content.hidden {
  display: none !important;
}

/* Show when active/visible - override hidden class */
.show {
  display: block !important;
}

.show.flex {
  display: flex !important;
}

.show.grid {
  display: grid !important;
}

.show.inline {
  display: inline !important;
}

.show.inline-block {
  display: inline-block !important;
}

/* Specific override for modals that need flex display */
#bible-translation-modal.show,
#books-modal-overlay.show {
  display: flex !important;
}

/* Specific override for content areas that need to be shown */
#books-grid.show {
  display: grid !important;
}

#translations-content.show {
  display: block !important;
}

#loginModal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#study-prompts-section.show {
  display: block !important;
}

#regenerate-prompts-section.show {
  display: block !important;
}

/* Remove hidden class when show is applied */
.show.hidden {
  display: block !important;
}

.show.flex.hidden {
  display: flex !important;
}

.show.grid.hidden {
  display: grid !important;
}

/* ============================================
   COLOR CIRCLE UTILITIES
   ============================================ */

.color-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.color-circle:hover {
  transform: scale(1.1);
  border-color: rgba(0, 0, 0, 0.2);
}

.color-circle.selected {
  border-color: var(--primary-color, #007bff);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Specific color classes */
.color-circle-light-blue {
  background-color: #E8F4F8;
}

.color-circle-blue {
  background-color: #E3F2FD;
}

.color-circle-purple {
  background-color: #F3E5F5;
}

.color-circle-pink {
  background-color: #FCE4EC;
}

.color-circle-yellow {
  background-color: #FFF8E1;
}

.color-circle-green {
  background-color: #E8F5E8;
}

.color-circle-orange {
  background-color: #FFF3E0;
}

.color-circle-lime {
  background-color: #F1F8E9;
}

/* ============================================
   MODAL AND OVERLAY UTILITIES
   ============================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}

.modal-overlay.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* ============================================
   LOADING STATES
   ============================================ */

.loading-hidden {
  display: none;
}

.loading-visible {
  display: block;
}

/* Legacy loading spinner - Use bibliatech-loading class instead */
/* See loading-animation.css for the new loading styles */

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

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

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-color, #007bff);
  color: white;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
  border-radius: 4px;
}

.skip-link:focus {
  top: 6px;
}