/* Fix for header buttons spacing and click behavior */
header .container .ml-1,
header .container .ml-3 {
  /* Standardize margins for all buttons */
  margin-left: 0.5rem !important;
}

.header-logo {
            height: 3.50rem; /* Adjust based on your logo's proportions */
            max-width: 100%;
            cursor: pointer; /* Keep the clickable functionality */
            transition: transform 0.2s ease;
        }
        
        .header-logo:hover {
            transform: scale(1.05); /* Slight zoom effect on hover */
        }
		
		#subtitle-container {
		    display: flex;
		    align-items: center;
		    flex-wrap: wrap; /* Allows wrapping on very small screens if necessary */
		}

/* Ensure all buttons have the same dimensions and clear hitbox */
#settings-button,
#notes-btn,
#mobile-bookmarks-btn,
#audio-toggle-btn {
  width: 36px;
  height: 36px;
  position: relative;
  z-index: 10; /* Ensure buttons stay above other elements */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fix for notification z-index issue */
#notification {
  z-index: 1000 !important; /* Keep notifications above other content */
  pointer-events: none; /* Prevent notifications from blocking clicks */
}

/* Ensure consistent icon sizing */
#settings-button svg,
#notes-btn svg,
#mobile-bookmarks-btn svg,
#audio-toggle-btn svg {
  width: 20px;
  height: 20px;
}

/* Optional: Add a subtle visual separator */
header .container > div {
  display: flex;
  align-items: center;
}
	
        /* Base styles */
		
		#chapter-bookmark-ribbon {
    position: fixed;
    z-index: 30;
    right: 0;
    top: 250px;
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    transition: transform 0.2s ease, filter 0.2s ease;
}

#chapter-bookmark-ribbon:hover {
    transform: translateX(-2px) scale(1.05);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

#notes-panel {
    box-shadow: -2px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Higher than other UI elements */
    /* Force specific colors for the entire panel to ensure readability */
    background-color: #FFFFFF !important;
    color: #111827 !important;
}

/* Dark mode specific overrides for the panel */
html.dark #notes-panel {
    background-color: #1F2937 !important;
    color: #F9FAFB !important;
}

#notes-backdrop {
    transition: opacity 0.3s ease;
    opacity: 0;
}

#notes-backdrop:not(.hidden) {
    opacity: 0.5;
}

/* Notes textarea - ensure consistent colors regardless of user settings */
#current-chapter-note {
    min-height: 200px;
    transition: border-color 0.3s;
    /* Force specific colors to ensure readability */
    background-color: #FFFFFF !important;
    color: #111827 !important;
}

/* Dark mode specific overrides */
html.dark #current-chapter-note {
    background-color: #374151 !important;
    color: #F9FAFB !important;
}

#current-chapter-note:focus {
    outline: none;
}

/* Note list items animations */
#book-notes-list > div,
#all-notes-list > div {
    transition: transform 0.2s, box-shadow 0.2s;
    /* Force specific colors for note items */
    background-color: #F9FAFB !important;
    color: #111827 !important;
}

#book-notes-list > div:hover,
#all-notes-list > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Dark mode specific overrides for note items */
html.dark #book-notes-list > div,
html.dark #all-notes-list > div {
    background-color: #374151 !important;
    color: #F9FAFB !important;
}

/* Ensure consistent colors for note content */
#book-notes-list .text-gray-600,
#all-notes-list .text-gray-600 {
    color: #4B5563 !important;
}

html.dark #book-notes-list .text-gray-600,
html.dark #all-notes-list .text-gray-600,
html.dark #book-notes-list .text-gray-300,
html.dark #all-notes-list .text-gray-300 {
    color: #D1D5DB !important;
}

/* Save button animation */
#save-note-btn {
    transition: all 0.2s ease;
}

#save-note-btn:active {
    transform: scale(0.95);
}

/* Chapter notes indicator styling */
#chapter-notes-indicator {
    position: relative;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#chapter-notes-indicator:hover {
    transform: scale(1.1);
}

/* Consistency with bookmark button styling */
#chapter-bookmark-btn,
#chapter-notes-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Ensure note icon in header shows indicator */

#notes-btn {
    position: relative; /* Make the button a positioning context for the dot */
}

#notes-btn.has-notes::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background-color: #3B82F6;
    border-radius: 50%;
    opacity: 1;
}

/* Tab Indicator */
.notes-tab-btn {
    position: relative;
    overflow: hidden;
}

.notes-tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #3B82F6;
    transform: translateX(-100%);
    transition: transform 0.3s;
}

.notes-tab-btn.active::after {
    transform: translateX(0);
}

/* Notes notification in chapter view */
.notes-indicator {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: rgba(59, 130, 246, 0.1);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #3B82F6;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.notes-indicator:hover {
    background-color: rgba(59, 130, 246, 0.2);
}

.notes-indicator svg {
    margin-right: 0.25rem;
}

/* Empty state styling */
.empty-notes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: #9CA3AF;
}

.empty-notes svg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    stroke: #9CA3AF;
}

