/* Theme system for the ranking dashboard */
:root {
    --page-bg: #2f2d2d;
    --page-text: #ffffff;
    --page-text-muted: #d7d7d7;
    --page-border: #555555;
    --panel-bg: #1e1e1e;
    --panel-soft: #181818;
    --panel-soft-2: #1a1a1a;
    --panel-heading: #ffffff;
    --table-border: #2d2d2d;
    --search-bg: #1e1e1e;
    --search-text: #ffffff;
    --search-border: #ff4d4d;
    --chip-bg: #1e1e1e;
    --chip-text: #d7d7d7;
    --chip-active-bg: var(--accent);
    --chip-active-text: #121212;
    --period-bg: #1e1e1e;
    --period-text: #ff9f43;
    --period-border: #ff9f43;
    --period-active-bg: #ff9f43;
    --period-active-text: #121212;
    --recommendation-bg: #1e1e1e;
    --recommendation-hover-bg: #172b42;
    --recommendation-border: #2b6cb0;
    --accent: #2b6cb0;
    --accent-hover: #1e4e80;
    --accent-soft: rgba(43, 108, 176, 0.12);
    --accent-text: #ffffff;
    --ad-bg: #1a1a1a;
    --ad-text: #777777;
    --shadow: rgba(0, 0, 0, 0.4);
    --control-bg: #f8fafc;
    --control-text: #2d3748;
    --control-border: #e2e8f0;
    --empty-state: #a0a0a0;
}

.search-bar {
    border: 2px solid #060606; /* Red Accent */
    background-color: #1e1e1e;
}

.search-bar[data-theme="light"] {
    border: 2px solid #000; /* Red Accent */
    background-color: #000;
}

body[data-theme="light"] {
    --page-bg: #ffffff;
    --page-text: #1a202c;
    --page-text-muted: #4a5568;
    --page-border: #cbd5e0;
    --panel-bg: #ffffff;
    --panel-soft: #edf2f7;
    --panel-soft-2: #f8fafc;
    --panel-heading: #1a202c;
    --table-border: #cbd5e0;
    --search-bg: #ffffff;
    --search-text: #1a202c;
    --search-border: #c53030;
    --chip-bg: #ffffff;
    --chip-text: #2d3748;
    --chip-active-bg: var(--accent);
    --chip-active-text: #ffffff;
    --period-bg: #ffffff;
    --period-text: #c53030;
    --period-border: #c53030;
    --period-active-bg: #c53030;
    --period-active-text: #ffffff;
    --recommendation-bg: #edf2f7;
    --recommendation-hover-bg: #dbeafe;
    --recommendation-border: var(--accent);
    --accent-hover: #1e4e80;
    --accent-soft: rgba(43, 108, 176, 0.1);
    --accent-text: #ffffff;
    --ad-bg: #f8fafc;
    --ad-text: #4a5568;
    --shadow: rgba(0, 0, 0, 0.08);
    --control-bg: #f8fafc;
    --control-text: #2d3748;
    --control-border: #cbd5e0;
    --empty-state: #4a5568;
}

body[data-accent="green"] {
    --accent: #129898;
    --accent-hover: #129898;
    --accent-soft: rgba(47, 133, 90, 0.14);
    --accent-text: #ffffff;
    --recommendation-border: #129898;
    --recommendation-hover-bg: #173b2b;
    --chip-active-bg: #129898;
}

body[data-theme="light"][data-accent="green"] {
    --recommendation-hover-bg: #129898;
    --accent-soft: rgba(47, 133, 90, 0.1);
}

.page-title {
    color: var(--page-text);
}

body {
    background-color: var(--page-bg);
    color: var(--page-text);
}

body[data-theme="light"] .content {
    background-color: var(--panel-bg);
    color: var(--page-text);
}

body[data-theme="light"] .search-bar {
    background-color: var(--search-bg);
    color: var(--search-text);
}

body[data-theme="light"] .category-chip {
    background-color: var(--chip-bg);
    color: var(--chip-text);
}

body[data-theme="light"] .category-chip:hover,
body[data-theme="light"] .category-chip.active {
    background-color: var(--chip-active-bg);
    color: var(--chip-active-text);
}

body[data-theme="light"] .recommendation-item {
    background-color: var(--recommendation-bg);
}

body[data-theme="light"] .recommendation-item:hover {
    background-color: var(--recommendation-hover-bg);
}

body[data-theme="light"] .period-btn {
    background-color: var(--period-bg);
    color: var(--period-text);
    border-color: var(--period-border);
    overflow-x: auto;
}

body[data-theme="light"] .period-btn:hover,
body[data-theme="light"] .period-btn.active {
    background-color: var(--period-active-bg);
    color: var(--period-active-text);
}

body[data-theme="light"] .rank-display {
    background-color: var(--panel-bg);
}

body[data-theme="light"] .rank-table th,
body[data-theme="light"] .rank-table td {
    border-color: var(--table-border);
}

body[data-theme="light"] .rank-table th {
    color: var(--chip-active-bg);
}

body[data-theme="light"] .ad {
    background-color: var(--ad-bg);
    color: var(--ad-text);
}

.main-bar {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--page-border);
    background-color: var(--panel-bg);
    color: var(--page-text);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.appearance-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.accent-options {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.accent-swatch {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid var(--panel-bg);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--page-border);
    cursor: pointer;
}

.accent-swatch[data-accent-value="green"] { background: #129898; }
.accent-swatch[data-accent-value="blue"] { background: #2b6cb0; }

.accent-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--page-text);
}

.accent-swatch:focus-visible,
.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .appearance-controls { gap: 7px; }
    .accent-options { gap: 5px; }
}

.theme-toggle:hover {
    transform: translateY(-2px);
}

.theme-toggle .theme-icon {
    font-size: 16px;
}

.theme-toggle .theme-label {
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}