/* ============================================================ DARK / LIGHT THEME – Futuristic Trading Panel ============================================================ */ /* ── Transition on every themed property ──────────────────── */ *, *::before, *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ── Theme Toggle Switch ──────────────────────────────────── */ /* Theme icon button */ .theme-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.13); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #555; padding: 0; outline: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .theme-btn:hover { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.22); color: #222; } /* moon visible in light mode, sun in dark mode */ .theme-btn .la-sun { display: none; } .theme-btn .la-moon { display: inline-block; } .dark-mode .theme-btn { border-color: rgba(255, 255, 255, 0.12); color: #8899aa; } .dark-mode .theme-btn:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--dm-accent); color: var(--dm-accent); box-shadow: 0 0 0 3px var(--dm-accent-glow); } .dark-mode .theme-btn .la-sun { display: inline-block; color: var(--dm-accent); } .dark-mode .theme-btn .la-moon { display: none; } /* ════════════════════════════════════════════════════════════ DARK MODE — Applied when has class "dark-mode" ════════════════════════════════════════════════════════════ */ /* ── Base Dark Colors ─────────────────────────────────────── */ .dark-mode { --dm-bg-primary: rgba(17, 24, 39); --dm-bg-secondary: #111620; --dm-bg-card: #151b28; --dm-bg-card-alt: #1a2235; --dm-bg-input: #111620; --dm-border: #1e2a3a; --dm-border-light: #253244; --dm-text-primary: #e8eaed; --dm-text-secondary:#8899aa; --dm-text-muted: #556677; --dm-accent: #1e9ff2; --dm-accent-glow: rgba(30, 159, 242, 0.15); --dm-green: #00c853; --dm-red: #ff1744; --dm-gradient: linear-gradient(135deg, #0b0e13 0%, #111620 100%); } /* ── Body & Main Wrapper ──────────────────────────────────── */ .dark-mode { background-color: var(--dm-bg-primary) !important; color: var(--dm-text-primary) !important; } .dark-mode .main-wrapper { background-color: var(--dm-bg-primary); } /* ── Header / Navbar ──────────────────────────────────────── */ .dark-mode .header { background-color: var(--dm-bg-secondary) !important; border-bottom: 1px solid var(--dm-border) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); } .dark-mode .header .main-menu li a, .dark-mode .header .main-menu li > a { color: var(--dm-text-secondary) !important; } .dark-mode .header .main-menu li a:hover, .dark-mode .header .main-menu li a.active { color: var(--dm-accent) !important; } .dark-mode .navbar-toggler { background-color: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; } /* ── Sub Menus ────────────────────────────────────────────── */ .dark-mode .sub-menu, .dark-mode .menu_has_children ul { background-color: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important; } .dark-mode .sub-menu li a, .dark-mode .menu_has_children ul li a { color: var(--dm-text-secondary) !important; } .dark-mode .sub-menu li a:hover, .dark-mode .menu_has_children ul li a:hover { color: var(--dm-accent) !important; background-color: var(--dm-accent-glow) !important; } /* ── Dropdown Menu (User Account) ─────────────────────────── */ .dark-mode .dropdown-menu { background-color: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important; } .dark-mode .dropdown-menu__item { color: var(--dm-text-secondary) !important; } .dark-mode .dropdown-menu__item:hover { color: var(--dm-accent) !important; background-color: var(--dm-accent-glow) !important; } .dark-mode .dropdown-head { border-bottom: 1px solid var(--dm-border) !important; } .dark-mode .dropdown-menu__caption { color: var(--dm-text-primary) !important; } .dark-mode .dropdown-menu .small.text-gray { color: var(--dm-text-muted) !important; } .dark-mode .dropdown-menu__item i { background: linear-gradient(135deg, #00e5ff, #0097a7) !important; color: #fff !important; } /* ── Cards & Widgets ──────────────────────────────────────── */ .dark-mode .card, .dark-mode .d-widget, .dark-mode .custom--card { background-color: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; } .dark-mode .card-header, .dark-mode .card .card-header { background-color: var(--dm-bg-card-alt) !important; border-bottom: 1px solid var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-mode .card-body { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } .dark-mode .card-footer { background-color: var(--dm-bg-card-alt) !important; border-top: 1px solid var(--dm-border) !important; } .dark-mode .d-widget__content { background-color: var(--dm-bg-card) !important; } .dark-mode .d-widget__content .d-widget__caption, .dark-mode .d-widget .caption { color: var(--dm-text-secondary) !important; } .dark-mode .d-widget__content .d-number { color: var(--dm-text-primary) !important; } /* ── Sections ─────────────────────────────────────────────── */ .dark-mode section { background-color: var(--dm-bg-primary) !important; } .dark-mode .dashboard-section, .dark-mode .pt-100, .dark-mode .pb-100 { background-color: var(--dm-bg-primary) !important; } /* ── Tables ───────────────────────────────────────────────── */ .dark-mode .table, .dark-mode table { color: var(--dm-text-primary) !important; --bs-table-bg: transparent; } .dark-mode .table thead th, .dark-mode table thead th, .dark-mode .custom-table thead tr th { background-color: var(--dm-bg-card-alt) !important; color: var(--dm-accent) !important; border-bottom: 2px solid var(--dm-border) !important; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; } .dark-mode .table tbody td, .dark-mode table tbody td { border-bottom: 1px solid var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-mode .table tbody tr:hover, .dark-mode table tbody tr:hover { background-color: var(--dm-accent-glow) !important; } .dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(17, 22, 32, 0.5) !important; --bs-table-bg-type: transparent; } /* ── Forms & Inputs ───────────────────────────────────────── */ .dark-mode .form-control, .dark-mode .form-select, .dark-mode .form--control, .dark-mode input[type="text"], .dark-mode input[type="email"], .dark-mode input[type="password"], .dark-mode input[type="number"], .dark-mode input[type="search"], .dark-mode textarea, .dark-mode select { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-mode .form-control:focus, .dark-mode .form-select:focus, .dark-mode .form--control:focus, .dark-mode input:focus, .dark-mode textarea:focus, .dark-mode select:focus { border-color: var(--dm-accent) !important; box-shadow: 0 0 0 3px var(--dm-accent-glow) !important; background-color: var(--dm-bg-input) !important; } .dark-mode .form-control::placeholder, .dark-mode .form--control::placeholder, .dark-mode input::placeholder, .dark-mode textarea::placeholder { color: var(--dm-text-muted) !important; } .dark-mode label { color: var(--dm-text-secondary) !important; } .dark-mode .input-group-text { background-color: var(--dm-bg-card-alt) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-mode .select2-container--default .select2-selection--single { background-color: var(--dm-bg-input) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dm-text-primary) !important; } .dark-mode .select2-dropdown { background-color: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; } .dark-mode .select2-results__option { color: var(--dm-text-secondary) !important; } .dark-mode .select2-results__option--highlighted { background-color: var(--dm-accent-glow) !important; color: var(--dm-accent) !important; } /* ── Buttons ──────────────────────────────────────────────── */ /* .dark-mode .btn--base { background: linear-gradient(135deg, #00e5ff, #0097a7) !important; color: #0b0e13 !important; border: none !important; font-weight: 600; box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3) !important; } */ /* .dark-mode .btn--base:hover { background: linear-gradient(135deg, #18ffff, #00bcd4) !important; box-shadow: 0 6px 25px rgba(0, 229, 255, 0.45) !important; transform: translateY(-1px); } .dark-mode .btn-outline--primary { color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; } .dark-mode .btn-outline--primary:hover { background-color: var(--dm-accent) !important; color: var(--dm-bg-primary) !important; } .dark-mode .btn-primary { background: linear-gradient(135deg, #00e5ff, #0097a7) !important; border-color: transparent !important; color: #0b0e13 !important; } .dark-mode .btn-success { background: linear-gradient(135deg, #00c853, #009624) !important; border-color: transparent !important; } .dark-mode .btn-danger { background: linear-gradient(135deg, #ff1744, #d50000) !important; border-color: transparent !important; } .dark-mode .btn-warning { background: linear-gradient(135deg, #ffa726, #f57c00) !important; border-color: transparent !important; } */ /* ── Badges & Status ──────────────────────────────────────── */ .dark-mode .badge { font-weight: 500; } .dark-mode .badge--success, .dark-mode .badge-success { background-color: rgba(0, 200, 83, 0.15) !important; color: var(--dm-green) !important; border: 1px solid rgba(0, 200, 83, 0.3); } .dark-mode .badge--danger, .dark-mode .badge-danger { background-color: rgba(255, 23, 68, 0.15) !important; color: var(--dm-red) !important; border: 1px solid rgba(255, 23, 68, 0.3); } .dark-mode .badge--warning, .dark-mode .badge-warning { background-color: rgba(255, 159, 67, 0.15) !important; color: #ffa726 !important; border: 1px solid rgba(255, 159, 67, 0.3); } .dark-mode .badge--primary, .dark-mode .badge-primary { background-color: var(--dm-accent-glow) !important; color: var(--dm-accent) !important; border: 1px solid rgba(0, 229, 255, 0.3); } /* ── Transaction Amounts ──────────────────────────────────── */ .dark-mode .t_ammount.plus.Complete { background: rgba(0, 200, 83, 0.15) !important; color: var(--dm-green) !important; } .dark-mode .t_ammount { color: var(--dm-text-primary) !important; } .dark-mode .in_usd { background: var(--dm-bg-card-alt) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } /* ── Modals ───────────────────────────────────────────────── */ .dark-mode .modal-content { background-color: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important; } .dark-mode .modal-header { background-color: var(--dm-bg-card-alt) !important; border-bottom: 1px solid var(--dm-border) !important; } .dark-mode .modal-header .modal-title, .dark-mode .modal-header .btn-close { color: var(--dm-text-primary) !important; } .dark-mode .modal-body { color: var(--dm-text-primary) !important; } .dark-mode .modal-footer { border-top: 1px solid var(--dm-border) !important; } /* ── Pagination ───────────────────────────────────────────── */ .dark-mode .pagination .page-item .page-link { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-mode .pagination .page-item.active .page-link { background: linear-gradient(135deg, #00e5ff, #0097a7) !important; color: #0b0e13 !important; border-color: transparent !important; } .dark-mode .pagination .page-item .page-link:hover { background-color: var(--dm-accent-glow) !important; color: var(--dm-accent) !important; } /* ── Alerts ───────────────────────────────────────────────── */ .dark-mode .alert { border: 1px solid var(--dm-border) !important; } .dark-mode .alert-info { background-color: rgba(0, 229, 255, 0.08) !important; color: var(--dm-accent) !important; border-color: rgba(0, 229, 255, 0.2) !important; } .dark-mode .alert-warning { background-color: rgba(255, 159, 67, 0.08) !important; color: #ffa726 !important; border-color: rgba(255, 159, 67, 0.2) !important; } .dark-mode .alert-success { background-color: rgba(0, 200, 83, 0.08) !important; color: var(--dm-green) !important; border-color: rgba(0, 200, 83, 0.2) !important; } .dark-mode .alert-danger { background-color: rgba(255, 23, 68, 0.08) !important; color: var(--dm-red) !important; border-color: rgba(255, 23, 68, 0.2) !important; } /* ── Footer ───────────────────────────────────────────────── */ .dark-mode .footer-section { background-color: var(--dm-bg-secondary) !important; border-top: 1px solid var(--dm-border) !important; } .dark-mode .footer-section__bottom p { color: var(--dm-text-muted) !important; } .dark-mode .footer-section__bottom { border-color: var(--dm-border) !important; } /* ── Preloader ────────────────────────────────────────────── */ .dark-mode .preloader { background-color: var(--dm-bg-primary) !important; } .dark-mode .loader { border-color: var(--dm-border) !important; border-top-color: var(--dm-accent) !important; } /* ── Breadcrumb ───────────────────────────────────────────── */ .dark-mode .breadcrumb { background-color: transparent !important; } .dark-mode .breadcrumb-item, .dark-mode .breadcrumb-item a { color: var(--dm-text-secondary) !important; } .dark-mode .breadcrumb-item.active { color: var(--dm-accent) !important; } /* ── Scrollbar ────────────────────────────────────────────── */ .dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } .dark-mode ::-webkit-scrollbar-track { background: var(--dm-bg-primary); } .dark-mode ::-webkit-scrollbar-thumb { background: var(--dm-border-light); border-radius: 4px; } .dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--dm-text-muted); } /* ── Charts (ApexCharts) ──────────────────────────────────── */ .dark-mode .apexcharts-canvas .apexcharts-text { fill: var(--dm-text-secondary) !important; } .dark-mode .apexcharts-gridline { stroke: var(--dm-border) !important; } .dark-mode .apexcharts-tooltip { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } /* ── Chat Widget ──────────────────────────────────────────── */ .dark-mode .chat-panel { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-mode .chat-panel-header { background: linear-gradient(135deg, #111620, #1a2c42) !important; } .dark-mode .chat-messages { background-color: var(--dm-bg-primary) !important; } .dark-mode .chat-input-area { background-color: var(--dm-bg-card) !important; border-top: 1px solid var(--dm-border) !important; } /* ── Ticket Styles ────────────────────────────────────────── */ .dark-mode .ticket-card, .dark-mode .support-ticket { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important; } .dark-mode .ticket-card:hover { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important; } .dark-mode .ticket-id { background: rgba(255, 255, 255, 0.15) !important; color: #fff !important; } /* Message thread */ .dark-mode .ticket-messages { background-color: var(--dm-bg-secondary) !important; scrollbar-color: var(--dm-border-light) transparent; } .dark-mode .ticket-messages::-webkit-scrollbar-track { background: var(--dm-bg-secondary) !important; } .dark-mode .ticket-messages::-webkit-scrollbar-thumb { background: var(--dm-border-light) !important; } .dark-mode .user-message .message-content, .dark-mode .message-content.bg-light, .dark-mode .message-content { background-color: var(--dm-bg-card-alt) !important; background: var(--dm-bg-card-alt) !important; border-left-color: var(--dm-accent) !important; color: var(--dm-text-primary) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; } .dark-mode .message-content p { color: var(--dm-text-secondary) !important; } .dark-mode .message-time { color: var(--dm-text-muted) !important; } /* Attachments */ .dark-mode .attachments { border-top-color: var(--dm-border) !important; } .dark-mode .admin-message .attachments { border-top-color: rgba(255,255,255,0.15) !important; } .dark-mode .attachment a { background: var(--dm-bg-card) !important; color: var(--dm-accent) !important; border: 1px solid var(--dm-border) !important; } .dark-mode .attachment a:hover { background: var(--dm-accent-glow) !important; } /* Reply form */ .dark-mode .reply-form { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important; } .dark-mode .reply-form::before { background: var(--dm-bg-card) !important; border-top-color: var(--dm-border) !important; border-left-color: var(--dm-border) !important; } .dark-mode .reply-form h5 { color: var(--dm-accent) !important; } .dark-mode .reply-form textarea, .dark-mode .reply-form .form-control { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-mode .reply-form textarea:focus, .dark-mode .reply-form .form-control:focus { border-color: var(--dm-accent) !important; box-shadow: 0 0 0 0.2rem var(--dm-accent-glow) !important; background-color: var(--dm-bg-input) !important; } .dark-mode .reply-form textarea::placeholder { color: var(--dm-text-muted) !important; } /* Ticket table (index) */ .dark-mode .ticket-table td { border-top-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-mode .ticket-table tbody tr { background-color: var(--dm-bg-card) !important; } .dark-mode .ticket-table tbody tr:hover { background-color: var(--dm-bg-card-alt) !important; } .dark-mode .ticket-subject { color: var(--dm-text-primary) !important; } /* Create ticket form */ .dark-mode .create-ticket-form { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; } .dark-mode .create-ticket-form .card-title { color: var(--dm-text-primary) !important; } .dark-mode .create-ticket-form label { color: var(--dm-text-secondary) !important; } .dark-mode .create-ticket-form .form-control { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-mode .create-ticket-form .form-control:focus { background-color: var(--dm-bg-input) !important; border-color: var(--dm-accent) !important; box-shadow: 0 0 0 0.2rem var(--dm-accent-glow) !important; } .dark-mode .create-ticket-form .form-control::placeholder { color: var(--dm-text-muted) !important; } /* Priority cards */ .dark-mode .priority-option { box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; } .dark-mode .priority-low { background-color: rgba(23,162,184,0.08) !important; border-color: rgba(23,162,184,0.2) !important; } .dark-mode .priority-medium { background-color: rgba(255,193,7,0.08) !important; border-color: rgba(255,193,7,0.2) !important; } .dark-mode .priority-high { background-color: rgba(220,53,69,0.08) !important; border-color: rgba(220,53,69,0.2) !important; } .dark-mode .priority-option.active { border-color: var(--dm-accent) !important; background-color: var(--dm-accent-glow) !important; } .dark-mode .priority-option .priority-text { color: var(--dm-text-primary) !important; } .dark-mode .priority-option .priority-desc { color: var(--dm-text-muted) !important; } /* Utility buttons */ .dark-mode .btn-light { background-color: var(--dm-bg-card-alt) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-mode .btn-light:hover { background-color: var(--dm-accent-glow) !important; color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; } .dark-mode .btn-outline-primary { color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; background-color: transparent !important; } .dark-mode .btn-outline-primary:hover { background-color: var(--dm-accent) !important; color: var(--dm-bg-primary) !important; } /* ── Sleep / Overlay ──────────────────────────────────────── */ .dark-mode .sleep-wrapper { background: rgba(11, 14, 19, 0.95) !important; } /* ── Miscellaneous / Utility ──────────────────────────────── */ .dark-mode .text--base { color: var(--dm-accent) !important; } .dark-mode .bg--base { background-color: rgba(0, 229, 255, 0.12) !important; } .dark-mode .text-muted { color: var(--dm-text-muted) !important; } .dark-mode p { color: var(--dm-text-secondary); } .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 { color: var(--dm-text-primary) !important; } .dark-mode a { color: var(--dm-text-secondary); } .dark-mode a:hover { color: var(--dm-accent); } .dark-mode hr { border-color: var(--dm-border) !important; opacity: 0.5; } .dark-mode .border, .dark-mode [class*="border-"] { border-color: var(--dm-border) !important; } .dark-mode .shadow, .dark-mode .box--shadow1 { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } .dark-mode .bg-white, .dark-mode .bg--white { background-color: var(--dm-bg-card) !important; } .dark-mode .bg-light { background-color: var(--dm-bg-secondary) !important; } .dark-mode .list-group-item { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } /* ── Navbar user info on dark ─────────────────────────────── */ .dark-mode .navbar-user__name { color: var(--dm-text-primary) !important; } .dark-mode .user_nav { color: var(--dm-text-primary) !important; } .dark-mode .icon .las { color: var(--dm-text-secondary) !important; } /* ── Filter buttons ───────────────────────────────────────── */ .dark-mode .btn-togle { color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; } .dark-mode .btn-togle.active { background: var(--dm-accent) !important; color: var(--dm-bg-primary) !important; } /* ── Cookies Card ─────────────────────────────────────────── */ .dark-mode .cookies-card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } /* ── iziToast Dark ────────────────────────────────────────── */ .dark-mode .iziToast { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-mode .iziToast .iziToast-body .iziToast-message { color: var(--dm-text-primary) !important; } /* ── Glow / Neon Accents for futuristic feel ──────────────── */ .dark-mode .d-widget:hover, .dark-mode .card:hover, .dark-mode .custom--card:hover { border-color: rgba(0, 229, 255, 0.25) !important; box-shadow: 0 4px 25px rgba(0, 229, 255, 0.08) !important; } .dark-mode .btn--base:active { box-shadow: 0 0 30px rgba(0, 229, 255, 0.4) !important; } /* ── Cursor-tracked glow effect for cards (optional JS) ──── */ .dark-mode .card::before, .dark-mode .d-widget::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 0; } .dark-mode .card:hover::before, .dark-mode .d-widget:hover::before { opacity: 1; } /* ── Education / Course Video Cards ───────────────────────── */ .dark-mode .course-card, .dark-mode .video-card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } /* ── Mobile responsive adjustments ────────────────────────── */ @media only screen and (max-width: 1200px) { .dark-mode .header { background: var(--dm-bg-secondary) !important; background-color: var(--dm-bg-secondary) !important; border-bottom: 1px solid var(--dm-border) !important; } .dark-mode .header .main-menu li > a.active, .dark-mode .header .main-menu li.open > a, .dark-mode .header .main-menu li:hover > a, .dark-mode .header .main-menu li > a { color: var(--dm-text-secondary) !important; } .dark-mode .header .main-menu li > a.active, .dark-mode .header .main-menu li > a:hover { color: var(--dm-accent) !important; } .dark-mode .navbar-collapse { background-color: var(--dm-bg-secondary) !important; border-radius: 0 0 12px 12px; padding: 10px; } } @media only screen and (max-width: 767px) { } /* ════════════════════════════════════════════════════════════ DASHBOARD WIDGETS — Dark Mode Overrides ════════════════════════════════════════════════════════════ */ /* ── Latest Transactions Table ────────────────────────────── */ .dark-mode .custom--table { color: #e8eaed !important; } .dark-mode .custom--table thead tr th { background-color: #1a2235 !important; color: #fff !important; border-color: #1e2a3a !important; } .dark-mode .custom--table tbody td { border-color: #1e2a3a !important; color: #8899aa !important; } .dark-mode .custom--table tbody tr:hover { background-color: rgba(0, 229, 255, 0.05) !important; } .dark-mode .custom--card { background-color: #151b28 !important; border-color: #1e2a3a !important; } .dark-mode .custom--card .card-header { background-color: #151b28 !important; border-bottom-color: #1e2a3a !important; } .dark-mode .custom--card .card-header h6 { color: #e8eaed !important; } .dark-mode .custom--card .card-body { background-color: #151b28 !important; } /* Transaction table badges */ .dark-mode .badge--success { background-color: rgba(0, 200, 83, 0.15) !important; color: #00c853 !important; } .dark-mode .badge--warning { background-color: rgba(255, 159, 67, 0.15) !important; color: #ffa726 !important; } .dark-mode .badge--danger { background-color: rgba(255, 23, 68, 0.15) !important; color: #ff1744 !important; } .dark-mode .badge--info { background-color: rgba(0, 229, 255, 0.12) !important; color: #00e5ff !important; } .dark-mode .badge--primary { background-color: rgba(0, 229, 255, 0.12) !important; color: #00e5ff !important; } .dark-mode .badge--secondary { background-color: rgba(136, 153, 170, 0.15) !important; color: #8899aa !important; } .dark-mode .badge--dark { background-color: rgba(136, 153, 170, 0.1) !important; color: #556677 !important; } /* Empty state in table */ .dark-mode .empty-state { color: #8899aa !important; } .dark-mode .empty-state .text-muted { color: #556677 !important; } .dark-mode .empty-state i { color: #556677 !important; } /* Coin info in table */ .dark-mode .coin-name { color: #8899aa !important; } .dark-mode .coin-abbr { color: #8899aa !important; } .dark-mode .coin-icon { background-color: rgba(0, 229, 255, 0.08) !important; } .dark-mode .coin-item { background-color: rgba(0, 229, 255, 0.04) !important; } .dark-mode .coin-item:hover { background-color: rgba(0, 229, 255, 0.08) !important; } .dark-mode .coin-breakdown { margin-top: 20px; background-color: rgba(0, 229, 255, 0.04) !important; } /* ── Cryptocurrency Market (TradingView Widget) ───────────── */ .dark-mode .tradingview-widget-container { background-color: #151b28 !important; } .dark-mode .tradingview-widget-copyright a span { color: #556677 !important; } /* ── Crypto News Feed ─────────────────────────────────────── */ .dark-mode .premium-news-card { background: #151b28 !important; border-color: #1e2a3a !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } .dark-mode .premium-news-card:hover { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important; border-color: rgba(0, 229, 255, 0.15) !important; } .dark-mode .news-header { border-color: #1e2a3a !important; } .dark-mode .news-icon-wrapper { background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 229, 255, 0.25)) !important; color: #00e5ff !important; } .dark-mode .news-title-content h6.news-title { color: #e8eaed !important; } .dark-mode .news-subtitle { color: #556677 !important; } .dark-mode .news-refresh-btn { background: rgba(0, 229, 255, 0.1) !important; border-color: rgba(0, 229, 255, 0.2) !important; color: #00e5ff !important; } .dark-mode .news-refresh-btn:hover { background: rgba(0, 229, 255, 0.2) !important; } /* News Items */ .dark-mode .news-item { background: #111620 !important; border-color: #1e2a3a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } .dark-mode .news-item:hover { background: #1a2235 !important; border-color: rgba(0, 229, 255, 0.2) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important; } .dark-mode .news-headline { color: #e8eaed !important; } .dark-mode .news-headline:hover { color: #00e5ff !important; } .dark-mode .news-excerpt { color: #8899aa !important; } .dark-mode .source-icon { background: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(0, 229, 255, 0.2)) !important; color: #00e5ff !important; } .dark-mode .source-name { color: #8899aa !important; } .dark-mode .news-time { color: #556677 !important; } /* News Tags */ .dark-mode .news-tag { background: rgba(0, 229, 255, 0.08) !important; color: #00e5ff !important; border-color: rgba(0, 229, 255, 0.2) !important; } .dark-mode .news-tag.bullish { background: rgba(0, 200, 83, 0.12) !important; color: #00c853 !important; border-color: rgba(0, 200, 83, 0.3) !important; } .dark-mode .news-tag.positive { background: rgba(0, 229, 255, 0.1) !important; color: #00e5ff !important; border-color: rgba(0, 229, 255, 0.25) !important; } .dark-mode .news-tag.neutral { background: rgba(136, 153, 170, 0.1) !important; color: #8899aa !important; border-color: rgba(136, 153, 170, 0.2) !important; } .dark-mode .news-tag.bearish { background: rgba(255, 23, 68, 0.12) !important; color: #ff1744 !important; border-color: rgba(255, 23, 68, 0.25) !important; } /* News Scrollbar */ .dark-mode .news-feed { scrollbar-color: rgba(0, 229, 255, 0.3) transparent !important; } .dark-mode .news-feed::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.25) !important; } .dark-mode .news-feed::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.4) !important; } /* Skeleton Loading (dark) */ .dark-mode .skeleton-avatar, .dark-mode .skeleton-line, .dark-mode .skeleton-meta { background: linear-gradient(90deg, #1a2235 25%, #253244 50%, #1a2235 75%) !important; background-size: 200% 100% !important; } .dark-mode .skeleton-item { border-bottom-color: #1e2a3a !important; } /* Load More / No More News */ .dark-mode .load-more-indicator, .dark-mode .no-more-news-indicator { border-top-color: #1e2a3a !important; } .dark-mode .load-more-content { color: #00e5ff !important; } .dark-mode .load-more-spinner { border-color: rgba(0, 229, 255, 0.2) !important; border-top-color: #00e5ff !important; } .dark-mode .no-more-content { color: #556677 !important; } /* News image placeholder */ .dark-mode .news-image { background: rgba(0, 229, 255, 0.06) !important; } .dark-mode .news-image-placeholder { color: #556677 !important; } /* ── Crypto Ticker Container ──────────────────────────────── */ .dark-mode .crypto-ticker-container { background: rgba(17, 22, 32, 0.95) !important; border-color: #1e2a3a !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } /* ── Profit / Loss Section ────────────────────────────────── */ .dark-mode .pnl-item { background: rgba(21, 27, 40, 0.8) !important; border-color: #1e2a3a !important; } .dark-mode .pnl-item:hover { background: rgba(26, 34, 53, 0.9) !important; } .dark-mode .pnl-item.profit { background: linear-gradient(135deg, rgba(0, 200, 83, 0.1), rgba(0, 200, 83, 0.03)) !important; border-color: rgba(0, 200, 83, 0.25) !important; } .dark-mode .pnl-item.loss { background: linear-gradient(135deg, rgba(255, 23, 68, 0.1), rgba(255, 23, 68, 0.03)) !important; border-color: rgba(255, 23, 68, 0.25) !important; } .dark-mode .pnl-label { color: #8899aa !important; } /* ── Live Badge (on ticker) ───────────────────────────────── */ .dark-mode .live-badge { background: rgba(0, 229, 255, 0.9) !important; color: #0b0e13 !important; box-shadow: 0 2px 8px rgba(0, 229, 255, 0.3) !important; } .dark-mode .live-badge .live-dot { background: #0b0e13 !important; } /* ── TradingView widget border fix ────────────────────────── */ .dark-mode .tradingview-widget-container iframe { border-radius: 8px; } .dark-mode .custom--table{ background-color: #151b28 ; } /* ── Quick Actions ────────────────────────────────────────── */ .dark-mode .quick-link-card { color: var(--dm-text-secondary) !important; background: transparent !important; border: none !important; box-shadow: none !important; } .dark-mode .quick-link-card .icon { background-color: var(--dm-bg-card-alt) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-accent) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } .dark-mode .quick-link-card .icon::before { background-color: var(--dm-accent) !important; opacity: 0.15 !important; } .dark-mode .quick-link-card .caption { color: var(--dm-text-secondary) !important; } .dark-mode .quick-link-card:hover { color: var(--dm-accent) !important; } .dark-mode .quick-link-card:hover .icon { background-color: var(--dm-bg-card-alt) !important; border-color: var(--dm-accent) !important; color: #fff !important; box-shadow: 0 4px 15px rgba(0, 229, 255, 0.25) !important; } .dark-mode .quick-link-card:hover .icon::before { background-color: var(--dm-accent) !important; opacity: 0.85 !important; } .dark-mode .quick-link-card:hover .caption { color: var(--dm-accent) !important; } /* ════════════════════════════════════════════════════════════ COMPREHENSIVE COMPONENT FIXES — All Remaining Color Conflicts (Audited from dashboard.css — applies to all panel pages) ════════════════════════════════════════════════════════════ */ /* ── d-widget base wrapper ────────────────────────────────── */ .dark-mode .d-widget { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-mode .d-widget__header { border-bottom-color: var(--dm-border) !important; } .dark-mode .d-widget__footer { border-top-color: var(--dm-border) !important; background-color: var(--dm-bg-card) !important; } .dark-mode .d-widget__footer a, .dark-mode .d-widget__footer .footer-link { color: var(--dm-text-secondary) !important; } .dark-mode .d-widget__footer a:hover { color: var(--dm-accent) !important; } /* ── Custom Dropdown ──────────────────────────────────────── */ .dark-mode .custom--dropdown .dropdown-menu { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important; } .dark-mode .custom--dropdown .dropdown-menu li { border-bottom-color: var(--dm-border) !important; } .dark-mode .custom--dropdown .dropdown-item { color: var(--dm-text-secondary) !important; background-color: transparent !important; } .dark-mode .custom--dropdown .dropdown-item:hover, .dark-mode .custom--dropdown .dropdown-item:focus { color: var(--dm-accent) !important; background-color: var(--dm-accent-glow) !important; } /* ── Custom Accordion ─────────────────────────────────────── */ .dark-mode .custom--accordion .accordion-item { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-mode .custom--accordion .accordion-button { background-color: var(--dm-bg-card-alt) !important; color: var(--dm-text-primary) !important; } .dark-mode .custom--accordion .accordion-button:not(.collapsed) { background-color: var(--dm-accent-glow) !important; color: var(--dm-accent) !important; box-shadow: none !important; } .dark-mode .custom--accordion .accordion-button::after { filter: invert(1) !important; } .dark-mode .custom--accordion .accordion-body { background-color: var(--dm-bg-card) !important; color: var(--dm-text-secondary) !important; border-top: 1px solid var(--dm-border) !important; } /* General accordion-button fix for all accordions */ .dark-mode .accordion-button { background-color: var(--dm-bg-card-alt) !important; color: var(--dm-text-primary) !important; } .dark-mode .accordion-button::after { filter: invert(1) brightness(0.8) !important; } .dark-mode .accordion-button:not(.collapsed) { color: var(--dm-accent) !important; background-color: var(--dm-accent-glow) !important; box-shadow: inset 0 -1px 0 var(--dm-border) !important; } .dark-mode .accordion-body { background-color: var(--dm-bg-card) !important; color: var(--dm-text-secondary) !important; } .dark-mode .accordion-item { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } /* ── Table Accordion ──────────────────────────────────────── */ .dark-mode .table--acordion .accordion-body { background-color: rgba(30, 159, 242, 0.04) !important; border-top: 1px solid var(--dm-border) !important; } /* ── Caption Lists ────────────────────────────────────────── */ .dark-mode .caption-list li { border-bottom-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-mode .caption-list li span { color: var(--dm-text-muted) !important; } .dark-mode .caption-list-two { background-color: rgba(30, 159, 242, 0.06) !important; border-radius: 8px; } .dark-mode .caption-list-two li { color: var(--dm-text-secondary) !important; border-bottom-color: var(--dm-border) !important; } .dark-mode .caption-list-two li span { color: var(--dm-text-muted) !important; } /* ── Common Lists ─────────────────────────────────────────── */ .dark-mode .cmn-list li { border-bottom-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-mode .cmn-list-two li { border-bottom-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-mode .cmn-list-two li:nth-child(even) { background-color: var(--dm-bg-card-alt) !important; } /* ── Text & Arrow Buttons ─────────────────────────────────── */ .dark-mode .text-btn { color: var(--dm-text-secondary) !important; } .dark-mode .text-btn:hover { color: var(--dm-accent) !important; } .dark-mode .arrow-btn { color: var(--dm-text-secondary) !important; } .dark-mode .arrow-btn:hover { color: var(--dm-accent) !important; } .dark-mode .arrow-btn span { background-color: var(--dm-bg-card-alt) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-mode .arrow-btn span::before, .dark-mode .arrow-btn span::after { background-color: var(--dm-bg-card-alt) !important; border-color: var(--dm-border) !important; } /* ── Security Single ──────────────────────────────────────── */ .dark-mode .security-single { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-mode .security-single__icon { background-color: var(--dm-accent-glow) !important; color: var(--dm-accent) !important; border-color: rgba(30, 159, 242, 0.3) !important; } .dark-mode .security-single__info { border-top-color: var(--dm-border) !important; } .dark-mode .security-single__body { border-top-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-mode .security-single__title { color: var(--dm-text-primary) !important; } /* ── Bank Cards ───────────────────────────────────────────── */ .dark-mode .bank-card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-mode .bank-card__title, .dark-mode .bank-card__name { color: var(--dm-text-primary) !important; } .dark-mode .bank-card__number, .dark-mode .bank-card__info { color: var(--dm-text-secondary) !important; } .dark-mode .bank-card.add-bank { border-color: var(--dm-border-light) !important; background-color: var(--dm-bg-card) !important; } .dark-mode .bank-card.add-bank .bank-card__icon { color: var(--dm-text-secondary) !important; border-color: var(--dm-border) !important; background-color: var(--dm-bg-card-alt) !important; } .dark-mode .bank-icon::after, .dark-mode .bank-card__icon::after { background-color: var(--dm-bg-card-alt) !important; } /* ── Deposit Card ─────────────────────────────────────────── */ .dark-mode .deposit-card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-mode .deposit-card ul li { border-bottom-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-mode .deposit-card ul li:nth-child(even) { background-color: var(--dm-bg-card-alt) !important; } .dark-mode .deposit-card__title, .dark-mode .deposit-card__name { color: var(--dm-text-primary) !important; } /* ── Custom Select Box Two ────────────────────────────────── */ .dark-mode .custom-select-box-two { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border) !important; } .dark-mode .custom-select-box-two label { color: var(--dm-text-muted) !important; background-color: var(--dm-bg-input) !important; } .dark-mode .custom-select-box-two select { color: var(--dm-text-primary) !important; background-color: transparent !important; } /* ── Custom Select Search Box ─────────────────────────────── */ .dark-mode .custom-select-search-box { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border) !important; } .dark-mode .custom-select-search-box input { color: var(--dm-text-primary) !important; background-color: transparent !important; } /* ── Responsive Table — odd rows ──────────────────────────── */ .dark-mode .table-responsive--sm tbody tr:nth-child(odd) { background-color: var(--dm-bg-card-alt) !important; } /* Data-label pseudo-elements ─────────────────────────────── */ .dark-mode [data-label]::before { color: var(--dm-text-muted) !important; } /* ── Form Control — readonly/disabled ────────────────────── */ .dark-mode .form--control[readonly], .dark-mode .form-control[readonly], .dark-mode .form--control[disabled], .dark-mode .form-control[disabled] { background-color: var(--dm-bg-secondary) !important; color: var(--dm-text-muted) !important; cursor: not-allowed; } /* ── Modal Bank Details ───────────────────────────────────── */ .dark-mode .modal-bank-details .left { background-color: var(--dm-bg-card-alt) !important; border-right-color: var(--dm-border) !important; } .dark-mode .modal-bank-details .left .icon { border-color: var(--dm-border) !important; background-color: var(--dm-bg-input) !important; color: var(--dm-accent) !important; } .dark-mode .modal-bank-details .right { background-color: var(--dm-bg-card) !important; } /* ── Header User Menu (avatar dropdown) ──────────────────── */ .dark-mode .header-user-menu { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important; } .dark-mode .header-user-menu li { border-bottom-color: var(--dm-border) !important; } .dark-mode .header-user-menu li a { color: var(--dm-text-secondary) !important; } .dark-mode .header-user-menu li a:hover { color: var(--dm-accent) !important; background-color: var(--dm-accent-glow) !important; } /* ── Sub-menu arrow (triangle pointer fix) ────────────────── */ .dark-mode .header .main-menu li .sub-menu::before { border-color: transparent transparent var(--dm-bg-card) transparent !important; } .dark-mode .header .main-menu li .sub-menu li { border-bottom-color: var(--dm-border) !important; } /* ── Transition / History list ────────────────────────────── */ .dark-mode .transition-list li { border-bottom-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } /* ── Profile / Info boxes ─────────────────────────────────── */ .dark-mode .info-card, .dark-mode .profile-card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-mode .info-list li { border-bottom-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } .dark-mode .info-list li .value { color: var(--dm-text-primary) !important; } /* ── Crypto Deposit Option ────────────────────────────────── */ .dark-mode .crypto-deposit-option { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } .dark-mode .crypto-deposit-option.active, .dark-mode .crypto-deposit-option:hover { border-color: var(--dm-accent) !important; background-color: var(--dm-accent-glow) !important; } /* ── Copy input / QR code box ─────────────────────────────── */ .dark-mode .copy-content { background-color: var(--dm-bg-card-alt) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-mode .qr-box { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; padding: 8px; border-radius: 8px; } /* ── Referal / Info badge pill ───────────────────────────── */ .dark-mode .referral-link-box { background-color: var(--dm-bg-card-alt) !important; border-color: var(--dm-border) !important; } /* ── Two-factor / OTP inputs ─────────────────────────────── */ .dark-mode .otp-input, .dark-mode .verification-code input { background-color: var(--dm-bg-card-alt) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } .dark-mode .otp-input:focus, .dark-mode .verification-code input:focus { border-color: var(--dm-accent) !important; box-shadow: 0 0 0 3px var(--dm-accent-glow) !important; } /* ── Notification / Alert box inside panels ──────────────── */ .dark-mode .notice-box, .dark-mode .info-box { background-color: rgba(30, 159, 242, 0.06) !important; border-color: rgba(30, 159, 242, 0.2) !important; color: var(--dm-text-secondary) !important; } /* ── Page title / header bar ─────────────────────────────── */ .dark-mode .page-title, .dark-mode .section-title { color: var(--dm-text-primary) !important; } .dark-mode .page-breadcrumb li, .dark-mode .page-breadcrumb li a { color: var(--dm-text-muted) !important; } .dark-mode .page-breadcrumb li.active { color: var(--dm-text-secondary) !important; } /* ── Custom Radio / Checkbox ──────────────────────────────── */ .dark-mode .custom-radio label, .dark-mode .custom-checkbox label { color: var(--dm-text-secondary) !important; } .dark-mode .custom-radio input[type="radio"]:not(:checked) ~ label::before, .dark-mode .custom-checkbox input[type="checkbox"]:not(:checked) ~ label::before { background-color: var(--dm-bg-input) !important; border-color: var(--dm-border-light) !important; } /* ── Wallet / Balance amount text ─────────────────────────── */ .dark-mode .wallet-balance, .dark-mode .balance-amount { color: var(--dm-text-primary) !important; } .dark-mode .balance-currency { color: var(--dm-text-secondary) !important; } /* ── Range Slider ─────────────────────────────────────────── */ .dark-mode .range-slider, .dark-mode input[type="range"] { background: var(--dm-bg-card-alt) !important; accent-color: var(--dm-accent); } /* ── Tabs (nav-tabs) ──────────────────────────────────────── */ .dark-mode .nav-tabs { border-bottom-color: var(--dm-border) !important; } .dark-mode .nav-tabs .nav-link { color: var(--dm-text-secondary) !important; background-color: transparent !important; border-color: transparent !important; } .dark-mode .nav-tabs .nav-link:hover { color: var(--dm-accent) !important; border-color: transparent !important; } .dark-mode .nav-tabs .nav-link.active, .dark-mode .nav-tabs .nav-item.show .nav-link { background-color: var(--dm-bg-card-alt) !important; border-color: var(--dm-border) var(--dm-border) var(--dm-bg-card-alt) !important; color: var(--dm-accent) !important; } .dark-mode .tab-content { background-color: var(--dm-bg-card) !important; } .dark-mode .tab-pane { color: var(--dm-text-secondary) !important; } /* ── Nav Pills ────────────────────────────────────────────── */ .dark-mode .nav-pills .nav-link { color: var(--dm-text-secondary) !important; background-color: transparent !important; } .dark-mode .nav-pills .nav-link:hover { color: var(--dm-accent) !important; background-color: var(--dm-accent-glow) !important; } .dark-mode .nav-pills .nav-link.active, .dark-mode .nav-pills .show > .nav-link { background-color: var(--dm-accent) !important; color: var(--dm-bg-primary) !important; } /* ── Sidebar menu active state extra ─────────────────────── */ .dark-mode .sidebar-menu__link.active, .dark-mode .sidebar-menu li.active > a { color: var(--dm-accent) !important; } /* ── Avatar / user image placeholder ─────────────────────── */ .dark-mode .avatar-placeholder { background-color: var(--dm-bg-card-alt) !important; color: var(--dm-text-secondary) !important; border-color: var(--dm-border) !important; } /* ════════════════════════════════════════════════════════════ DEPOSIT PAGE — Coin Search Component (search_coins.blade.php) ════════════════════════════════════════════════════════════ */ /* Wrapper & input container */ .dark-mode .search-wrapper { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important; } .dark-mode .search-wrapper:hover { border-color: var(--dm-accent) !important; box-shadow: 0 4px 15px var(--dm-accent-glow) !important; } .dark-mode .search-wrapper:focus-within { border-color: var(--dm-accent) !important; box-shadow: 0 0 0 3px var(--dm-accent-glow) !important; } .dark-mode .search-input-container { background: var(--dm-bg-card) !important; } .dark-mode .search-input-container:focus-within { box-shadow: none !important; } .dark-mode .search-icon { color: var(--dm-accent) !important; } .dark-mode .crypto-search-input { color: var(--dm-text-primary) !important; background: transparent !important; } .dark-mode .crypto-search-input::placeholder { color: var(--dm-text-muted) !important; } .dark-mode .search-clear { color: var(--dm-text-muted) !important; } .dark-mode .search-clear:hover { color: var(--dm-red) !important; background: rgba(255, 23, 68, 0.12) !important; } /* Loading state */ .dark-mode .search-loading { background: var(--dm-bg-card) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important; } .dark-mode .loader-ring { background: var(--dm-accent) !important; } .dark-mode .loading-text { color: var(--dm-accent) !important; } /* Search results dropdown */ .dark-mode .search-results { background: var(--dm-bg-card) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important; border: 1px solid var(--dm-border) !important; } .dark-mode .results-header { background: var(--dm-bg-card-alt) !important; border-bottom-color: var(--dm-border) !important; } .dark-mode .results-count { color: var(--dm-text-primary) !important; } .dark-mode .results-list { scrollbar-color: var(--dm-border-light) transparent; } .dark-mode .results-list::-webkit-scrollbar-track { background: var(--dm-bg-card) !important; } .dark-mode .results-list::-webkit-scrollbar-thumb { background: var(--dm-border-light) !important; } /* Individual result items */ .dark-mode .result-item { border-bottom-color: var(--dm-border) !important; background: var(--dm-bg-card) !important; } .dark-mode .result-item:hover { background: var(--dm-accent-glow) !important; transform: translateX(4px); } .dark-mode .coin-thumb { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } /* coin-name / coin-symbol inside result-item (these selectors are scoped to .result-item to avoid touching the portfolio cards) */ .dark-mode .result-item .coin-name { color: var(--dm-text-primary) !important; } .dark-mode .result-item .coin-symbol { color: var(--dm-accent) !important; } /* No-results & error states */ .dark-mode .no-results, .dark-mode .search-error { background: var(--dm-bg-card) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important; border: 1px solid var(--dm-border) !important; } .dark-mode .no-results h4, .dark-mode .search-error h4 { color: var(--dm-text-primary) !important; } .dark-mode .no-results p, .dark-mode .error-message { color: var(--dm-text-muted) !important; } .dark-mode .no-results-icon { background: rgba(30, 159, 242, 0.12) !important; color: var(--dm-accent) !important; } .dark-mode .error-icon { background: rgba(255, 23, 68, 0.12) !important; color: var(--dm-red) !important; } .dark-mode .dropdown-menu__item{ border-bottom: 1px solid var(--dm-border) !important; } /* ── Logo dark/light switching ────────────────────────────────── */ .logo-dark { display: none; } .dark-mode .logo-light { display: none; } .dark-mode .logo-dark { display: inline-block; }