/* ════════════════════════════════════════════════════════════
   SarfiPay — Theme Overrides v3
   WCAG-AA Compliant · Light + Dark · RTL-Compatible
   Loaded LAST so it wins specificity over ad-hoc inline styles.
   ════════════════════════════════════════════════════════════ */

/* ── Lang Switcher (shared, theme-aware) ──────────────────── */
.lang-switcher { display: flex; gap: 4px; }

.lang-btn {
    background: var(--lang-btn-bg, var(--surface-2));
    color: var(--lang-btn-color, var(--text-secondary));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    line-height: 1.4;
}
.lang-btn:hover { filter: brightness(1.1); }
.lang-btn.active {
    background: var(--lang-btn-active-bg, var(--primary));
    color: var(--lang-btn-active-color, #ffffff);
    border-color: transparent;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE — Component-Level Overrides
   ════════════════════════════════════════════════════════════ */

/* ── Body & Root ── */
[data-theme="dark"] body {
    color: var(--text-primary);
    background: var(--bg);
}

/* ── Badges ── */
[data-theme="dark"] .badge-primary { background: rgba(13,59,102,0.35);    color: var(--primary-300); }
[data-theme="dark"] .badge-teal    { background: rgba(0,168,150,0.2);     color: var(--teal-400); }
[data-theme="dark"] .badge-gold    { background: rgba(255,209,102,0.15);  color: var(--gold); }
[data-theme="dark"] .badge-success { background: rgba(16,185,129,0.2);   color: #34d399; }
[data-theme="dark"] .badge-warning { background: rgba(245,158,11,0.2);   color: #fbbf24; }
[data-theme="dark"] .badge-error   { background: rgba(255,107,107,0.2);  color: #f87171; }
[data-theme="dark"] .badge-gray    { background: rgba(255,255,255,0.08); color: var(--text-secondary); }

/* ── Buttons ── */
[data-theme="dark"] .btn-ghost               { color: var(--text-secondary); }
[data-theme="dark"] .btn-ghost:hover         { background: var(--surface-2); color: var(--text-primary); }
[data-theme="dark"] .btn-outline             { color: var(--primary-300); border-color: var(--primary-300); }
[data-theme="dark"] .btn-outline:hover       { background: rgba(13,59,102,0.25); }
[data-theme="dark"] .btn-white               { background: var(--surface-2); color: var(--text-primary); }

/* ── Cards & Surfaces ── */
[data-theme="dark"] .card                    { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .card-glass              { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .glass                   { background: rgba(15,23,42,0.75); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .dash-card               { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .dash-stat-card          { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .quick-action-btn        { background: var(--surface); color: var(--text-primary); }
[data-theme="dark"] .account-mini-card       { background: var(--surface-2); border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .modal-content           { background: var(--background-modal); border-color: var(--border-med); }
[data-theme="dark"] .modal-card              { background: var(--background-modal); color: var(--text-primary); }

/* ── Dashboard Navigation ── */
[data-theme="dark"] .dash-sidebar            { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .dash-topbar             { background: var(--background-modal); border-color: var(--border); }
[data-theme="dark"] .dash-nav-item           { color: var(--text-secondary); }
[data-theme="dark"] .dash-nav-item:hover     { background: var(--surface-2); color: var(--text-primary); }
[data-theme="dark"] .dash-nav-section-title  { color: var(--text-muted); }

/* ── Charts ── */
[data-theme="dark"] .chart-placeholder { background: linear-gradient(135deg, rgba(13,59,102,0.2) 0%, rgba(0,168,150,0.1) 100%); }
[data-theme="dark"] .chart-bar         { background: linear-gradient(to top, var(--primary-400), var(--teal-400)); opacity: 0.9; }

/* ── Tables ── */
[data-theme="dark"] .dash-tx-table th          { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .dash-tx-table td          { color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .dash-tx-table tr:hover td { background: rgba(255,255,255,0.03); }

/* ── Transaction Status badges ── */
[data-theme="dark"] .tx-status.completed { background: rgba(16,185,129,0.15); color: #34d399; }
[data-theme="dark"] .tx-status.pending   { background: rgba(245,158,11,0.15); color: #fbbf24; }
[data-theme="dark"] .tx-status.failed    { background: rgba(255,107,107,0.15); color: #f87171; }
[data-theme="dark"] .tx-status.incoming  { background: rgba(16,185,129,0.15); color: #34d399; }
[data-theme="dark"] .tx-status.outgoing  { background: rgba(255,107,107,0.15); color: #f87171; }

/* ── Forms ── */
[data-theme="dark"] .form-label { color: var(--text-secondary); }
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}
[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
    color: var(--placeholder);
}
[data-theme="dark"] .form-select option {
    background: var(--background-modal);
    color: var(--text-primary);
}

/* ── Search ── */
[data-theme="dark"] .dash-search              { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .dash-search input        { color: var(--text-primary); }
[data-theme="dark"] .dash-search input::placeholder { color: var(--placeholder); }

/* ── Stat typography ── */
[data-theme="dark"] .dash-stat-value { color: var(--text-primary); }
[data-theme="dark"] .dash-stat-label { color: var(--text-muted); }
[data-theme="dark"] .dash-stat-change.up   { background: rgba(16,185,129,0.15); color: var(--success); }
[data-theme="dark"] .dash-stat-change.down { background: rgba(255,107,107,0.15); color: var(--error); }

/* ── Quick Action Icons ── */
[data-theme="dark"] .qa-send .quick-action-icon     { background: rgba(13,59,102,0.3); }
[data-theme="dark"] .qa-recharge .quick-action-icon { background: rgba(0,168,150,0.15); }
[data-theme="dark"] .qa-pay .quick-action-icon      { background: rgba(255,209,102,0.1); }
[data-theme="dark"] .qa-more .quick-action-icon     { background: rgba(255,255,255,0.06); }

/* ── Toast Notifications ── */
[data-theme="dark"] .sarfipay-toast        { background: var(--surface-2) !important; color: var(--text-primary) !important; border: 1px solid var(--border-med) !important; }
[data-theme="dark"] .toast-message         { color: var(--text-primary); }

/* ── Receipt / Modal ── */
[data-theme="dark"] .receipt-body          { background: var(--surface); color: var(--text-primary); }
[data-theme="dark"] .receipt-row           { color: var(--text-secondary); }
[data-theme="dark"] .receipt-total         { color: var(--text-primary); }
[data-theme="dark"] .receipt-footer        { color: var(--text-muted); }

/* ── Recharge Source Chips ── */
[data-theme="dark"] .source-chip {
    background: var(--surface-2);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
[data-theme="dark"] .source-chip.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* ── Wallet / Bill cards ── */
[data-theme="dark"] .bill-widget,
[data-theme="dark"] .service-card  {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
}

/* ── Auth pages ── */
[data-theme="dark"] .auth-card {
    background: var(--surface);
    border-color: var(--border-med);
}

/* ── Avatar in dark mode ── */
[data-theme="dark"] .avatar {
    background: rgba(13,59,102,0.4);
    color: var(--primary-300);
}

/* ── Sidebar footer ── */
[data-theme="dark"] .dash-sidebar-footer .user-name  { color: var(--text-primary); }
[data-theme="dark"] .dash-sidebar-footer .user-role  { color: var(--text-muted); }

/* ══════════════════════════════════════════════════════
   LIGHT MODE — Contrast & Readability Fixes
   (ensure light theme has no contrast issues either)
   ══════════════════════════════════════════════════════ */

/* High-contrast text for stat values in light mode */
.dash-stat-value  { color: var(--gray-900); }
.dash-topbar-title{ color: var(--text-primary); }

/* Input contrast fix (light mode) */
.form-input, .form-select, .form-textarea {
    color: var(--text-primary);
}
.form-label { color: var(--text-secondary); }

/* Chart background (light) */
.chart-placeholder {
    background: linear-gradient(135deg, var(--primary-100) 0%, var(--teal-100) 100%);
}

/* Ensure dashboard search text is readable in light */
.dash-search input {
    color: var(--text-primary);
}
.dash-search input::placeholder {
    color: var(--placeholder, #9ca3af);
}