/**
 * Yes or No Wheel Styles
 * Overrides for the Yes/No decision spinner wheel
 * Base styles come from spinner-wheel.css
 */

/* Dark background for Yes/No wheel */
.yes-no-app {
    background: #151b2d;
}

.yes-no-app.light-mode {
    --bg-main: #151b2d;
    --bg-sidebar: #1a2235;
    --bg-card: #1f2840;
    --bg-input: #2a3550;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.3);
}

.yes-no-app.dark-mode {
    --bg-main: #0a0d14;
    --bg-sidebar: #12161f;
    --bg-card: #181d28;
    --bg-input: #222836;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* Sidebar styling for dark theme */
.yes-no-app .sidebar {
    background: var(--bg-sidebar);
}

.yes-no-app .sidebar-section {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.yes-no-app .section-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Wheel main area */
.yes-no-app .wheel-main {
    background: var(--bg-main);
}

.yes-no-app .wheel-title h1 {
    color: #ffffff;
}

.yes-no-app .wheel-title p {
    color: rgba(255, 255, 255, 0.7);
}

/* Control buttons */
.yes-no-app .control-btn {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: rgba(255, 255, 255, 0.8);
}

.yes-no-app .control-btn:hover {
    background: var(--brand-primary);
    color: var(--brand-dark);
    border-color: var(--brand-primary);
}

.yes-no-app .control-btn::after {
    background: var(--bg-card);
    color: #ffffff;
    border-color: var(--border-color);
}

/* Stats and results */
.yes-no-app .stat-item {
    background: var(--bg-input);
}

.yes-no-app .stat-item:hover {
    background: rgba(255, 190, 77, 0.15);
}

.yes-no-app .result-item {
    background: var(--bg-input);
}

.yes-no-app .result-item:hover {
    background: rgba(255, 190, 77, 0.15);
}

/* Settings */
.yes-no-app .setting-item {
    background: var(--bg-input);
    border-color: var(--border-color);
}

.yes-no-app .setting-item:hover {
    border-color: rgba(255, 190, 77, 0.3);
}

.yes-no-app .setting-toggle-item {
    background: var(--bg-input);
    border-color: var(--border-color);
}

.yes-no-app .setting-toggle-item:hover {
    border-color: rgba(255, 190, 77, 0.3);
    background: var(--bg-card);
}

.yes-no-app .setting-toggle-item.active {
    border-color: var(--brand-primary);
    background: rgba(255, 190, 77, 0.1);
}

.yes-no-app .setting-toggle-icon {
    background: var(--bg-card);
}

.yes-no-app .duration-btn {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: rgba(255, 255, 255, 0.7);
}

.yes-no-app .duration-btn:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-dark);
}

/* Buttons */
.yes-no-app .btn-clear {
    border-color: var(--border-color);
    color: rgba(255, 255, 255, 0.7);
}

.yes-no-app .btn-clear:hover {
    background: rgba(255, 190, 77, 0.1);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* Mobile toggles */
.yes-no-app .mobile-toggle {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: #ffffff;
}

.yes-no-app .mobile-toggle:hover {
    background: var(--brand-primary);
    color: var(--brand-dark);
}

/* Right sidebar adjustments - Settings section takes full space since no Entries */
.yes-no-app .sidebar-right .settings-section {
    flex: 1;
}

/* Make the single toggle centered and larger */
.yes-no-app .setting-toggles-row {
    justify-content: center;
}

.yes-no-app .setting-toggles-row .setting-toggle-item {
    flex: 0 0 auto;
    min-width: 120px;
}