/* Dark mode support */
html.dark .notes-indicator {
    background-color: rgba(59, 130, 246, 0.15);
}

html.dark .notes-indicator:hover {
    background-color: rgba(59, 130, 246, 0.25);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    #notes-panel {
        max-width: 100%;
    }
    
    #current-chapter-note {
        min-height: 150px;
    }
    
    /* Better touch targets for mobile */
    .edit-note-btn,
    .delete-note-btn {
        padding: 0.5rem;
    }
    
    /* Tab buttons more touch-friendly */
    #chapter-notes-tab,
    #book-notes-tab,
    #all-notes-tab,
    #mobile-chapters-tab,
    #mobile-verses-tab {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* Chapter bookmark button */
#chapter-bookmark-btn {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#chapter-bookmark-btn:hover {
    transform: scale(1.1);
}

/* Bookmarked verse styling */
.verse-bookmarked {
    background-color: rgba(220, 38, 38, 0.08);
    border-left: 2px solid rgba(220, 38, 38, 0.5);
    padding-left: calc(2rem - 2px) !important;
    transition: background-color 0.2s ease;
}

.verse-bookmarked:hover {
    background-color: rgba(220, 38, 38, 0.12);
}

/* Mobile bookmarks panel */
#mobile-bookmarks-panel {
    transition: transform 0.3s ease;
    box-shadow: -2px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

#mobile-bookmarks-backdrop {
    transition: opacity 0.3s ease;
    opacity: 0;
}

#mobile-bookmarks-backdrop:not(.hidden) {
    opacity: 0.5;
}

/* Line clamping for verse text in bookmarks */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Dark mode support */
html.dark .verse-bookmarked {
    background-color: rgba(248, 113, 113, 0.1);
    border-left-color: rgba(248, 113, 113, 0.4);
}

html.dark .verse-bookmarked:hover {
    background-color: rgba(248, 113, 113, 0.15);
}

/* Bookmark lists scroll styling */
#chapter-bookmarks-list,
#verse-bookmarks-list,
#mobile-chapter-bookmarks,
#mobile-verse-bookmarks {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

#chapter-bookmarks-list::-webkit-scrollbar,
#verse-bookmarks-list::-webkit-scrollbar,
#mobile-chapter-bookmarks::-webkit-scrollbar,
#mobile-verse-bookmarks::-webkit-scrollbar {
    width: 6px;
}

#chapter-bookmarks-list::-webkit-scrollbar-track,
#verse-bookmarks-list::-webkit-scrollbar-track,
#mobile-chapter-bookmarks::-webkit-scrollbar-track,
#mobile-verse-bookmarks::-webkit-scrollbar-track {
    background: transparent;
}

