/* Dark Mode Stylesheet - Centralized for all pages */

/* Dark mode toggle functionality */
.dark-mode-toggle {
    transition: all 0.3s ease;
}

.dark-mode-toggle i {
    transition: transform 0.5s ease;
}

.dark-mode-toggle:hover i {
    transform: rotate(180deg);
}

/* Dark mode state management */
.dark-mode-toggle[data-mode="dark"] i {
    transform: rotate(180deg);
}

.dark-mode-toggle[data-mode="light"] i {
    transform: rotate(0deg);
}

/* Dark mode toggle button styles */
#dark-mode-toggle {
    transition: all 0.3s ease;
}

#dark-mode-toggle i {
    transition: transform 0.5s ease;
}

#dark-mode-toggle:hover i {
    transform: rotate(180deg);
}

/* Dark mode toggle button states */
#dark-mode-toggle[data-mode="dark"] i {
    transform: rotate(180deg);
}

#dark-mode-toggle[data-mode="light"] i {
    transform: rotate(0deg);
}

/* Dark mode utility classes */
.dark-mode-hidden {
    display: none !important;
}

.dark-mode-visible {
    display: block !important;
}

/* Dark mode transitions */
.dark-mode-transition {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode specific animations */
.dark .dark-mode-pulse {
    animation: darkPulse 2s ease-in-out infinite;
}

@keyframes darkPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Dark mode toggle button hover effects */
#dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Dark mode toggle button active states */
#dark-mode-toggle:active {
    transform: scale(0.95);
}

/* Dark mode toggle button focus states */
#dark-mode-toggle:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Darker shadows in dark mode for better depth/contrast */
.dark .shadow,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl,
.dark .shadow-inner {
    /* Stronger, tighter shadows for dark backgrounds */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55),
                0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Heavier shadow specifically for elevated cards/panels */
.dark .shadow-xl,
.dark .shadow-2xl {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65),
                0 4px 12px rgba(0, 0, 0, 0.55) !important;
}

/* Subtle inner shadow variant for inputs or inset elements */
.dark .shadow-inner {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* Ensure common glass/backdrop elements also receive darker shadows */
.dark .backdrop-blur-sm.shadow,
.dark .backdrop-blur-sm.shadow-lg,
.dark .backdrop-blur-sm.shadow-xl {
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6),
                0 3px 10px rgba(0, 0, 0, 0.55) !important;
}