/* Theme Toggle Button Styles */
#theme-toggle, #mobile-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 60;
}

#theme-toggle {
    background-color: #f3f4f6; /* gray-100 */
    padding: 0.5rem;
}

#mobile-theme-toggle {
    min-width: 40px;
    min-height: 40px;
    background-color: #f3f4f6; /* gray-100 */
}

/* Dark mode variants */
.dark #theme-toggle,
.dark #mobile-theme-toggle {
    background-color: #1f2937; /* gray-800 */
}

/* Hover states */
#theme-toggle:hover,
#mobile-theme-toggle:hover {
    background-color: #e5e7eb; /* gray-200 */
}

.dark #theme-toggle:hover,
.dark #mobile-theme-toggle:hover {
    background-color: #111827; /* gray-900 */
}

/* Focus states for accessibility */
#theme-toggle:focus,
#mobile-theme-toggle:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

#theme-toggle:focus-visible,
#mobile-theme-toggle:focus-visible {
    outline: 2px solid #059669; /* primary-600 */
    outline-offset: 2px;
}

.dark #theme-toggle:focus-visible,
.dark #mobile-theme-toggle:focus-visible {
    outline: 2px solid #10b981; /* primary-500 */
    outline-offset: 2px;
}

/* SVG icon styling */
#theme-toggle svg,
#mobile-theme-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Ensure proper visibility on mobile */
@media (max-width: 767px) {
    #mobile-theme-toggle {
        position: relative;
        margin-left: auto;
    }
    
    #mobile-menu .flex.items-center.justify-between {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border-top: 1px solid #e5e7eb; /* gray-200 */
    }
    
    .dark #mobile-menu .flex.items-center.justify-between {
        border-top: 1px solid #374151; /* gray-600 */
    }
}