/**
 * mapping-contrast.css
 * High-contrast overrides for the Mapping Center and MappingRow component.
 * Fixes readability issues when the dark sidebar meets low-opacity Tailwind utilities.
 */

/* ── Currency row cards ───────────────────────────────────────────────────── */
.mapping-currency-row {
    background-color: rgba(15, 23, 42, 0.70) !important;   /* slate-950/70 */
}

.mapping-currency-row:has(.account-picker-selected) {
    background-color: rgba(6, 78, 59, 0.18) !important;    /* emerald tint when mapped */
    border-color: rgba(16, 185, 129, 0.45) !important;
}

/* ── Currency badge text ─────────────────────────────────────────────────── */
.mapping-currency-row span[class*="text-emerald-2"],
.mapping-currency-row span[class*="text-red-2"],
.mapping-currency-row span[class*="text-orange-2"],
.mapping-currency-row span[class*="text-amber-2"],
.mapping-currency-row span[class*="text-slate-2"] {
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ── Labels inside mapping rows ──────────────────────────────────────────── */
.mapping-currency-row label {
    color: #cbd5e1 !important;      /* slate-300 */
    font-weight: 600;
}

/* ── "مربوط" / "غير مربوط" status badges ──────────────────────────────────── */
.mapping-badge-mapped {
    background-color: rgba(16, 185, 129, 0.20);
    color: #6ee7b7;                 /* emerald-300 */
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.mapping-badge-unmapped {
    background-color: rgba(245, 158, 11, 0.15);
    color: #fcd34d;                 /* amber-300 */
    border: 1px solid rgba(245, 158, 11, 0.30);
}

/* ── Direction info banner ───────────────────────────────────────────────── */
.mapping-info-banner {
    background-color: rgba(30, 58, 138, 0.25);   /* primary-900/25 */
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: #a5b4fc;                               /* indigo-300 */
}

.mapping-info-banner strong {
    color: #c7d2fe;                               /* indigo-200 */
    font-weight: 700;
}

/* ── Hint text inside label ──────────────────────────────────────────────── */
.mapping-hint {
    color: #64748b;                               /* slate-500 */
}

/* ── AccountPicker dropdown container (high contrast in dark context) ──────── */
.account-picker-dropdown {
    background-color: #0f172a !important;         /* slate-950 */
    border-color: rgba(71, 85, 105, 0.80) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.account-picker-option {
    color: #e2e8f0 !important;                    /* slate-200 */
}

.account-picker-option:hover,
.account-picker-option[aria-selected="true"] {
    background-color: rgba(37, 99, 235, 0.25) !important;
    color: #ffffff !important;
}

/* ── Source card (Mapping.razor outer card) ───────────────────────────────── */
.bg-slate-800\/60 {
    background-color: rgba(30, 41, 59, 0.75) !important;
}

/* Group name text (white, high contrast) */
.bg-slate-800\/60 p.text-white {
    color: #f1f5f9 !important;      /* slate-100 — brighter than Tailwind default */
    font-weight: 600;
}

/* Mapped/unmapped pill inside source header */
.bg-slate-800\/60 span.text-emerald-400 {
    color: #34d399 !important;
}
.bg-slate-800\/60 span.text-amber-500 {
    color: #fbbf24 !important;
}

/* Source ID / phone in small mono text — make it legible */
.bg-slate-800\/60 p.text-slate-600 {
    color: #94a3b8 !important;      /* slate-400 */
}

/* ── Expanded mapping panel background ───────────────────────────────────── */
.bg-slate-900\/40 {
    background-color: rgba(15, 23, 42, 0.60) !important;
}

/* ── Filter tabs ─────────────────────────────────────────────────────────── */
.bg-slate-800\/60.rounded-xl span {
    color: #cbd5e1;
}

/* Active tab count badge */
.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.22) !important;
}

/* Inactive tab count badge */
.bg-slate-700 {
    background-color: rgba(51, 65, 85, 0.90) !important;
}

/* ── Page header subtext ─────────────────────────────────────────────────── */
.text-slate-400 {
    /* Boost global slate-400 contrast slightly on the mapping page */
    /* Note: scoped by page via .mapping-page class on the root div */
}

/* Scoped to Mapping.razor root */
[dir="rtl"].space-y-5 > div:first-child p.text-slate-400 {
    color: #94a3b8 !important;      /* slate-400 exact value */
}

/* ── Light mode overrides ────────────────────────────────────────────────── */
/* The rules above are tuned for dark mode. In light mode the same classes
   produce near-invisible text on light backgrounds. Reset them to sensible
   light-mode values without touching the dark-mode rules above.           */

html:not(.dark) .mapping-currency-row {
    background-color: rgba(248, 250, 252, 0.90) !important;  /* slate-50/90 */
    border-color: rgba(203, 213, 225, 0.60) !important;      /* slate-300/60 */
}

html:not(.dark) .mapping-currency-row:has(.account-picker-selected) {
    background-color: rgba(236, 253, 245, 0.80) !important;  /* emerald-50/80 */
    border-color: rgba(16, 185, 129, 0.40) !important;
}

html:not(.dark) .mapping-currency-row label {
    color: #374151 !important;      /* gray-700 */
}

html:not(.dark) .mapping-badge-mapped {
    background-color: rgba(16, 185, 129, 0.12);
    color: #065f46;                 /* emerald-800 */
    border: 1px solid rgba(16, 185, 129, 0.30);
}

html:not(.dark) .mapping-badge-unmapped {
    background-color: rgba(245, 158, 11, 0.10);
    color: #92400e;                 /* amber-800 */
    border: 1px solid rgba(245, 158, 11, 0.25);
}

html:not(.dark) .account-picker-dropdown {
    background-color: #ffffff !important;
    border-color: rgba(203, 213, 225, 0.80) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

html:not(.dark) .account-picker-option {
    color: #1e293b !important;      /* slate-800 */
}

html:not(.dark) .account-picker-option:hover,
html:not(.dark) .account-picker-option[aria-selected="true"] {
    background-color: rgba(37, 99, 235, 0.08) !important;
    color: #1e40af !important;      /* blue-800 */
}

html:not(.dark) .mapping-info-banner {
    background-color: rgba(239, 246, 255, 0.90);  /* blue-50/90 */
    border: 1px solid rgba(147, 197, 253, 0.60);  /* blue-300/60 */
    color: #1e40af;                               /* blue-800 */
}

html:not(.dark) .mapping-info-banner strong {
    color: #1e3a8a;                               /* blue-900 */
}