/* Enhanced Light Mode Mobile Fixes v2 - May 18, 2025 */

/* Fix mobile panels in light mode */
html[data-theme="light"] .mobile-panel {
    background-color: #f5f5f7 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}

html[data-theme="light"] .panel-content {
    background-color: #f5f5f7 !important;
    color: #333 !important;
}

/* Fix panel headers in light mode */
html[data-theme="light"] .panel-header {
    background-color: #e0e0e5 !important;
    color: #333 !important;
    border-bottom: 1px solid #ddd !important;
}

/* Fix tabs in light mode */
html[data-theme="light"] .panel-tab {
    background-color: #e0e0e5 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}

html[data-theme="light"] .panel-tab.active {
    background-color: #f5f5f7 !important;
    color: #0066cc !important;
    border-bottom: 2px solid #0066cc !important;
}

/* Fix panel navigation in light mode */
html[data-theme="light"] .mobile-navigation {
    background-color: #e0e0e5 !important;
    color: #333 !important;
    border-top: 1px solid #ddd !important;
}

/* Fix chat messages in light mode */
html[data-theme="light"] .chat-message {
    background-color: #e8e8e8 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}

html[data-theme="light"] .user-message {
    background-color: #e0f0ff !important;
    color: #333 !important;
    border: 1px solid #c0e0ff !important;
}

/* Fix model cards in light mode */
html[data-theme="light"] .model-card {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .model-card-content {
    color: #333 !important;
}

html[data-theme="light"] .model-name {
    color: #0066cc !important;
}

/* Fix chat input in light mode */
html[data-theme="light"] .chat-input,
html[data-theme="light"] textarea,
html[data-theme="light"] input {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}

/* Fix buttons in light mode */
html[data-theme="light"] .primary-button {
    background-color: #0066cc !important;
    color: white !important;
    border: none !important;
}

html[data-theme="light"] .secondary-button {
    background-color: #e0e0e5 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}

html[data-theme="light"] .danger-button {
    background-color: #ff3a3a !important;
    color: white !important;
    border: none !important;
}

/* Fix placeholders in light mode */
html[data-theme="light"] .empty-chat-placeholder,
html[data-theme="light"] .empty-models-placeholder {
    color: #333 !important;
}

html[data-theme="light"] .placeholder-icon {
    color: #0066cc !important;
}

/* Fix loading indicators in light mode */
html[data-theme="light"] .loading-spinner {
    border: 3px solid rgba(0, 0, 0, 0.1) !important;
    border-top-color: #0066cc !important;
}

/* Fix connection status in light mode */
html[data-theme="light"] .unified-status-display {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

/* Fix settings modal in light mode */
html[data-theme="light"] .settings-modal {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="light"] .settings-modal-content {
    background-color: #f5f5f7 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .settings-modal-header {
    border-bottom: 1px solid #ddd !important;
}

/* Fix mobile header in light mode */
html[data-theme="light"] .dashboard-header {
    background-color: #e0e0e5 !important;
    color: #333 !important;
    border-bottom: 1px solid #ddd !important;
}

/* Fix mobile floating indicators in light mode */
html[data-theme="light"] .compact-connection-indicator {
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}