/* Custom Color Scheme for Site Integration */

:root {
    /* Main colors */
    --custom-white: #fff;
    --custom-yellow: #FFBF00;
    --custom-purple: #6B32E5;
    --custom-light-blue: #C9DAFC;
    --custom-black: #000;
    
    /* Override existing color variables */
    --bg-primary: var(--custom-white);
    --bg-secondary: var(--custom-light-blue);
    --surface-color: var(--custom-white);
    --text-primary: var(--custom-black);
    --text-secondary: var(--custom-black);
    --text-muted: rgba(0, 0, 0, 0.6);
    --accent-color: var(--custom-purple);
    --accent-hover: var(--custom-yellow);
    --border-color: rgba(0, 0, 0, 0.1);
    --hover-color: var(--custom-light-blue);
    --success-color: var(--custom-purple);
    --warning-color: var(--custom-yellow);
    --error-color: #dc2626;
}

/* Force white background */
body {
    background: var(--custom-white) !important;
    color: var(--custom-black) !important;
}

/* Container and main layout */
.container {
    background: var(--custom-white);
}

.app-layout {
    background: var(--custom-white);
}

.main {
    background: var(--custom-white);
}

.sidebar {
    background: var(--custom-white);
}

/* Topbar styling */
.topbar {
    background: var(--custom-white);
    border-bottom: 2px solid var(--custom-light-blue);
    color: var(--custom-black);
}

.brand {
    color: var(--custom-black) !important;
}

.brand i {
    color: var(--custom-purple) !important;
}

/* Buttons and interactive elements */
.mode-btn {
    background: var(--custom-white);
    color: var(--custom-black);
    border: 2px solid var(--custom-light-blue);
}

.mode-btn.active {
    background: var(--custom-purple);
    color: white;
    border-color: var(--custom-purple);
}

.mode-btn:hover {
    background: var(--custom-light-blue);
    border-color: var(--custom-purple);
}

.submit-btn {
    background: var(--custom-purple);
    color: white;
    border: none;
}

.submit-btn:hover {
    background: var(--custom-yellow);
    color: var(--custom-black);
}

/* Theme and language toggles */
.theme-toggle {
    display: none !important; /* Hide theme toggle since we want consistent light theme */
}

.language-toggle {
    background: var(--custom-white);
    color: var(--custom-black);
    border: 2px solid var(--custom-light-blue);
}

.language-toggle:hover {
    background: var(--custom-light-blue);
    border-color: var(--custom-purple);
}

/* Input fields */
.card-input {
    background: var(--custom-white);
    color: var(--custom-black);
    border: 2px solid var(--custom-light-blue);
}

.card-input:focus {
    border-color: var(--custom-purple);
    box-shadow: 0 0 0 3px rgba(107, 50, 229, 0.1);
}

/* Card picker button */
.card-picker-btn {
    background: var(--custom-light-blue);
    color: var(--custom-black);
    border: 2px solid var(--custom-light-blue);
}

.card-picker-btn:hover {
    background: var(--custom-purple);
    color: white;
    border-color: var(--custom-purple);
}

/* Game select dropdown */
#game-select {
    background: var(--custom-white);
    color: var(--custom-black);
    border: 2px solid var(--custom-light-blue);
}

#game-select:focus {
    border-color: var(--custom-purple);
}

/* Panels and cards */
.panel {
    background: var(--custom-white);
    border: 2px solid var(--custom-light-blue);
    color: var(--custom-black);
}

.result-card {
    background: var(--custom-white);
    border: 2px solid var(--custom-light-blue);
}

/* Help section */
.help-section summary {
    color: var(--custom-black);
}

.help-section details[open] summary {
    color: var(--custom-purple);
}

.notation-grid {
    background: var(--custom-white) !important;
}

.notation-item {
    background: var(--custom-yellow) !important;
    color: var(--custom-black) !important;
    border: 2px solid var(--custom-light-blue) !important;
}

.help-content {
    background: var(--custom-white) !important;
    color: var(--custom-black) !important;
}

