/* ==========================================
   QUOTEX PRECISE LIGHT THEME SYSTEM
   ========================================== */

/* 1. Page Body & HTML Background */
html.light-mode,
html.light-mode body,
body.light-mode {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* 2. Containers, Cards, Header, Sidebars, Sections, Modals & Dropdowns -> Crisp White */
html.light-mode header,
html.light-mode aside,
html.light-mode nav,
html.light-mode footer,
html.light-mode section,
html.light-mode #profileDrawer,
html.light-mode #assetModal,
html.light-mode #tradeHistoryModal > div,
html.light-mode #resultModal > div,
html.light-mode #notifDropdown,
html.light-mode #accountMenu,
html.light-mode #qx-apk-top-banner,
html.light-mode .glass-card,
html.light-mode .qx-card,
html.light-mode .qx-card-dark,
html.light-mode [class*="bg-[#1e212d]"],
html.light-mode [class*="bg-[#171d2b]"],
html.light-mode [class*="bg-[#0c1017]"],
html.light-mode [class*="bg-[#121722]"],
body.light-mode header,
body.light-mode aside,
body.light-mode nav,
body.light-mode footer,
body.light-mode section,
body.light-mode #profileDrawer,
body.light-mode #assetModal,
body.light-mode #tradeHistoryModal > div,
body.light-mode #resultModal > div,
body.light-mode #notifDropdown,
body.light-mode #accountMenu,
body.light-mode #qx-apk-top-banner,
body.light-mode .glass-card,
body.light-mode .qx-card,
body.light-mode .qx-card-dark,
body.light-mode [class*="bg-[#1e212d]"],
body.light-mode [class*="bg-[#171d2b]"],
body.light-mode [class*="bg-[#0c1017]"],
body.light-mode [class*="bg-[#121722]"] {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

/* Header Transparency Override when header has bg-transparent class */
header.bg-transparent,
html.light-mode header.bg-transparent,
body.light-mode header.bg-transparent {
    background-color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* Instant Light / Dark Mode Logo Image Swapper */
html.light-mode img.qx-logo-desktop,
body.light-mode img.qx-logo-desktop {
    content: url("../../assets/images/logo.svg") !important;
}

html.light-mode img.qx-logo-mobile,
body.light-mode img.qx-logo-mobile {
    content: url("../../assets/images/logo-icon-dark.svg") !important;
}

/* Drawer Menu Items inside Slide-Out #profileDrawer -> Transparent Background in Light Mode */
html.light-mode #profileDrawer a,
html.light-mode #profileDrawer button,
body.light-mode #profileDrawer a,
body.light-mode #profileDrawer button {
    background-color: transparent !important;
    color: #0f172a !important;
}

html.light-mode #profileDrawer a:hover,
html.light-mode #profileDrawer button:hover,
body.light-mode #profileDrawer a:hover,
body.light-mode #profileDrawer button:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html.light-mode #profileDrawer span,
body.light-mode #profileDrawer span {
    color: #0f172a !important;
}

/* APK Download Top Banner Light Mode Overrides */
html.light-mode #qx-apk-top-banner,
body.light-mode #qx-apk-top-banner {
    background: #ffffff !important;
    border-bottom-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

html.light-mode #qx-apk-top-banner span,
html.light-mode #qx-apk-top-banner .text-gray-200,
body.light-mode #qx-apk-top-banner span,
body.light-mode #qx-apk-top-banner .text-gray-200 {
    color: #0f172a !important;
    font-weight: 600 !important;
}

html.light-mode #qx-apk-top-banner button,
body.light-mode #qx-apk-top-banner button {
    color: #64748b !important;
}

html.light-mode #qx-apk-top-banner a[download],
body.light-mode #qx-apk-top-banner a[download] {
    background: linear-gradient(135deg, #00c853 0%, #00b0ff 100%) !important;
    color: #ffffff !important;
}

/* APK Download Popup Modal Light Mode */
html.light-mode #qx-apk-popup-modal > div,
body.light-mode #qx-apk-popup-modal > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.light-mode #qx-apk-popup-modal h3,
body.light-mode #qx-apk-popup-modal h3 {
    color: #0f172a !important;
}

html.light-mode #qx-apk-popup-modal p,
html.light-mode #qx-apk-popup-modal .text-gray-300,
body.light-mode #qx-apk-popup-modal p,
body.light-mode #qx-apk-popup-modal .text-gray-300 {
    color: #475569 !important;
}

html.light-mode #qx-apk-popup-modal [class*="bg-[#121722]"],
body.light-mode #qx-apk-popup-modal [class*="bg-[#121722]"] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html.light-mode #qx-apk-top-banner a[download] *,
body.light-mode #qx-apk-top-banner a[download] * {
    color: #ffffff !important;
}

