/**
 * ════════════════════════════════════════════════════════
 *  CitadelVest Pro — Dark Theme Comprehensive Patch
 *  File: public/css/modal-dark-fix.css
 *
 *  REPLACES the previous version of this file.
 *
 *  ROOT CAUSE (same across all affected pages):
 *  ─────────────────────────────────────────────
 *  The dark mode JS toggle applies `body.dark-theme` to <body>.
 *  However, inline <style> blocks in portfolio.html and
 *  deposit-guide.html — plus modal-redesign.css — all declare
 *  their dark overrides under `body.dark-mode`. That class never
 *  gets applied, so every affected surface stays white.
 *
 *  Additionally, portfolio.html's inline <style> is inside <head>
 *  AFTER the linked CSS, so even a correctly-scoped external file
 *  would be overridden by inline specificity. The fix here uses
 *  !important where needed to win that specificity battle.
 *
 *  HOW TO USE:
 *  ───────────
 *  This single file fixes ALL pages. Add it to every affected
 *  page as the LAST CSS link in <head>:
 *
 *    <link rel="stylesheet" href="css/modal-dark-fix.css">
 *
 *  Already added to: portfolio.html, index.html
 *  Also add to:      deposit-guide.html, support.html
 *
 * ════════════════════════════════════════════════════════
 */


/* ══════════════════════════════════════════════════════════
   SECTION 1 — CORE VARIABLE BRIDGE
   Re-declares all variables that other files set under
   body.dark-mode, now correctly under body.dark-theme.
   This single block cascades into every var() reference
   across all pages automatically.
══════════════════════════════════════════════════════════ */
body.dark-theme {
    /* brand.css variables (declared there under body.dark-mode) */
    --text-primary:   #e2e8f0;
    --text-secondary: #a0aec0;
    --text-muted:     #718096;
    --bg-primary:     #0f0f1a;
    --bg-secondary:   #1a1a2e;
    --bg-card:        #16213e;
    --border-light:   #2d3748;
    --border-medium:  #4a5568;
    --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.5);

    /* deposit-guide.html page-local variables
       (declared there under body.dark-mode, same fix needed) */
    --surface:        #16213e;
    --surface-2:      #1a1a2e;
    --border:         #2d3748;

    /* modal-redesign.css variables
       (declared there under body.dark-mode) */
    --m-surface:        #16213e;
    --m-surface-2:      #1a1a2e;
    --m-border:         rgba(255, 255, 255, 0.10);
    --m-text:           #e2e8f0;
    --m-text-2:         #94a3b8;
    --m-text-muted:     rgba(255, 255, 255, 0.35);
    --m-warning-bg:     rgba(251, 191, 36, 0.08);
    --m-warning-border: rgba(251, 191, 36, 0.35);
    --m-warning-text:   #fcd34d;
    --m-shadow:         0 8px 32px rgba(0, 0, 0, 0.45),
                        0 2px 8px  rgba(0, 0, 0, 0.30);
}


