/* Dark Theme (Default) */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-card: #333333;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --border-color: #444444;
    --accent-color: #667eea;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
}

/* White Theme */
[data-theme="white"] {
    --bg-primary: #f5f7fa;
    --bg-secondary: #e9ecef;
    --bg-card: #ffffff;
    --text-primary: #2c3e50;
    --text-secondary: #5a6c7d;
    --border-color: #d1d9e0;
    --accent-color: #3498db;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
}

/* White theme specific overrides */
[data-theme="white"] .btn {
    color: #ffffff;
}

[data-theme="white"] .btn-secondary {
    color: #ffffff;
}

[data-theme="white"] .package-status.active {
    color: #ffffff;
}

[data-theme="white"] .package-status.inactive {
    color: #ffffff;
}

/* White theme navbar overrides */
[data-theme="white"] .navbar {
    background: var(--bg-secondary);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

[data-theme="white"] .navbar .logo {
    color: var(--text-primary);
}

[data-theme="white"] .navbar .nav-links a {
    color: var(--text-primary);
}

[data-theme="white"] .navbar .nav-links a:hover {
    background: var(--accent-color);
    color: white;
}

[data-theme="white"] .navbar .nav-links a.active {
    background: var(--accent-color);
    color: white;
}

/* Rainbow Theme */
[data-theme="rainbow"] {
    --bg-primary: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
    --bg-secondary: rgba(255, 255, 255, 0.1);
    --bg-card: rgba(255, 255, 255, 0.15);
    --text-primary: #ffffff;
    --text-secondary: #f0f0f0;
    --border-color: rgba(255, 255, 255, 0.2);
    --accent-color: #ffffff;
    --success-color: #00ff88;
    --danger-color: #ff4757;
    --warning-color: #ffa502;
}

/* Apply theme variables */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

/* Navbar theme overrides */
.navbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.navbar .logo {
    color: var(--text-primary);
}

.navbar .nav-links a {
    color: var(--text-primary);
}

.navbar .nav-links a:hover {
    background: var(--accent-color);
    color: white;
}

.navbar .nav-links a.active {
    background: var(--accent-color);
    color: white;
}

/* Text elements */
h1, h2, h3, h4, h5, h6, p, span, div, label, small, strong {
    color: var(--text-primary);
}

a {
    color: var(--accent-color);
}

.navbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.navbar .logo, .navbar .nav-links a {
    color: var(--text-primary);
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.card-title, .card-header {
    color: var(--text-primary);
}

.form-control {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-secondary);
}

.form-label {
    color: var(--text-primary);
}

.btn {
    color: #ffffff;
}

.btn-primary {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-success {
    background: var(--success-color);
    border-color: var(--success-color);
}

.btn-danger {
    background: var(--danger-color);
    border-color: var(--danger-color);
}

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

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

.alert-success {
    background: var(--success-color);
    border-color: var(--success-color);
}

.alert-error {
    background: var(--danger-color);
    border-color: var(--danger-color);
}

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

.bot-item, .log-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.bot-status {
    color: var(--text-primary);
}

table, th, td {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Package management specific styling */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.package-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    color: var(--text-primary);
}

.package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.package-status {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.package-status.active {
    background: var(--success-color);
    color: white;
}

.package-status.inactive {
    background: var(--text-secondary);
    color: white;
}

.package-details {
    margin: 1rem 0;
}

.package-details div {
    margin: 0.25rem 0;
    color: var(--text-primary);
}

.package-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Rainbow theme specific fixes */
[data-theme="rainbow"] .package-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[data-theme="rainbow"] .package-card h4,
[data-theme="rainbow"] .package-details div,
[data-theme="rainbow"] .package-card p {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Advanced Role Effects */
.role-rainbow-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbow-text 3s ease infinite;
}

.role-rainbow-border {
    border: 2px solid;
    border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57) 1;
    animation: rainbow-border 2s linear infinite;
    padding: 2px 6px;
    border-radius: 4px;
}

.role-glow-border {
    border: 2px solid;
    padding: 2px 6px;
    border-radius: 4px;
    animation: glow-pulse 2s ease-in-out infinite;
}

.role-static-border {
    border: 2px solid;
    padding: 2px 6px;
    border-radius: 4px;
}

@keyframes rainbow-text {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes rainbow-border {
    0% { border-image-source: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57); }
    25% { border-image-source: linear-gradient(45deg, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff6b6b); }
    50% { border-image-source: linear-gradient(45deg, #45b7d1, #96ceb4, #feca57, #ff6b6b, #4ecdc4); }
    75% { border-image-source: linear-gradient(45deg, #96ceb4, #feca57, #ff6b6b, #4ecdc4, #45b7d1); }
    100% { border-image-source: linear-gradient(45deg, #feca57, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4); }
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 5px currentColor; }
    50% { box-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
}

/* Install tag styling */
.install-tag {
    background: linear-gradient(45deg, #007bff, #00d4ff, #0099ff, #007bff);
    background-size: 400% 400%;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    margin-left: 8px;
    animation: rainbow-blue 3s ease infinite;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
    display: inline-block;
}

@keyframes rainbow-blue {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 200% 50%; }
    75% { background-position: 300% 50%; }
}

/* Browser URL links */
.browser-url {
    color: #007bff;
    text-decoration: none;
    font-family: monospace;
    background: rgba(0, 123, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(0, 123, 255, 0.2);
    transition: all 0.3s ease;
}

.browser-url:hover {
    background: rgba(0, 123, 255, 0.2);
    border-color: #007bff;
    text-decoration: none;
}

/* Rainbow theme special effects */
[data-theme="rainbow"] body {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
    background-size: 400% 400%;
    animation: rainbow-bg 10s ease infinite;
}

[data-theme="rainbow"] .card {
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Rainbow theme navbar overrides */
[data-theme="rainbow"] .navbar {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="rainbow"] .navbar .logo,
[data-theme="rainbow"] .navbar .nav-links a {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[data-theme="rainbow"] .navbar .nav-links a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

[data-theme="rainbow"] .navbar .nav-links a.active {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* Sidebar theme overrides */
[data-theme="white"] #nav-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="white"] #nav-header::before {
    background: var(--bg-secondary);
}

[data-theme="white"] .nav-button:hover {
    color: var(--accent-color);
    background: rgba(52, 152, 219, 0.1);
}

[data-theme="rainbow"] #nav-bar {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="rainbow"] #nav-header::before {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="rainbow"] #nav-title,
[data-theme="rainbow"] .nav-button {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[data-theme="rainbow"] .nav-button:hover {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="rainbow"] .nav-button.active {
    color: white;
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="rainbow"] #nav-toggle-burger,
[data-theme="rainbow"] #nav-toggle-burger::before,
[data-theme="rainbow"] #nav-toggle-burger::after {
    background: white;
}

[data-theme="rainbow"] #nav-footer {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

[data-theme="rainbow"] #nav-footer-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="rainbow"] #nav-footer-content {
    color: rgba(255, 255, 255, 0.9);
    border-top-color: rgba(255, 255, 255, 0.3);
}

[data-theme="white"] #nav-footer {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="white"] #nav-footer-subtitle {
    color: var(--text-secondary);
}

[data-theme="white"] #nav-footer-content {
    color: var(--text-secondary);
    border-top-color: var(--border-color);
}

@keyframes rainbow-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Theme selector */
.theme-selector {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    gap: 10px;
}

.theme-btn {
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
}

.theme-btn:hover {
    transform: scale(1.1);
}

.theme-btn.dark {
    background: #1a1a1a;
}

.theme-btn.white {
    background: #ffffff;
}

.theme-btn.rainbow {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
}