#chapter-bookmarks-list::-webkit-scrollbar-thumb,
#verse-bookmarks-list::-webkit-scrollbar-thumb,
#mobile-chapter-bookmarks::-webkit-scrollbar-thumb,
#mobile-verse-bookmarks::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    #chapter-bookmark-ribbon {
        top: auto;
        bottom: 80px;
    }
    
    /* Larger touch targets for mobile */
    #mobile-chapter-bookmarks .remove-bookmark,
    #mobile-verse-bookmarks .remove-verse-bookmark {
        padding: 0.5rem;
    }
}
		
        .verse-number {
            font-size: 0.9rem;
            vertical-align: super;
            margin-right: 0.35rem;
            font-weight: 700;
        }
        
        .highlight {
            background-color: #FEFCE8;
            border-bottom: 1px solid #FEF08A;
        }
        
        .verse {
            display: block;
            margin-bottom: 0.85rem;
            line-height: 1.8;
            padding-left: 2rem;
            text-indent: 0rem;
        }
        
        /* Navigation styles */
        .sidebar-container {
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .desktop-nav-toggle {
            position: absolute;
            left: 0;
            top: 140px;
            z-index: 30;
            background-color: #3B82F6;
            color: white;
            border-radius: 0 50% 50% 0;
            width: 28px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
            opacity: 0.8;
            cursor: pointer;
            transition: opacity 0.2s ease, width 0.3s ease;
        }
        
        .desktop-nav-toggle:hover {
            opacity: 1;
            width: 32px;
        }
        
        .desktop-nav-toggle svg {
            transition: transform 0.3s ease;
        }
        
        .sidebar-collapsed .desktop-nav-toggle svg {
            transform: rotate(180deg);
        }
        
        .content-area {
            transition: all 0.3s ease;
            width: 100%;
        }
        
        /* Mobile specific styles */
        .mobile-nav-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem 1rem;
			width: auto;
			min-width: 120px;
            background-color: #EBF5FF;
            border-radius: 0.375rem;
            transition: background-color 0.2s ease;
        }
        
        .mobile-nav-toggle:hover {
            background-color: #DBEAFE;
        }
		
		.mobile-nav-toggle span {
			font-weight: 500;
			color: #3B82F6;
		}
        
        .mobile-nav-toggle svg {
            transition: transform 0.3s ease;
			height: 1.25rem;
			width: 1.25rem;
        }
        
        .mobile-collapsed .mobile-nav-toggle svg {
            transform: rotate(180deg);
        }
		
		.mobile-nav-toggle:active {
			background-color: #BFDBFE;
			transform: scale(0.98);
		}
        
        /* Floating navigation buttons */
        .float-nav-button {
            position: fixed;
            z-index: 40;
            opacity: 0.9;
            transition: opacity 0.2s ease;
        }
        
        .float-nav-button:hover {
            opacity: 1;
        }
        
        #prev-chapter {
            left: 1rem;
        }
        
        #next-chapter {
            right: 1rem;
        }
        
        /* Settings panel */
        .settings-panel {
            position: fixed;
            top: 0;
            right: -320px;
            width: 320px;
            height: 100%;
            background-color: white;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
            transition: right 0.3s ease;
            overflow-y: auto;
        }
        
        .settings-open .settings-panel {
            right: 0;
        }
        
        .settings-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 99;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        .settings-open .settings-backdrop {
            opacity: 1;
            visibility: visible;
        }
        
        /* Text size slider styles */
        .text-size-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 4px;
            background: #E5E7EB;
            outline: none;
        }
        
        .text-size-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3B82F6;
            cursor: pointer;
        }
        
        .text-size-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3B82F6;
            cursor: pointer;
            border: none;
        }
        
        /* Dark mode */
        html.dark .text-size-slider {
            background: #4B5563;
        }
        
        /* Font size classes - expanded range */
        .font-size-xs .verse {
            font-size: 0.8rem;
            line-height: 1.5;
        }
        
        .font-size-s .verse {
            font-size: 0.9rem;
            line-height: 1.6;
        }
        
        .font-size-m .verse {
            font-size: 1rem;
            line-height: 1.7;
        }
        
        .font-size-l .verse {
            font-size: 1.1rem;
            line-height: 1.8;
        }
        
        .font-size-xl .verse {
            font-size: 1.25rem;
            line-height: 1.9;
        }
        
        .font-size-xxl .verse {
            font-size: 1.4rem;
            line-height: 2.0;
        }
        
        .font-size-xxxl .verse {
            font-size: 1.6rem;
            line-height: 2.1;
        }
        
        /* Dark mode */
        html.dark {
            background-color: #1F2937;
            color: #E5E7EB;
        }
        
        html.dark .bg-white {
            background-color: #111827;
        }
        
        html.dark .text-gray-900 {
            color: #F9FAFB;
        }
        
        html.dark .text-gray-700, 
        html.dark .text-gray-600 {
            color: #D1D5DB;
        }
        
        html.dark .bg-gray-50 {
            background-color: #1F2937;
        }
        
        html.dark .border-gray-200 {
            border-color: #374151;
        }
        
        html.dark .border-t {
            border-color: #374151;
        }
        
        html.dark .verse-number {
            color: #9CA3AF;
        }
        
        html.dark .highlight {
            background-color: #3F2C0D;
            border-bottom: 1px solid #F59E0B;
        }
        
        html.dark input, 
        html.dark select {
            background-color: #374151;
            color: #F9FAFB;
            border-color: #4B5563;
        }
        
        html.dark .settings-panel {
            background-color: #111827;
        }
        
        @media (max-width: 768px) {
            #prev-chapter, #next-chapter {
                top: 50%;
                transform: translateY(-50%);
            }
            
            .mobile-collapsed .sidebar-container {
                max-height: 0;
                margin-bottom: 0;
                padding-top: 0;
                padding-bottom: 0;
            }
            
            /* Hide desktop toggle on mobile */
            .desktop-nav-toggle {
                display: none !important;
            }
        }
        
        @media (min-width: 769px) {
            #prev-chapter, #next-chapter {
                top: 50%;
                transform: translateY(-50%);
            }
            
            .sidebar-collapsed .sidebar-container {
                width: 0;
                padding-left: 0;
                padding-right: 0;
                margin-right: 0;
            }
            
            .sidebar-collapsed .content-area {
                width: 100%;
            }
        }

        /* Context menu styles */
        #verse-context-menu {
            min-width: 200px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            animation: menuFadeIn 0.15s ease-out;
        }

        @keyframes menuFadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        #verse-context-menu div:not(:first-child) {
            transition: background-color 0.2s;
        }

        /* Notification styles */
        #notification {
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.3s, transform 0.3s;
        }

        #notification:not(.opacity-0) {
            opacity: 1;
            transform: translateY(0);
        }

        /* Highlight effect for verses */
        .verse {
            position: relative;
            transition: background-color 0.3s;
        }

        .highlight {
            animation: highlightPulse 5s;
        }

        @keyframes highlightPulse {
            0% { background-color: rgba(254, 252, 232, 0.7); }
            70% { background-color: rgba(254, 252, 232, 0.7); }
            100% { background-color: transparent; }
        }

        html.dark .highlight {
            animation: darkHighlightPulse 5s;
        }

        @keyframes darkHighlightPulse {
            0% { background-color: rgba(63, 44, 13, 0.7); }
            70% { background-color: rgba(63, 44, 13, 0.7); }
            100% { background-color: transparent; }
        }