.help-content h4 {
    color: var(--custom-black) !important;
}

.help-content ul li {
    color: var(--custom-black) !important;
}

.help-content code {
    background: var(--custom-light-blue) !important;
    color: var(--custom-black) !important;
}

/* Results styling */
.result-label {
    color: var(--custom-black);
    font-weight: 600;
}

.result-value {
    color: var(--custom-black);
}

.text-success {
    color: var(--custom-purple) !important;
}

/* Comparison results */
.comparison-hand {
    background: var(--custom-white);
    border: 2px solid var(--custom-light-blue);
}

.comparison-hand.winner {
    border-color: var(--custom-yellow);
    background: rgba(255, 191, 0, 0.1);
}

.winner-announcement {
    background: var(--custom-purple);
    color: white;
}

/* Equity visualization */
.equity-segment.hand1 {
    background: var(--custom-purple);
}

.equity-segment.hand2 {
    background: var(--custom-yellow);
}

.equity-stat-card {
    background: var(--custom-white);
    border: 2px solid var(--custom-light-blue);
    color: var(--custom-black);
}

.equity-stat-card.winner {
    border-color: var(--custom-yellow);
    background: rgba(255, 191, 0, 0.1);
}

/* Card selector modal */
.card-selector-modal {
    background: var(--custom-white);
    border: 2px solid var(--custom-light-blue);
}

.card-selector-header {
    background: var(--custom-light-blue);
    color: var(--custom-black);
}

.card-selector-info {
    background: var(--custom-yellow) !important;
    color: var(--custom-black) !important;
    border: none !important;
}

.selected-cards-display {
    background: var(--custom-yellow) !important;
    color: var(--custom-black) !important;
}

.selected-cards-title {
    color: var(--custom-black) !important;
}

.card-selector-btn.primary {
    background: var(--custom-purple);
    color: white;
}

.card-selector-btn.primary:hover {
    background: var(--custom-yellow);
    color: var(--custom-black);
}

.card-selector-btn.secondary {
    background: var(--custom-white);
    color: var(--custom-black);
    border: 2px solid var(--custom-light-blue);
}

.card-selector-btn.secondary:hover {
    background: var(--custom-light-blue);
}

/* Playing cards */
.playing-card {
    background: var(--custom-white);
    border: 2px solid var(--custom-light-blue);
    color: var(--custom-black);
}

.playing-card:hover {
    border-color: var(--custom-purple);
    transform: translateY(-2px);
}

.playing-card.selected {
    background: var(--custom-purple);
    color: white;
    border-color: var(--custom-purple);
}

.playing-card.disabled {
    opacity: 0.4;
    background: #f5f5f5;
}

/* Loading and error states */
.loading {
    color: var(--custom-black);
}

.error-message {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    border: 2px solid #dc2626;
}

/* Input validation states */
.card-input.valid {
    border-color: var(--custom-purple) !important;
    background-color: rgba(107, 50, 229, 0.05) !important;
}

.card-input.invalid {
    border-color: #dc2626 !important;
    background-color: rgba(220, 38, 38, 0.05) !important;
}

/* Links */
a {
    color: var(--custom-purple);
}

a:hover {
    color: var(--custom-yellow);
}

/* Force dark theme off */
body.theme-light,
body {
    --bg-primary: var(--custom-white);
    --text-primary: var(--custom-black);
    --text-secondary: var(--custom-black);
    --surface-color: var(--custom-white);
}

/* Additional dark background overrides */
.selected-cards-container {
    background: var(--custom-white) !important;
    color: var(--custom-black) !important;
}

/* Override any remaining dark elements */
* {
    color: var(--custom-black);
}

/* Elements with backgrounds can have different text colors */
.mode-btn.active,
.submit-btn,
.card-selector-btn.primary,
.winner-announcement,
.playing-card.selected {
    color: white !important;
}

/* Yellow backgrounds use black text */
.card-selector-info,
.selected-cards-display,
.notation-item,
.equity-stat-card.winner,
.comparison-hand.winner {
    color: var(--custom-black) !important;
}