/* 3. Secondary Inner Containers & Input Cards -> Light Grey (#f8fafc) */
html.light-mode main,
html.light-mode #activePairTab,
html.light-mode [class*="bg-[#272a37]"],
html.light-mode [class*="bg-[#242d40]"],
html.light-mode [class*="bg-[#28334a]"],
body.light-mode main,
body.light-mode #activePairTab,
body.light-mode [class*="bg-[#272a37]"],
body.light-mode [class*="bg-[#242d40]"],
body.light-mode [class*="bg-[#28334a]"] {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* 4. Force High-Contrast Dark Slate (#0f172a) for text in Light Mode across all sections & pages */
html.light-mode body,
html.light-mode section,
html.light-mode div,
html.light-mode main,
html.light-mode header,
html.light-mode footer,
html.light-mode aside,
html.light-mode article,
html.light-mode p,
html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5,
html.light-mode h6,
html.light-mode span,
html.light-mode label,
html.light-mode td,
html.light-mode th,
html.light-mode li,
body.light-mode body,
body.light-mode section,
body.light-mode div,
body.light-mode main,
body.light-mode header,
body.light-mode footer,
body.light-mode aside,
body.light-mode article,
body.light-mode p,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode span,
body.light-mode label,
body.light-mode td,
body.light-mode th,
body.light-mode li {
    color: #0f172a;
}

/* Force text-white and light text utility classes to Dark Slate (#0f172a) */
html.light-mode .text-white,
html.light-mode .text-gray-100,
html.light-mode .text-gray-200,
html.light-mode .text-gray-300,
html.light-mode .text-slate-100,
html.light-mode .text-slate-200,
html.light-mode .text-slate-300,
body.light-mode .text-white,
body.light-mode .text-gray-100,
body.light-mode .text-gray-200,
body.light-mode .text-gray-300,
body.light-mode .text-slate-100,
body.light-mode .text-slate-200,
body.light-mode .text-slate-300 {
    color: #0f172a !important;
}

/* Muted text in Light Mode */
html.light-mode .text-gray-400,
html.light-mode .text-gray-500,
html.light-mode .text-slate-400,
html.light-mode .text-slate-500,
body.light-mode .text-gray-400,
body.light-mode .text-gray-500,
body.light-mode .text-slate-400,
body.light-mode .text-slate-500 {
    color: #475569 !important;
}

/* 5. Inputs & Form controls */
html.light-mode input[type="text"],
html.light-mode input[type="number"],
html.light-mode input[type="password"],
html.light-mode input[type="email"],
html.light-mode textarea,
html.light-mode select,
html.light-mode .qx-input,
body.light-mode input[type="text"],
body.light-mode input[type="number"],
body.light-mode input[type="password"],
body.light-mode input[type="email"],
body.light-mode textarea,
body.light-mode select,
body.light-mode .qx-input {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* 6. Preserve Pure White Text (#ffffff) ONLY on Top Header Action Buttons & Badges! */
html.light-mode header [href*="deposit"],
html.light-mode header [href*="withdrawal"],
html.light-mode .qx-bg-green,
html.light-mode .qx-btn-green,
html.light-mode [class*="bg-[#00c853]"],
html.light-mode .qx-up-btn,
body.light-mode header [href*="deposit"],
body.light-mode header [href*="withdrawal"],
body.light-mode .qx-bg-green,
body.light-mode .qx-btn-green,
body.light-mode [class*="bg-[#00c853]"],
body.light-mode .qx-up-btn {
    background-color: #00c853 !important;
    color: #ffffff !important;
}

html.light-mode header [href*="deposit"] *,
html.light-mode header [href*="withdrawal"] *,
html.light-mode .qx-bg-green *,
html.light-mode .qx-btn-green *,
html.light-mode [class*="bg-[#00c853]"] *,
html.light-mode .qx-up-btn *,
body.light-mode header [href*="deposit"] *,
body.light-mode header [href*="withdrawal"] *,
body.light-mode .qx-bg-green *,
body.light-mode .qx-btn-green *,
body.light-mode [class*="bg-[#00c853]"] *,
body.light-mode .qx-up-btn * {
    color: #ffffff !important;
}

/* Red Down Trade Buttons & Red Badges */
html.light-mode .qx-down-btn,
html.light-mode .bg-red-500,
html.light-mode .bg-red-600,
body.light-mode .qx-down-btn,
body.light-mode .bg-red-500,
body.light-mode .bg-red-600 {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

html.light-mode .qx-down-btn *,
html.light-mode .bg-red-500 *,
html.light-mode .bg-red-600 *,
body.light-mode .qx-down-btn *,
body.light-mode .bg-red-500 *,
body.light-mode .bg-red-600 * {
    color: #ffffff !important;
}

/* Top Header Withdrawal Button -> Deep Dark Slate with Pure White Text */
html.light-mode header [href*="withdrawal"],
body.light-mode header [href*="withdrawal"] {
    background-color: #0f172a !important;
    color: #ffffff !important;
}

html.light-mode header [href*="withdrawal"] *,
body.light-mode header [href*="withdrawal"] * {
    color: #ffffff !important;
}

/* Active Deposit Payment Card Selection Overrides for both Light & Dark Theme */
.deposit-card-active,
html.light-mode .deposit-card-active,
body.light-mode .deposit-card-active {
    border-color: #00e676 !important;
    border-width: 2px !important;
    background-color: rgba(0, 230, 118, 0.15) !important;
    box-shadow: 0 4px 18px rgba(0, 230, 118, 0.3) !important;
}

html.light-mode .deposit-card-active *,
body.light-mode .deposit-card-active * {
    color: #0f172a !important;
}

html.light-mode .deposit-card-active .fa-check-circle,
body.light-mode .deposit-card-active .fa-check-circle {
    color: #00c853 !important;
}