/* Dark Mode Fixes for Analyzer Page - White Elements */

/* Mode button small text */
body.dark-mode .mode-btn small {
    color: #a0a0a0;
}

/* Analyze button dark mode */
body.dark-mode .analyze-btn {
    background: #cd853f;
    color: white;
}

body.dark-mode .analyze-btn:hover:not(:disabled) {
    background: #deb887;
}

body.dark-mode .analyze-btn:disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
}

/* Gallery button dark mode */
body.dark-mode .gallery-button {
    background: linear-gradient(135deg, #6B8E23 0%, #556B2F 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(107, 142, 35, 0.4);
}

body.dark-mode .gallery-button:hover {
    background: linear-gradient(135deg, #556B2F 0%, #6B8E23 100%);
    box-shadow: 0 6px 20px rgba(107, 142, 35, 0.5);
}

/* Button container dark mode */
body.dark-mode .button-container {
    background: transparent;
}

/* Mode toggle section dark mode */
body.dark-mode .mode-toggle-section {
    background: transparent;
}

/* Upload section dark mode */
body.dark-mode .upload-section {
    background: transparent;
}

/* Style preferences combination dark mode */
body.dark-mode .style-preferences-combination {
    background: #1e1e1e;
    border-color: #333333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .style-preferences-combination h3 {
    color: #e0e0e0;
}

body.dark-mode .style-preferences-combination p {
    color: #a0a0a0;
}

/* Additional white background fixes */
body.dark-mode .gallery-modal-content {
    background: #1e1e1e;
}

body.dark-mode .combinations-grid-large {
    background: #242424;
}

body.dark-mode .no-colors-found,
body.dark-mode .no-combinations-found {
    background: #1e1e1e;
    color: #a0a0a0;
}

body.dark-mode .no-colors-found p,
body.dark-mode .no-combinations-found p {
    color: #a0a0a0;
}

body.dark-mode .color-item-label {
    color: #e0e0e0;
}

body.dark-mode .color-name {
    color: #e0e0e0;
}

body.dark-mode .clothing-type {
    color: #a0a0a0;
}

body.dark-mode .upload-placeholder {
    color: #a0a0a0;
}

body.dark-mode .upload-tip {
    color: #a0a0a0;
}

/* Palette Toggle Buttons */
.combinations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.palette-toggle {
    display: flex;
    gap: 0.5rem;
    background: #f5f5f5;
    padding: 0.25rem;
    border-radius: 8px;
}

.palette-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: #666;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.palette-toggle-btn:hover {
    background: rgba(139, 69, 19, 0.1);
    color: #8B4513;
}

.palette-toggle-btn.active {
    background: #8B4513;
    color: white;
}

.palette-toggle-btn svg {
    flex-shrink: 0;
}

.colorhunt-palette {
    cursor: pointer;
}

.colorhunt-palette.selected {
    border-color: #8B4513;
    background: rgba(139, 69, 19, 0.05);
}

/* Dark mode for palette toggle */
body.dark-mode .palette-toggle {
    background: #242424;
}

body.dark-mode .palette-toggle-btn {
    color: #a0a0a0;
}

body.dark-mode .palette-toggle-btn:hover {
    background: rgba(205, 133, 63, 0.2);
    color: #cd853f;
}

body.dark-mode .palette-toggle-btn.active {
    background: #cd853f;
    color: white;
}

body.dark-mode .colorhunt-palette.selected {
    border-color: #cd853f;
    background: rgba(205, 133, 63, 0.1);
}