/* ══════════════════════════════════════════════════════════
   SECTION 2 — PORTFOLIO PAGE
   Fixes .insight-item, .chart-card, .activity-card and
   related elements.

   WHY !important is needed here:
   portfolio.html has an inline <style> block in <head> that
   loads AFTER this linked file. In CSS, a <style> tag has the
   same origin as a <link> but later source order wins — so
   we need !important to override the inline block's rules
   (which also use !important themselves).
══════════════════════════════════════════════════════════ */
.dark-theme .insight-item,
.dark-theme .chart-card,
.dark-theme .activity-card {
    background: var(--bg-card, #16213e) !important;
    color: var(--text-primary, #e2e8f0) !important;
    border-color: var(--border-light, #2d3748) !important;
}

.dark-theme .insight-label,
.dark-theme .insight-val,
.dark-theme .chart-card h3,
.dark-theme .chart-card .chart-subtitle,
.dark-theme .activity-card h3 {
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .activity-card table th,
.dark-theme .activity-card table td {
    color: var(--text-primary, #e2e8f0) !important;
    border-color: var(--border-light, #2d3748) !important;
}

.dark-theme .activity-card table tr:hover td {
    background: rgba(255, 255, 255, 0.05) !important;
}

.dark-theme .loading-state span {
    color: var(--text-muted, #718096) !important;
}

.dark-theme .plan-row {
    border-color: var(--border-light, #2d3748) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .plan-row:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

.dark-theme .plan-bar-track {
    background: var(--border-light, #2d3748) !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 3 — DEPOSIT GUIDE PAGE
   Section 1 bridges the CSS vars automatically. This section
   handles elements with HARDCODED hex colors that var() alone
   cannot fix.
══════════════════════════════════════════════════════════ */

/* Top bar */
.dark-theme .top-bar {
    background: var(--surface, #16213e) !important;
    border-bottom-color: var(--border, #2d3748) !important;
}

.dark-theme .top-bar-logo {
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .back-btn {
    background: var(--surface-2, #1a1a2e) !important;
    border-color: var(--border, #2d3748) !important;
    color: var(--text-secondary, #a0aec0) !important;
}

/* Steps section */
.dark-theme .steps-section {
    background: var(--surface, #16213e) !important;
    border-color: var(--border, #2d3748) !important;
}

.dark-theme .steps-header {
    border-bottom-color: var(--border, #2d3748) !important;
}

.dark-theme .steps-header h2 {
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .step-item {
    border-bottom-color: var(--border, #2d3748) !important;
}

.dark-theme .step-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

.dark-theme .step-body h3 {
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .step-body p,
.dark-theme .step-body ul li {
    color: var(--text-secondary, #a0aec0) !important;
}

/* Critical step — hardcoded #fffbeb */
.dark-theme .step-item.critical {
    background: rgba(245, 158, 11, 0.06) !important;
}

.dark-theme .step-item.critical:hover {
    background: rgba(245, 158, 11, 0.10) !important;
}

.dark-theme .step-item.critical .step-body h3 {
    color: #fcd34d !important;
}

.dark-theme .critical-tag {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.40) !important;
    color: #fcd34d !important;
}

/* Critical warning box — hardcoded #fef2f2 */
.dark-theme .critical-warning {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

.dark-theme .critical-warning strong {
    color: #fca5a5 !important;
}

.dark-theme .critical-warning p {
    color: rgba(252, 165, 165, 0.85) !important;
}

/* Network pills — hardcoded light backgrounds */
.dark-theme .network-ok {
    background: rgba(34, 197, 94, 0.10) !important;
    border-color: rgba(34, 197, 94, 0.30) !important;
    color: #86efac !important;
}

.dark-theme .network-ok .material-icons-sharp {
    color: #86efac !important;
}

.dark-theme .network-no {
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.30) !important;
    color: #fca5a5 !important;
}

.dark-theme .network-no .material-icons-sharp {
    color: #fca5a5 !important;
}

/* Address display */
.dark-theme .address-display {
    background: var(--surface-2, #1a1a2e) !important;
}

.dark-theme .address-hint {
    color: var(--text-muted, #718096) !important;
}

/* Do / Don't boxes */
.dark-theme .do-box,
.dark-theme .dont-box {
    background: var(--surface, #16213e) !important;
    border-color: var(--border, #2d3748) !important;
}

.dark-theme .do-box h4 {
    color: #86efac !important;
}

.dark-theme .dont-box h4 {
    color: #fca5a5 !important;
}

.dark-theme .do-box ul li,
.dark-theme .dont-box ul li {
    color: var(--text-secondary, #a0aec0) !important;
}

/* Help box */
.dark-theme .help-box {
    background: var(--surface, #16213e) !important;
    border-color: var(--border, #2d3748) !important;
}

.dark-theme .help-box h3 {
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .help-item {
    color: var(--text-secondary, #a0aec0) !important;
}

.dark-theme .help-item strong {
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .contact-row {
    background: var(--surface-2, #1a1a2e) !important;
    border-color: var(--border, #2d3748) !important;
}

.dark-theme .check-item {
    color: var(--text-secondary, #a0aec0) !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 4 — SUPPORT PAGE
   Based on the exact class names and hardcoded colours in
   support.css. Every offending rule is matched precisely.
══════════════════════════════════════════════════════════ */

/* support-header uses a gradient so it's always readable,
   but stat-item has rgba(255,255,255,0.2) which needs no fix.
   We only need to correct the text colour override from
   support.css's own broken body.dark-mode block. */
.dark-theme .support-header h1 {
    color: #ffffff !important;
}
.dark-theme .support-header p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Quick action cards — hardcoded background: white ── */
.dark-theme .quick-action-card {
    background: var(--bg-card, #16213e) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .quick-action-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

.dark-theme .quick-action-card h3 {
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .quick-action-card p {
    color: var(--text-muted, #718096) !important;
}

/* ── FAQ section — hardcoded background: white ── */
.dark-theme .faq-section {
    background: var(--bg-card, #16213e) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .faq-section h2 {
    color: var(--text-primary, #e2e8f0) !important;
}

/* faq-search — hardcoded background: #f5f5f5 */
.dark-theme .faq-search {
    background: #252538 !important;
}

.dark-theme .faq-search input {
    color: var(--text-primary, #e2e8f0) !important;
    background: transparent !important;
}

.dark-theme .faq-search input::placeholder {
    color: var(--text-muted, #718096) !important;
}

.dark-theme .faq-search .material-icons-sharp {
    color: var(--text-muted, #718096) !important;
}

/* faq-cat-btn — hardcoded background: white, border: #e0e0e0 */
.dark-theme .faq-cat-btn {
    background: #252538 !important;
    border-color: var(--border-light, #2d3748) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .faq-cat-btn:hover {
    border-color: var(--primary) !important;
}

.dark-theme .faq-cat-btn.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

/* faq-item — hardcoded border-bottom: #f0f0f0 */
.dark-theme .faq-item {
    border-bottom-color: var(--border-light, #2d3748) !important;
}

.dark-theme .faq-question {
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .faq-answer {
    color: var(--text-muted, #718096) !important;
}

/* ── Guides section — guide-card has hardcoded background: white ── */
.dark-theme .guide-card {
    background: var(--bg-card, #16213e) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .guide-card h3 {
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .guide-card p {
    color: var(--text-muted, #718096) !important;
}

/* guide-icon — hardcoded rgba(102,126,234,0.1) works fine in dark,
   no change needed */

/* ── Contact section — hardcoded background: white ── */
.dark-theme .contact-section {
    background: var(--bg-card, #16213e) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .contact-section h2 {
    color: var(--text-primary, #e2e8f0) !important;
}

/* contact-method — hardcoded background: #f8f9fa */
.dark-theme .contact-method {
    background: #252538 !important;
}

.dark-theme .method-info h3 {
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .method-info p {
    color: var(--primary) !important; /* keep brand colour for email/phone */
}

.dark-theme .method-info small {
    color: var(--text-muted, #718096) !important;
}

/* contact-form-container */
.dark-theme .contact-form-container h3 {
    color: var(--text-primary, #e2e8f0) !important;
}

/* form-group — label, select, textarea hardcoded borders */
.dark-theme .form-group label {
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .form-group select,
.dark-theme .form-group textarea,
.dark-theme .form-group input {
    background: #252538 !important;
    border-color: var(--border-light, #2d3748) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

.dark-theme .form-group select option {
    background: #1a1a2e !important;
    color: var(--text-primary, #e2e8f0) !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 5 — CVP MODAL COMPONENTS (index.html + any page)
   Carried over and consolidated from previous version.
══════════════════════════════════════════════════════════ */

.dark-theme .cvp-dialog {
    background: #16213e !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55),
                0 2px 8px  rgba(0, 0, 0, 0.35) !important;
}

.dark-theme .cvp-header {
    background: #1a1a2e !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

.dark-theme .cvp-body {
    background: #1a1a2e !important;
}

.dark-theme .cvp-footer {
    background: #16213e !important;
    border-top-color: rgba(255, 255, 255, 0.10) !important;
}

.dark-theme .cvp-preview {
    background: #252538 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

.dark-theme .cvp-preview-divider {
    background: rgba(255, 255, 255, 0.10) !important;
}

.dark-theme .cvp-input,
.dark-theme .cvp-select {
    background: #252538 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

.dark-theme .cvp-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.dark-theme .cvp-input:focus,
.dark-theme .cvp-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 102, 126, 234), 0.20) !important;
}

.dark-theme .cvp-select-wrap::after {
    color: #94a3b8 !important;
}

.dark-theme .cvp-close {
    background: #252538 !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.dark-theme .cvp-close:hover {
    background: #2d2d44 !important;
    color: #e2e8f0 !important;
}

.dark-theme .cvp-quick-btn {
    background: #252538 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

.dark-theme .cvp-quick-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: rgba(var(--primary-rgb, 102, 126, 234), 0.10) !important;
}

.dark-theme .cvp-address-block {
    background: #252538 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

.dark-theme .cvp-address-block-header {
    color: #94a3b8 !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

.dark-theme .cvp-address-value {
    color: #e2e8f0 !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

.dark-theme .cvp-copy-btn {
    background: transparent !important;
    color: var(--primary) !important;
}

.dark-theme .cvp-copy-btn:hover {
    background: rgba(var(--primary-rgb, 102, 126, 234), 0.10) !important;
}

.dark-theme .cvp-info-strip {
    background: rgba(var(--primary-rgb, 102, 126, 234), 0.08) !important;
    border-color: rgba(var(--primary-rgb, 102, 126, 234), 0.30) !important;
    color: #e2e8f0 !important;
}

.dark-theme .cvp-info-strip--warning {
    background: rgba(251, 191, 36, 0.08) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    color: #fcd34d !important;
}

.dark-theme .cvp-info-strip--danger {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

.dark-theme .cvp-error-strip {
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

.dark-theme .cvp-network-opt {
    background: #1e1e30 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

.dark-theme .cvp-network-opt:hover:not(.cvp-network-opt--disabled) {
    background: #252538 !important;
    border-color: var(--primary) !important;
}

.dark-theme .cvp-network-opt--active {
    background: rgba(var(--primary-rgb, 102, 126, 234), 0.10) !important;
    border-color: var(--primary) !important;
}

.dark-theme .cvp-network-opt--disabled {
    background: #1a1a2e !important;
}

.dark-theme .cvp-network-icon {
    background: #252538 !important;
}

.dark-theme .cvp-addr-item {
    background: #1e1e30 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

.dark-theme .cvp-divider {
    color: rgba(255, 255, 255, 0.35) !important;
}

.dark-theme .cvp-divider::before,
.dark-theme .cvp-divider::after {
    background: rgba(255, 255, 255, 0.10) !important;
}

.dark-theme .cvp-btn--ghost {
    background: #252538 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}

.dark-theme .cvp-btn--ghost:hover {
    background: #2d2d44 !important;
    color: #e2e8f0 !important;
}

.dark-theme .cvp-network-badge--available {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
}

.dark-theme .cvp-network-badge--soon {
    background: rgba(251, 191, 36, 0.12) !important;
    color: #fcd34d !important;
}

.dark-theme .cvp-hint {
    color: #94a3b8 !important;
}

.dark-theme .cvp-coming-soon h3 {
    color: #e2e8f0 !important;
}

.dark-theme .cvp-coming-soon p {
    color: #94a3b8 !important;
}