/* Common Theme Variables and Styles */
:root {
    --bg-primary: #f5f5f5;
    --bg-secondary: white;
    --bg-tertiary: #f8f9fa;
    --bg-quaternary: #f9f9f9;
    --bg-hover: #e9ecef;
    --text-primary: #333;
    --text-secondary: #555;
    --text-tertiary: #666;
    --text-muted: #999;
    --border-color: #ddd;
    --border-light: #eee;
    --border-medium: #f0f0f0;
    --table-hover: #f0f0f0;
    --table-stripe: #f9f9f9;
    --shadow-color: rgba(0,0,0,0.1);
    --shadow-hover: rgba(0,0,0,0.15);
    --intel-blue: #0071C5;
    --intel-blue-hover: #005a9f;
    --intel-blue-dark: #004080;
    --success-color: #28a745;
    --success-light: #d4edda;
    --success-dark: #155724;
    --success-bright: #90EE90;
    --error-color: #dc3545;
    --error-light: #f8d7da;
    --error-dark: #721c24;
    --error-bright: #FFB6C1;
    --warning-color: #856404;
    --warning-light: #fff3cd;
    --warning-bright: #FFD700;
    --info-color: #6c757d;
    --info-hover: #5a6268;
    --log-bg: #2d3748;
    --log-text: #e2e8f0;
}

[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-quaternary: #333;
    --bg-hover: #4a4a4a;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #999;
    --text-muted: #666;
    --border-color: #444;
    --border-light: #555;
    --border-medium: #4a4a4a;
    --table-hover: #3a3a3a;
    --table-stripe: #333;
    --shadow-color: rgba(0,0,0,0.3);
    --shadow-hover: rgba(0,0,0,0.5);
    --intel-blue: #4da3ff;
    --intel-blue-hover: #3d8cdd;
    --intel-blue-dark: #2a75c9;
    --success-color: #4caf50;
    --success-light: #2d4a2f;
    --success-dark: #a5d6a7;
    --success-bright: #66bb6a;
    --error-color: #f44336;
    --error-light: #4a2d2f;
    --error-dark: #ffcdd2;
    --error-bright: #ef5350;
    --warning-color: #ffb300;
    --warning-light: #4a3d1f;
    --warning-bright: #ffd54f;
    --info-color: #90a4ae;
    --info-hover: #78909c;
    --log-bg: #1e1e1e;
    --log-text: #d4d4d4;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --bg-tertiary: #3a3a3a;
        --bg-quaternary: #333;
        --bg-hover: #4a4a4a;
        --text-primary: #e0e0e0;
        --text-secondary: #b0b0b0;
        --text-tertiary: #999;
        --text-muted: #666;
        --border-color: #444;
        --border-light: #555;
        --border-medium: #4a4a4a;
        --table-hover: #3a3a3a;
        --table-stripe: #333;
        --shadow-color: rgba(0,0,0,0.3);
        --shadow-hover: rgba(0,0,0,0.5);
        --intel-blue: #4da3ff;
        --intel-blue-hover: #3d8cdd;
        --intel-blue-dark: #2a75c9;
        --success-color: #4caf50;
        --success-light: #2d4a2f;
        --success-dark: #a5d6a7;
        --success-bright: #66bb6a;
        --error-color: #f44336;
        --error-light: #4a2d2f;
        --error-dark: #ffcdd2;
        --error-bright: #ef5350;
        --warning-color: #ffb300;
        --warning-light: #4a3d1f;
        --warning-bright: #ffd54f;
        --info-color: #90a4ae;
        --info-hover: #78909c;
        --log-bg: #1e1e1e;
        --log-text: #d4d4d4;
    }
}

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: bold;
    color: var(--text-primary);
    box-shadow: 0 2px 8px var(--shadow-color);
    z-index: 1000;
}

.theme-toggle:hover {
    box-shadow: 0 4px 12px var(--shadow-color);
}

.theme-icon {
    font-size: 18px;
}