/* Overrides for LactMed Index to match Design System */

/* Fix hardcoded backgrounds for Dark Mode */
.modal-header,
.tabs,
.modal-body,
#search-input,
.elactancia-info.safe,
.elactancia-info.caution,
.elactancia-info.avoid {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* Ensure modal content background matches */
.modal-content {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle);
}

/* Fix Tab Buttons */
.tab-btn {
    color: var(--text-secondary);
}

.tab-btn:hover {
    color: var(--primary-500);
}

.tab-btn.active {
    color: var(--primary-600);
    border-bottom-color: var(--primary-600);
}

/* Fix Reference List in Dark Mode */
.reference-list {
    color: var(--text-secondary);
}

.reference-list li::marker {
    color: var(--primary-500);
}

/* Fix e-lactancia content box in Dark Mode */
.elactancia-content {
    background-color: var(--bg-page) !important;
    border-color: var(--border-subtle) !important;
}

.elactancia-content p {
    color: var(--text-primary) !important;
}

/* Fix Search Input in Dark Mode */
#search-input {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-subtle);
}

#search-input::placeholder {
    color: var(--text-placeholder);
}

#search-input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px var(--primary-100);
}

/* Fix Close Modal Button */
.close-modal {
    background-color: var(--bg-page) !important;
    color: var(--text-secondary) !important;
}

.close-modal:hover {
    background-color: var(--error-50) !important;
    color: var(--error-600) !important;
}

/* Fix Verdict Banner Text Colors for Dark Mode */
.verdict-banner.safe {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: var(--success-700) !important;
}

.verdict-banner.caution {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: var(--warning-700) !important;
}

.verdict-banner.avoid {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: var(--error-700) !important;
}

/* Dark Mode Specific Overrides */
[data-theme="dark"] .verdict-banner.safe {
    color: var(--success-300) !important;
    background-color: rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .verdict-banner.caution {
    color: var(--warning-300) !important;
    background-color: rgba(245, 158, 11, 0.2) !important;
}

[data-theme="dark"] .verdict-banner.avoid {
    color: var(--error-300) !important;
    background-color: rgba(239, 68, 68, 0.2) !important;
}

[data-theme="dark"] .badge.has-levels {
    background-color: var(--neutral-800);
    color: var(--neutral-200);
}

[data-theme="dark"] .badge.has-alt {
    background-color: rgba(67, 56, 202, 0.2);
    color: var(--primary-300);
}

[data-theme="dark"] .drug-card {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
}

[data-theme="dark"] .drug-card:hover {
    border-color: var(--primary-500);
}

/* Fix Badge Colors for Dark Mode */
[data-theme="dark"] .badge-safe {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--success-300);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .badge-caution {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--warning-300);
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .badge-avoid {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--error-300);
    border-color: rgba(239, 68, 68, 0.3);
}