/* Dark mode styles for WhichGPT */

/* Base dark mode variables */
body.dark-mode {
    --bg-color: #0a0a0a;
    --text-color: #e0e0e0;
    --card-bg: #1a1a1a;
    --border-color: #333;
    --hover-color: #2a2a2a;
    --primary-color: #4a9eff;
    --secondary-color: #666;
}

/* Main background and text */
body.dark-mode {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Cards */
body.dark-mode .card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .card:hover {
    background-color: var(--hover-color);
    border-color: #444;
}

/* Vendor groups */
body.dark-mode .vendor-group h2 a {
    color: var(--text-color);
}

body.dark-mode .vendor-group h2 a:hover {
    color: var(--primary-color);
}

/* Pills/Filters */
body.dark-mode .pill {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .pill:hover {
    background-color: var(--hover-color);
    border-color: #444;
}

body.dark-mode .pill.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Search input */
body.dark-mode .search-input {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .search-input:focus {
    border-color: var(--primary-color);
    background-color: #222;
}

body.dark-mode .search-input::placeholder {
    color: #666;
}

/* Tooltips */
body.dark-mode .tooltip {
    background-color: #222;
    border-color: #444;
    color: var(--text-color);
}

body.dark-mode .tooltip::before {
    border-bottom-color: #222;
}

/* Floating panels */
body.dark-mode .floating-panel {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .floating-btn {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .floating-btn:hover {
    background-color: var(--hover-color);
    border-color: #444;
}

/* Legend items */
body.dark-mode .legend-item {
    background-color: transparent;
    border-color: var(--border-color);
}

body.dark-mode .legend-item:hover {
    background-color: var(--hover-color);
}

body.dark-mode .legend-item.active {
    background-color: var(--hover-color);
    border-color: var(--primary-color);
}

/* Tags */
body.dark-mode .tag {
    background-color: #333;
    color: #aaa;
}

/* Info icons */
body.dark-mode .info-icon {
    color: #666;
}

body.dark-mode .info-icon:hover {
    color: #999;
}

/* No results message */
body.dark-mode .no-results {
    background-color: var(--card-bg);
    color: var(--text-color);
}

/* Highlight */
body.dark-mode .highlight {
    background-color: rgba(74, 158, 255, 0.3);
    color: white;
}

/* Compare elements */
body.dark-mode .compare-container {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .compare-panel {
    background-color: var(--card-bg);
}

body.dark-mode .compare-table {
    background-color: #0a0a0a;
}

body.dark-mode .compare-table th {
    background-color: #1a1a1a;
    color: var(--text-color);
}

body.dark-mode .compare-table td {
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Dark mode toggle in header */
body.dark-mode h1 .dark-mode-toggle {
    color: #ccc;
}

body.dark-mode h1 .dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Change icon when dark mode is active */
body.dark-mode .dark-mode-toggle i::before {
    content: "\f185"; /* sun icon */
}