/* Theme variables */
:root {
    /* Light mode (default) */
    --bg-color: #ffffff;
    --text-color: #000000;
    --primary-color: #4a90e2;
    --secondary-color: #f5f5f5;
    --border-color: #e0e0e0;
    --node-color: #ffffff;
    --node-text-color: #0f0f0f;
    --node-border-color: rgba(255, 255, 255, 0.87);
    --line-color: rgba(74, 144, 226, 0.6);
    --popup-bg: #ffffff;
    --popup-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --button-bg: #4CAF50;
    --button-text: #ffffff; /* White text for buttons in light mode */
    --button-hover: #45a049;
    --error-color: #e74c3c;
    --success-color: #2ecc71;
    --header-bg: #f8f8f8bb;
    --canvas-bg: #ffffff;
    
    /* Transitions */
    --node-color-transition: 0.5s ease;
    --node-text-transition: 0.5s ease;
    --node-border-transition: 0.5s ease;
}

/* Dark theme variables */
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --primary-color: #61dafb;
    --secondary-color: #333333;
    --border-color: #444444;
    --node-color: #000000;
    --node-text-color: #ffffff;
    --node-border-color: rgb(0, 0, 0);
    --line-color: rgba(97, 218, 251, 0.6);
    --popup-bg: #2a2a2a;
    --popup-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    /* Keep button colors consistent in both themes */
    --button-bg: #4CAF50;
    --button-text: #000000; /* Black text for buttons in dark mode */
    --button-hover: #45a049;
    --error-color: #ff6b6b;
    --success-color: #5cdb95;
    --header-bg: #222222;
    --canvas-bg: #1a1a1a;
}

/* Apply theme to elements */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.5s ease, color 0.5s ease;
}

.header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

/* Auth buttons styling */
.auth-button, 
#loginButton, 
#logoutButton {
    background-color: var(--button-bg);
    color: var(--button-text);
    transition: background-color 0.3s ease;
}

.auth-button:hover, 
#loginButton:hover, 
#logoutButton:hover {
    background-color: var(--button-hover);
}

/* Welcome text styling */
#authSection .welcome-text {
    color: var(--text-color);
    transition: color 0.5s ease;
}

#webCanvas {
    background-color: var(--canvas-bg);
    transition: background-color 0.5s ease;
}

.popup, .login-popup {
    background-color: var(--popup-bg);
    box-shadow: var(--popup-shadow);
    color: var(--text-color);
    transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

button {
    background-color: var(--button-bg);
    color: var(--button-text);
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: var(--button-hover);
}

input, textarea, select {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* Theme toggle button styles */
.theme-toggle-container {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    transition: background-color 0.3s ease;
}

.theme-toggle:hover {
    background-color: var(--border-color);
}

.theme-icon {
    width: 18px;
    height: 18px;
    fill: var(--text-color);
}

.sun-icon {
    display: none;
}

.moon-icon {
    display: block;
}

.theme-toggle.dark-mode .sun-icon {
    display: block;
}

.theme-toggle.dark-mode .moon-icon {
    display: none;
}


/* Sidebar theming */
.sidebar {
    background-color: var(--popup-bg);
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    color: var(--text-color);
    border-left: 1px solid var(--border-color);
    transition: transform 0.5s ease, background-color 0.5s ease, color 0.5s ease;
}

.sidebar h2 {
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}