/**
 * Dark Mode Styles
 * Smooth transition between light and dark themes
 */

[data-theme="dark"] {
    /* Dark Mode Color Palette */
    --bg-primary: #1e1e2e;
    --bg-secondary: #2a2a3e;
    --shadow-light: #2a2a3e;
    --shadow-dark: #151521;
    --text-primary: #e2e8f0;
    --text-secondary: #a0aec0;
    --accent-color: #9f7aea;
    --accent-gradient: linear-gradient(135deg, #9f7aea 0%, #667eea 100%);
}

/* Dark Mode Specific Adjustments */
[data-theme="dark"] body {
    background-color: #1a1a2e;
}

[data-theme="dark"] .navbar {
    background: rgba(30, 30, 46, 0.95);
    border-bottom: 1px solid rgba(42, 42, 62, 0.3);
}

[data-theme="dark"] .neuro-card {
    background: var(--bg-primary);
}

[data-theme="dark"] .neuro-button {
    background: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .neuro-input,
[data-theme="dark"] .neuro-textarea {
    background: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .neuro-input::placeholder,
[data-theme="dark"] .neuro-textarea::placeholder {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer {
    background: var(--bg-secondary);
}

[data-theme="dark"] .modal {
    background: rgba(0, 0, 0, 0.9);
}

[data-theme="dark"] .skill-tag {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .portfolio-overlay {
    background: linear-gradient(to top, rgba(30, 30, 46, 0.9), transparent);
}

/* Theme Toggle Button */
.theme-toggle {
    position: relative;
    width: 60px;
    height: 30px;
}

.toggle-checkbox {
    display: none;
}

.toggle-label {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    border-radius: 30px;
    box-shadow: var(--shadow-inset);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.toggle-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: var(--bg-primary);
    border-radius: 50%;
    box-shadow: var(--shadow-neuro-sm);
    transition: all var(--transition-normal);
}

.toggle-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    transition: opacity var(--transition-fast);
}

.toggle-icon.sun {
    left: 8px;
    opacity: 1;
}

.toggle-icon.moon {
    right: 8px;
    opacity: 0.3;
}

.toggle-checkbox:checked ~ .toggle-label .toggle-slider {
    left: calc(100% - 27px);
    background: var(--accent-gradient);
}

.toggle-checkbox:checked ~ .toggle-label .sun {
    opacity: 0.3;
}

.toggle-checkbox:checked ~ .toggle-label .moon {
    opacity: 1;
}

/* Smooth Transition for Theme Change */
* {
    transition: background-color var(--transition-normal), 
                color var(--transition-normal),
                border-color var(--transition-normal),
                box-shadow var(--transition-normal);
}

/* Override for elements that shouldn't transition */
a,
button,
.neuro-button,
.hero-buttons *,
.portfolio-image,
.team-photo {
    transition: all var(--transition-fast);
}

/* Dark Mode Code Blocks */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: var(--bg-secondary);
    color: #8be9fd;
}

/* Dark Mode Scrollbar */
[data-theme="dark"]::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

[data-theme="dark"]::-webkit-scrollbar-thumb {
    background: var(--accent-color);
}

/* Dark Mode Select Arrow */
[data-theme="dark"] .neuro-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0aec0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

/* Dark Mode Links */
[data-theme="dark"] a:hover {
    color: var(--accent-color);
}

/* Dark Mode Images - Reduce brightness slightly */
[data-theme="dark"] img {
    filter: brightness(0.9);
    transition: filter var(--transition-normal);
}

[data-theme="dark"] img:hover {
    filter: brightness(1);
}

/* Dark Mode Chat Widget */
[data-theme="dark"] .chat-window {
    background: var(--bg-primary);
    border-color: var(--shadow-dark);
}

[data-theme="dark"] .chat-message.visitor {
    background: var(--bg-secondary);
}

[data-theme="dark"] .chat-message.admin {
    background: var(--accent-gradient);
    color: white;
}