/* Dark Mode Styles for all pages */

/* Dark mode toggle button */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

/* Dark mode active styles */
body.dark-mode {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .bg-white {
    background-color: #16213e !important;
}

body.dark-mode .bg-gray-50 {
    background-color: #0f1419 !important;
}

body.dark-mode .bg-gray-100 {
    background-color: #1a1a2e !important;
}

body.dark-mode .bg-gray-200 {
    background-color: #2d2d44 !important;
}

body.dark-mode .text-gray-800,
body.dark-mode .text-gray-900 {
    color: #e0e0e0 !important;
}

body.dark-mode .text-gray-700 {
    color: #b0b0b0 !important;
}

body.dark-mode .text-gray-600 {
    color: #9090a0 !important;
}

body.dark-mode .text-gray-500 {
    color: #707080 !important;
}

body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300 {
    border-color: #2d2d44 !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
    border-color: #2d2d44 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #707080 !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: #667eea !important;
}

body.dark-mode .shadow-xl,
body.dark-mode .shadow-lg,
body.dark-mode .shadow-2xl {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode nav {
    background-color: #16213e !important;
    border-bottom: 1px solid #2d2d44 !important;
}

/* Preserve gradient backgrounds in dark mode */
body.dark-mode .gradient-bg,
body.dark-mode .bg-gradient-to-r,
body.dark-mode .bg-gradient-to-br {
    /* Keep gradients as they are */
}

/* Card backgrounds */
body.dark-mode .stat-card,
body.dark-mode .appointment-card,
body.dark-mode .benefit-card {
    background-color: #16213e !important;
}

/* Message bubbles */
body.dark-mode .message-bubble {
    background-color: #2d2d44 !important;
}

/* Chat interface specific */
body.dark-mode #chatMessages {
    background-color: #0f1419 !important;
}

body.dark-mode .chat-bubble .bg-gray-200 {
    background-color: #2d2d44 !important;
}

/* Buttons that should stay light */
body.dark-mode button.bg-gradient-to-r,
body.dark-mode .bg-gradient-to-r {
    /* Keep gradient buttons as they are */
}

/* Sidebar for admin panel */
body.dark-mode .sidebar {
    background-color: #16213e !important;
}

body.dark-mode .sidebar-item {
    color: #b0b0b0 !important;
}

body.dark-mode .sidebar-item:hover,
body.dark-mode .sidebar-item.active {
    background-color: rgba(102, 126, 234, 0.2) !important;
    color: #e0e0e0 !important;
}

/* Tables */
body.dark-mode table {
    background-color: #16213e !important;
}

body.dark-mode th {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
}

body.dark-mode td {
    border-color: #2d2d44 !important;
    color: #b0b0b0 !important;
}

body.dark-mode tr:hover {
    background-color: #1a1a2e !important;
}

/* Alerts and notifications */
body.dark-mode .bg-yellow-100 {
    background-color: #3a3a2e !important;
}

body.dark-mode .bg-red-100 {
    background-color: #3a2e2e !important;
}

body.dark-mode .bg-green-100 {
    background-color: #2e3a2e !important;
}

body.dark-mode .bg-blue-100 {
    background-color: #2e2e3a !important;
}

/* Preserve important text colors */
body.dark-mode .text-red-500,
body.dark-mode .text-red-600,
body.dark-mode .text-red-700 {
    color: #ff6b6b !important;
}

body.dark-mode .text-green-500,
body.dark-mode .text-green-600 {
    color: #51cf66 !important;
}

body.dark-mode .text-yellow-500,
body.dark-mode .text-yellow-600 {
    color: #ffd93d !important;
}

body.dark-mode .text-blue-500,
body.dark-mode .text-blue-600 {
    color: #4dabf7 !important;
}

body.dark-mode .text-purple-500,
body.dark-mode .text-purple-600 {
    color: #9775fa !important;
}

/* Glass effect in dark mode */
body.dark-mode .glass-effect {
    background: rgba(22, 33, 62, 0.7) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Smooth transition for dark mode */
body,
body * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Prevent transition on buttons and animations */
button,
.animate-pulse,
.animate-spin {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}