/* Dark/Light Mode Styles */
:root[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #1a1a2e;
    --text-secondary: #666666;
    --border-color: #e5e7eb;
    --card-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

:root[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #0f0f1e;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-color: #333333;
    --card-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Apply theme colors */
body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

.sidebar {
    background: #1a1a2e !important;
}

.card, .chart-card, .cluster-card, .schedule-card, .gap-card, .backlink-item, .comparison-card, .tool-card, .stat-card, .project-card, .settings-card, .form-card, .hero, .stat-box {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--card-shadow);
    border-color: var(--border-color);
}

.table {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table thead {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.table tbody tr {
    border-color: var(--border-color);
}

.form-control, .form-select, textarea {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.form-control:focus, .form-select:focus {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: #4361ee;
}

input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"] {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.alert {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.modal-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.modal-header {
    border-color: var(--border-color);
}

.nav-bar {
    background: var(--bg-secondary);
}

.top-bar {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.header {
    background: var(--bg-primary);
}

.text-muted {
    color: var(--text-secondary) !important;
}

#themeToggleBtn {
    transition: transform 0.3s;
}

#themeToggleBtn:hover {
    transform: rotate(20deg);
}