/**
 * Portal Theme Overrides - NexGenHealth.io
 *
 * This file overrides hardcoded colors in portal inline styles
 * with CSS custom properties for theme support.
 *
 * Must be loaded AFTER inline styles to take precedence.
 * Works in conjunction with theme-variables.css
 */

/* ============================================
   GLOBAL OVERRIDES
   ============================================ */

body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   MAIN HEADER & NAVIGATION
   ============================================ */

.main-header {
    background-color: var(--nav-bg) !important;
    border-bottom-color: var(--accent-light) !important;
}

.logo h1 {
    color: var(--accent-primary) !important;
}

.nav-link {
    color: var(--text-primary) !important;
}

.nav-link:hover {
    color: var(--accent-primary) !important;
}

.dropdown-menu {
    background-color: var(--bg-secondary) !important;
}

.dropdown-menu a {
    color: var(--text-primary) !important;
}

.dropdown-menu a:hover {
    background-color: var(--bg-tertiary) !important;
}

/* ============================================
   AUTH BUTTONS
   ============================================ */

.btn-login {
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

.btn-login:hover {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
}

.btn-signup {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

.btn-signup:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

.user-email {
    color: var(--text-primary) !important;
}

/* ============================================
   PORTAL HEADER
   ============================================ */

.portal-header {
    background: var(--gradient-bg) !important;
    border-bottom-color: var(--border-primary) !important;
}

.portal-logo {
    color: var(--accent-primary) !important;
}

.portal-id-display {
    background: var(--accent-light) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.settings-btn,
.logout-btn {
    border-color: var(--border-primary) !important;
    color: var(--text-muted) !important;
}

.settings-btn:hover {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.logout-btn:hover {
    border-color: var(--color-error) !important;
    color: var(--color-error) !important;
}

/* ============================================
   TAB NAVIGATION
   ============================================ */

.tab-navigation {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

.tab-button {
    color: var(--text-muted) !important;
}

.tab-button:hover {
    color: var(--accent-primary) !important;
}

.tab-button.active {
    color: var(--accent-primary) !important;
    border-bottom-color: var(--accent-primary) !important;
}

/* ============================================
   DASHBOARD CARDS
   ============================================ */

.dashboard-card,
.blood-panel-card {
    background: var(--gradient-bg) !important;
    border-color: var(--border-primary) !important;
}

.dashboard-card:hover,
.blood-panel-card:hover {
    border-color: var(--accent-primary) !important;
}

.card-title {
    color: var(--accent-primary) !important;
}

.card-content {
    color: var(--text-secondary) !important;
}

.metric-value {
    color: var(--accent-primary) !important;
}

.metric-label,
.metric-name {
    color: var(--text-muted) !important;
}

.metric-val {
    color: var(--accent-primary) !important;
}

.metric-item {
    border-bottom-color: var(--border-light) !important;
}

/* ============================================
   RECORDS SECTION
   ============================================ */

.record-card {
    background: var(--gradient-bg) !important;
    border-color: var(--border-primary) !important;
}

.record-card:hover {
    border-color: var(--accent-primary) !important;
}

.record-type {
    color: var(--accent-primary) !important;
}

.record-date {
    color: var(--text-muted) !important;
}

.record-content {
    color: var(--text-secondary) !important;
}

.record-action-btn {
    border-color: var(--border-primary) !important;
    color: var(--accent-primary) !important;
}

.record-action-btn:hover {
    border-color: var(--accent-primary) !important;
    background: var(--accent-light) !important;
}

/* ============================================
   AI CHAT SECTION
   ============================================ */

.chat-section {
    background: var(--gradient-bg) !important;
    border-color: var(--border-primary) !important;
}

.chat-header {
    border-bottom-color: var(--border-primary) !important;
}

.chat-header h2 {
    color: var(--accent-primary) !important;
}

.message.user {
    background: var(--accent-primary) !important;
}

.message.assistant {
    background: var(--bg-hover) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

.chat-input-area {
    border-top-color: var(--border-primary) !important;
}

.chat-input {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

.chat-input:focus {
    border-color: var(--input-border-focus) !important;
}

.chat-input::placeholder {
    color: var(--input-placeholder) !important;
}

.send-btn {
    background: var(--accent-primary) !important;
}

.send-btn:hover {
    background: var(--accent-hover) !important;
}

.typing-indicator span {
    background: var(--accent-primary) !important;
}

/* ============================================
   RESOURCES SIDEBAR
   ============================================ */

.resources-sidebar {
    background: var(--gradient-bg) !important;
    border-color: var(--border-primary) !important;
}

.resources-sidebar h3 {
    color: var(--accent-primary) !important;
}

.query-info {
    background: var(--accent-light) !important;
    border-color: var(--accent-primary) !important;
}

.query-count {
    color: var(--accent-primary) !important;
}

.resource-item {
    background: var(--bg-hover) !important;
    border-color: var(--border-primary) !important;
}

.resource-item:hover {
    border-color: var(--accent-primary) !important;
    background: var(--accent-lighter) !important;
}

.resource-title {
    color: var(--accent-primary) !important;
}

.resource-description {
    color: var(--text-muted) !important;
}

/* ============================================
   MODALS
   ============================================ */

.settings-modal {
    background: var(--bg-backdrop) !important;
}

.settings-content {
    background: var(--gradient-bg) !important;
    border-color: var(--border-primary) !important;
}

.settings-header {
    background: var(--gradient-bg) !important;
    border-bottom-color: var(--border-primary) !important;
}

.settings-header h2 {
    color: var(--accent-primary) !important;
}

.settings-close {
    border-color: var(--border-primary) !important;
    color: var(--text-muted) !important;
}

.settings-close:hover {
    border-color: var(--color-error) !important;
    color: var(--color-error) !important;
}

.settings-section h3 {
    color: var(--accent-primary) !important;
}

.settings-preference-item {
    background: var(--bg-hover) !important;
    border-color: var(--border-primary) !important;
}

.settings-preference-item:hover {
    border-color: var(--accent-primary) !important;
    background: var(--accent-lighter) !important;
}

.settings-preference-item.selected {
    border-color: var(--accent-primary) !important;
    background: var(--accent-light) !important;
}

.settings-preference-text .title {
    color: var(--text-primary) !important;
}

.settings-preference-text .description {
    color: var(--text-muted) !important;
}

.settings-footer {
    background: var(--gradient-bg) !important;
    border-top-color: var(--border-primary) !important;
}

.settings-save-btn {
    background: var(--accent-primary) !important;
}

.settings-save-btn:hover {
    background: var(--accent-hover) !important;
}

.settings-cancel-btn {
    border-color: var(--border-primary) !important;
    color: var(--text-muted) !important;
}

.settings-cancel-btn:hover {
    border-color: var(--text-muted) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   FORM INPUTS
   ============================================ */

.metric-value-input,
.metric-unit-input {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

.metric-value-input:focus,
.metric-unit-input:focus {
    border-color: var(--input-border-focus) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--input-border-focus) !important;
    outline: none !important;
}

::placeholder {
    color: var(--input-placeholder) !important;
}

/* ============================================
   INFO & LEGEND MODALS
   ============================================ */

.info-modal-overlay,
.health-legend-modal {
    background: var(--bg-backdrop) !important;
}

.health-legend-content {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

.health-info-legend-btn {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--accent-primary) !important;
}

.health-info-legend-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-primary) !important;
}

/* ============================================
   TOOLTIPS
   ============================================ */

#range-tooltip {
    background: var(--bg-secondary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-secondary) !important;
}

.tooltip,
[class*="-tooltip"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   CONFIRMATION MODALS
   ============================================ */

.discontinue-modal-overlay {
    background: var(--bg-backdrop) !important;
}

.discontinue-modal {
    background: var(--gradient-bg) !important;
}

.discontinue-modal-content {
    color: var(--text-secondary) !important;
}

.discontinue-modal-medication {
    color: var(--accent-primary) !important;
}

.discontinue-cancel-btn {
    border-color: var(--border-primary) !important;
    color: var(--text-muted) !important;
}

.discontinue-cancel-btn:hover {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* ============================================
   UPLOAD PROGRESS MODAL
   ============================================ */

.upload-progress-overlay {
    background: var(--bg-backdrop) !important;
}

.upload-progress-modal {
    background: var(--gradient-bg) !important;
    border-color: var(--accent-light) !important;
}

.upload-progress-title {
    color: var(--text-primary) !important;
}

.upload-progress-filename {
    color: var(--accent-hover) !important;
}

/* ============================================
   VERIFICATION CARDS
   ============================================ */

.pending-diagnosis-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

.pending-condition-name {
    color: var(--text-primary) !important;
}

.pending-details span {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
}

.verification-description {
    color: var(--text-muted) !important;
    border-bottom-color: var(--border-primary) !important;
}

.verification-header {
    border-bottom-color: var(--border-primary) !important;
}

.verification-actions {
    border-top-color: var(--border-primary) !important;
}

.btn-reject {
    border-color: var(--border-secondary) !important;
    color: var(--text-muted) !important;
}

.btn-reject:hover {
    border-color: var(--color-error) !important;
    color: var(--color-error) !important;
}

.btn-reject-all {
    border-color: var(--border-secondary) !important;
    color: var(--text-muted) !important;
}

.btn-reject-all:hover {
    border-color: var(--color-error) !important;
    color: var(--color-error) !important;
}

/* ============================================
   SUCCESS MODAL
   ============================================ */

.success-modal-overlay {
    background: var(--bg-backdrop) !important;
}

.success-modal {
    background: var(--gradient-bg) !important;
    border-color: var(--border-primary) !important;
}

.success-modal-title {
    color: var(--accent-primary) !important;
}

.success-modal-message {
    color: var(--text-secondary) !important;
}

/* ============================================
   DISCLAIMER MODAL
   ============================================ */

.disclaimer-modal-overlay {
    background: var(--bg-backdrop) !important;
}

.disclaimer-modal {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

.disclaimer-header h2 {
    color: var(--accent-primary) !important;
}

.disclaimer-content {
    color: var(--text-secondary) !important;
}

.disclaimer-content h3 {
    color: var(--text-primary) !important;
}

/* ============================================
   SECTION TITLES
   ============================================ */

.section-title {
    color: var(--accent-primary) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ============================================
   MISC ELEMENTS
   ============================================ */

hr {
    border-color: var(--border-primary) !important;
}

a {
    color: var(--accent-primary);
}

a:hover {
    color: var(--accent-hover);
}

/* Sign Out Modal */
.sign-out-modal {
    background: var(--gradient-bg) !important;
    border-color: var(--border-primary) !important;
}

.sign-out-modal h2 {
    color: var(--text-primary) !important;
}

.sign-out-modal p {
    color: var(--text-secondary) !important;
}

/* ============================================
   HIGH CONTRAST MODE - Additional Overrides
   Applied when body has .high-contrast class
   ============================================ */

.high-contrast .dashboard-card,
.high-contrast .blood-panel-card,
.high-contrast .record-card,
.high-contrast .chat-section,
.high-contrast .resources-sidebar {
    border-width: 2px !important;
    border-color: var(--border-primary) !important;
}

.high-contrast .tab-button {
    border-bottom-width: 4px !important;
}

.high-contrast .tab-button.active {
    border-bottom-color: var(--accent-primary) !important;
}

.high-contrast input,
.high-contrast select,
.high-contrast textarea {
    border-width: 2px !important;
    border-color: var(--border-primary) !important;
}

.high-contrast input:focus,
.high-contrast select:focus,
.high-contrast textarea:focus {
    border-color: var(--accent-primary) !important;
    outline: 2px solid var(--accent-primary) !important;
    outline-offset: 2px !important;
}

.high-contrast .btn-login,
.high-contrast .btn-signup,
.high-contrast .send-btn,
.high-contrast .record-action-btn {
    border-width: 2px !important;
}

.high-contrast a {
    text-decoration: underline !important;
}

.high-contrast .metric-val {
    font-weight: 900 !important;
}

/* ============================================
   LARGE TEXT MODE - Font Size Overrides
   Applied when body has .large-text class
   ============================================ */

/* Base font size increase */
.large-text body {
    font-size: var(--font-size-base) !important;
}

/* Headings */
.large-text h1,
.large-text .section-title {
    font-size: var(--font-size-3xl) !important;
}

.large-text h2,
.large-text .card-title,
.large-text .chat-header h2,
.large-text .settings-header h2,
.large-text .account-modal-title {
    font-size: var(--font-size-2xl) !important;
}

.large-text h3,
.large-text .resources-sidebar h3,
.large-text .submenu-header {
    font-size: var(--font-size-xl) !important;
}

.large-text h4, .large-text h5, .large-text h6 {
    font-size: var(--font-size-lg) !important;
}

/* Navigation */
.large-text .nav-link {
    font-size: var(--font-size-base) !important;
}

.large-text .tab-button {
    font-size: var(--font-size-lg) !important;
}

/* Body text */
.large-text p,
.large-text .card-content,
.large-text .record-content,
.large-text .message,
.large-text .disclaimer-content,
.large-text .resource-description {
    font-size: var(--font-size-base) !important;
    line-height: 1.7 !important;
}

/* Labels and metadata */
.large-text .metric-name,
.large-text .metric-label,
.large-text .record-date,
.large-text .record-type,
.large-text .submenu-item-text {
    font-size: var(--font-size-sm) !important;
}

/* Values and metrics */
.large-text .metric-val,
.large-text .metric-value {
    font-size: var(--font-size-xl) !important;
}

.large-text .health-score-number {
    font-size: var(--font-size-2xl) !important;
}

/* Buttons */
.large-text button,
.large-text .auth-button,
.large-text .send-btn,
.large-text .record-action-btn,
.large-text .settings-save-btn,
.large-text .settings-cancel-btn {
    font-size: var(--font-size-base) !important;
    padding: 0.75rem 1.5rem !important;
}

.large-text .tab-button {
    padding: 1.25rem 2.5rem 0.5rem 2.5rem !important;
}

/* Form elements */
.large-text input,
.large-text select,
.large-text textarea,
.large-text .chat-input,
.large-text .submenu-select {
    font-size: var(--font-size-base) !important;
    padding: 0.875rem 1rem !important;
}

/* Modal content */
.large-text .success-modal-message,
.large-text .discontinue-modal-content {
    font-size: var(--font-size-base) !important;
}

/* Settings menu */
.large-text .settings-preference-text .title {
    font-size: var(--font-size-lg) !important;
}

.large-text .settings-preference-text .description {
    font-size: var(--font-size-sm) !important;
}

/* Badges and small text */
.large-text .current-plan-badge,
.large-text .query-count,
.large-text .portal-id-display {
    font-size: var(--font-size-sm) !important;
}

/* Tooltips */
.large-text #range-tooltip,
.large-text .tooltip {
    font-size: var(--font-size-sm) !important;
}

/* User email and small labels */
.large-text .user-email {
    font-size: var(--font-size-base) !important;
}

/* Logo text */
.large-text .logo h1,
.large-text .portal-logo {
    font-size: var(--font-size-xl) !important;
}