/* ========================================================================= UNIFIED OVERRIDES — applies the Neovest design to ALL legacy pages. This file is loaded LAST so its rules win the cascade. It re-skins every legacy class used across the dashboard (`.site-card`, `.site-table`, `.site-badge`, `.transaction-*`, `.all-feature-mobile`, `.page-title`, pagination, forms, alerts, breadcrumbs, ranking, KYC, ticket, schema, portfolio, etc.) so we don't have to rewrite every blade file. Token convention follows pill-nav.css / dashboard-neo.css: body.dark-theme → LIGHT mode (default) body:not(.dark-theme) → DARK mode (after toggle) ========================================================================= */ /* ----------------------------------------------------------------------- 0. SHARED TOKENS — keep aligned with pill-nav.css / dashboard-neo.css. These are scoped to body so any page (even outside the panel-layout) can use them. ----------------------------------------------------------------------- */ :root { --uo-card-bg: #ffffff; --uo-card-bg-2: #f9fafb; --uo-card-border: rgba(15, 23, 42, 0.07); --uo-card-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03); --uo-card-radius: 18px; --uo-card-radius-sm: 12px; --uo-text-strong: #0f172a; --uo-text: #1f2937; --uo-text-muted: #6b7280; --uo-text-faint: #9ca3af; --uo-divider: rgba(15, 23, 42, 0.07); --uo-divider-strong: rgba(15, 23, 42, 0.12); --uo-accent: #2962ff; --uo-accent-hover: #1e4dd6; --uo-accent-soft: #dbeafe; --uo-accent-ink: #1e40af; --uo-success: #059669; --uo-success-soft: #d1fae5; --uo-success-ink: #065f46; --uo-danger: #dc2626; --uo-danger-soft: #fee2e2; --uo-danger-ink: #991b1b; --uo-warn: #d97706; --uo-warn-soft: #fef3c7; --uo-warn-ink: #92400e; --uo-input-bg: #ffffff; --uo-input-border: #d1d5db; --uo-input-focus: #93b4ff; --uo-page-bg: #f4f5f9; } body:not(.dark-theme) { --uo-card-bg: #16161a; --uo-card-bg-2: #1c1c20; --uo-card-border: rgba(255, 255, 255, 0.07); --uo-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); --uo-text-strong: #f5f5f4; --uo-text: #e5e5e4; --uo-text-muted: #a8a29e; --uo-text-faint: #78716c; --uo-divider: rgba(255, 255, 255, 0.08); --uo-divider-strong: rgba(255, 255, 255, 0.15); --uo-accent-soft: rgba(41, 98, 255, 0.18); --uo-accent-ink: #93b4ff; --uo-success-soft: rgba(5, 150, 105, 0.18); --uo-success-ink: #6ee7b7; --uo-danger-soft: rgba(220, 38, 38, 0.18); --uo-danger-ink: #fca5a5; --uo-warn-soft: rgba(245, 158, 11, 0.18); --uo-warn-ink: #fcd34d; --uo-input-bg: #1c1c20; --uo-input-border: #2c2c33; --uo-input-focus: rgba(41, 98, 255, 0.55); --uo-page-bg: #0a0a0b; } /* ----------------------------------------------------------------------- 1. PAGE BACKGROUND — pin both layout and html for parity. ----------------------------------------------------------------------- */ body, html { background: var(--uo-page-bg) !important; } .panel-layout, .panel-layout .page-container { background: var(--uo-page-bg) !important; } /* ----------------------------------------------------------------------- 1A. STRUCTURAL OVERRIDES — defeat the leftover `body .panel-layout` rules from clean-redesign.css that: (a) shrink the sidebar to width:0 on mobile (breaking the drawer) (b) push the page-container 248px to the right on desktop (leaving a huge empty band on the left, since the new drawer is off-canvas) These rules use `body` + `body.dark-theme` prefix to match specificity. ----------------------------------------------------------------------- */ body .panel-layout .page-container, body.dark-theme .panel-layout .page-container, .panel-layout .page-container { padding-left: 0 !important; margin-left: 0 !important; } @media (max-width: 991px) { body .panel-layout .page-container, body.dark-theme .panel-layout .page-container, .panel-layout .page-container { padding-left: 0 !important; } /* Drawer must be 290px on mobile too — defeat the width:0 rule. */ body .panel-layout .side-nav, body.dark-theme .panel-layout .side-nav, .panel-layout .side-nav { width: 290px !important; max-width: 86vw !important; padding: 18px 14px 24px !important; } } /* Same for desktop. The legacy rule pinned the sidebar at 248px wide — make it 290px and rely on the transform to keep it off-canvas. */ body .panel-layout .side-nav, body.dark-theme .panel-layout .side-nav { width: 290px !important; max-width: 86vw !important; padding: 18px 14px 24px !important; } /* The legacy logo block hard-wired to 248px width inside the header — we already hide the panel-header logo, but defeat the width rule anyway. */ body .panel-layout .panel-header .logo, body.dark-theme .panel-layout .panel-header .logo { width: auto !important; display: none !important; } /* ----------------------------------------------------------------------- 2. PAGE TITLE / TITLE BAR The legacy `.page-title .title-content` was a flex row with a bright purple/orange action button. Make it match the np-card-title look. ----------------------------------------------------------------------- */ .panel-layout .page-container .main-content .page-title { padding: 4px 0 14px !important; } .panel-layout .page-container .main-content .page-title .title-content { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; } .panel-layout .page-container .main-content .page-title .title-content .title, body .panel-layout .page-container .main-content .page-title .title-content .title, body.dark-theme .panel-layout .page-container .main-content .page-title .title-content .title { font-size: 20px !important; font-weight: 600 !important; color: var(--uo-text-strong) !important; margin: 0 !important; letter-spacing: -0.01em !important; text-transform: none !important; } @media (min-width: 768px) { .panel-layout .page-container .main-content .page-title .title-content .title { font-size: 22px !important; } } .panel-layout .page-container .main-content .page-title .title-content .title-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: var(--uo-accent) !important; color: #ffffff !important; border-radius: 999px !important; padding: 8px 18px !important; border: none !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; transition: background .15s !important; text-decoration: none !important; } .panel-layout .page-container .main-content .page-title .title-content .title-btn:hover { background: var(--uo-accent-hover) !important; color: #fff !important; } .panel-layout .page-container .main-content .page-title .title-content .title-btn svg, .panel-layout .page-container .main-content .page-title .title-content .title-btn i { height: 16px !important; width: 16px !important; top: 0 !important; margin: 0 !important; } /* ----------------------------------------------------------------------- 3. SITE-CARD — the universal card wrapper used by nearly every page. Override the legacy white/teal/navy chrome with the same look as np-card from dashboard-neo.css. ----------------------------------------------------------------------- */ body .panel-layout .site-card, body.dark-theme .panel-layout .site-card, body .site-card, body.dark-theme .site-card { background: var(--uo-card-bg) !important; border: 1px solid var(--uo-card-border) !important; border-radius: var(--uo-card-radius) !important; box-shadow: var(--uo-card-shadow) !important; overflow: hidden !important; margin-bottom: 16px !important; padding: 0 !important; } body .panel-layout .site-card .site-card-header, body.dark-theme .panel-layout .site-card .site-card-header, body .site-card .site-card-header { background: transparent !important; border-bottom: 1px solid var(--uo-divider) !important; padding: 18px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 10px !important; } body .site-card .site-card-header .title, body.dark-theme .panel-layout .site-card .site-card-header .title, body .panel-layout .site-card .site-card-header .title, body .site-card .site-card-header h3, body .site-card .site-card-header h4, body .site-card .site-card-header h5 { font-size: 17px !important; font-weight: 600 !important; color: var(--uo-text-strong) !important; margin: 0 !important; letter-spacing: -0.01em !important; text-transform: none !important; } body .site-card .site-card-body, body.dark-theme .panel-layout .site-card .site-card-body { background: transparent !important; padding: 20px !important; color: var(--uo-text) !important; } /* When the search filter is in the header, give it room */ .site-card .site-card-header .search, .site-card .site-card-header form { flex: 0 0 auto; } /* ----------------------------------------------------------------------- 4. TABLE — `.site-table .table`, `.table-responsive .table`, `.table-hover` ----------------------------------------------------------------------- */ body .site-card .site-table .table, body .site-card .table-responsive .table, body .site-table .table, body .table.table-hover, body.dark-theme .site-card .site-table .table, body.dark-theme .site-card .table-responsive .table, body.dark-theme .site-table .table { width: 100% !important; border-collapse: collapse !important; background: transparent !important; color: var(--uo-text) !important; margin: 0 !important; } body .site-table .table thead th, body .table.table-hover thead th, body.dark-theme .site-table .table thead th, body.dark-theme .table.table-hover thead th { text-align: left !important; font-size: 12px !important; font-weight: 600 !important; color: var(--uo-text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; padding: 12px 16px !important; background: transparent !important; border-top: none !important; border-bottom: 1px solid var(--uo-divider) !important; white-space: nowrap !important; } body .site-table .table tbody td, body .table.table-hover tbody td, body.dark-theme .site-table .table tbody td, body.dark-theme .table.table-hover tbody td { padding: 14px 16px !important; font-size: 13.5px !important; color: var(--uo-text) !important; border-top: none !important; border-bottom: 1px solid var(--uo-divider) !important; vertical-align: middle !important; background: transparent !important; } body .site-table .table tbody tr:last-child td, body .table.table-hover tbody tr:last-child td, body.dark-theme .site-table .table tbody tr:last-child td, body.dark-theme .table.table-hover tbody tr:last-child td { border-bottom: none !important; } body .table.table-hover tbody tr:hover td, body.dark-theme .table.table-hover tbody tr:hover td { background: rgba(41, 98, 255, 0.04) !important; } body:not(.dark-theme) .table.table-hover tbody tr:hover td { background: rgba(255, 255, 255, 0.03) !important; } body .site-table code, body.dark-theme .site-table code, body .site-card code, body.dark-theme .site-card code { background: var(--uo-card-bg-2) !important; color: var(--uo-text-strong) !important; padding: 2px 6px !important; border-radius: 6px !important; font-family: ui-monospace, "SF Mono", Menlo, monospace !important; font-size: 12.5px !important; } body .site-card strong, body.dark-theme .site-card strong { color: var(--uo-text-strong) !important; font-weight: 600 !important; } /* `.table-description` is the icon+text block used in transaction tables */ body .table-description, body.dark-theme .table-description { display: flex !important; align-items: center !important; gap: 12px !important; } body .table-description .icon, body.dark-theme .table-description .icon { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: var(--uo-accent) !important; color: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } body .table-description .icon i, body .table-description .icon svg, body.dark-theme .table-description .icon i, body.dark-theme .table-description .icon svg { width: 16px !important; height: 16px !important; color: #fff !important; margin: 0 !important; } body .table-description .description, body.dark-theme .table-description .description { min-width: 0; } body .table-description .description strong, body.dark-theme .table-description .description strong { color: var(--uo-text-strong) !important; font-size: 14px !important; line-height: 1.2 !important; display: block !important; margin-bottom: 2px !important; } body .table-description .description .date, body.dark-theme .table-description .description .date { color: var(--uo-text-faint) !important; font-size: 12px !important; line-height: 1.2 !important; } body .optional-msg, body.dark-theme .optional-msg { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 4px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: var(--uo-warn-soft) !important; color: var(--uo-warn-ink) !important; } body .optional-msg i, body .optional-msg svg, body.dark-theme .optional-msg i, body.dark-theme .optional-msg svg { width: 11px !important; height: 11px !important; } /* ----------------------------------------------------------------------- 5. SITE-BADGE pills — the colored type/status chips. ----------------------------------------------------------------------- */ body .site-badge, body.dark-theme .site-badge { display: inline-flex !important; align-items: center !important; padding: 5px 12px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; background: var(--uo-accent-soft) !important; color: var(--uo-accent-ink) !important; text-transform: capitalize !important; white-space: nowrap !important; border: none !important; } body .site-badge.primary-bg, body.dark-theme .site-badge.primary-bg { background: var(--uo-accent-soft) !important; color: var(--uo-accent-ink) !important; } body .site-badge.success, body.dark-theme .site-badge.success { background: var(--uo-success-soft) !important; color: var(--uo-success-ink) !important; } body .site-badge.warnning, body .site-badge.warning, body.dark-theme .site-badge.warnning, body.dark-theme .site-badge.warning { background: var(--uo-warn-soft) !important; color: var(--uo-warn-ink) !important; } body .site-badge.failed, body .site-badge.danger, body.dark-theme .site-badge.failed, body.dark-theme .site-badge.danger { background: var(--uo-danger-soft) !important; color: var(--uo-danger-ink) !important; } /* Amount colors used inside tables and mobile tx rows */ body .green-color, body .add, body.dark-theme .green-color, body.dark-theme .add { color: var(--uo-success) !important; font-weight: 600 !important; } body .red-color, body .sub, body.dark-theme .red-color, body.dark-theme .sub { color: var(--uo-danger) !important; font-weight: 600 !important; } /* ----------------------------------------------------------------------- 6. SEARCH / FILTER BAR (`.table-filter .filter .search`, `.apply-btn`) ----------------------------------------------------------------------- */ body .table-filter, body.dark-theme .table-filter { padding: 0 0 16px !important; margin: 0 !important; } body .table-filter .filter, body.dark-theme .table-filter .filter { background: transparent !important; padding: 0 !important; border: none !important; } body .table-filter .filter form, body.dark-theme .table-filter .filter form { margin: 0 !important; } body .table-filter .filter .search, body.dark-theme .table-filter .filter .search { display: flex !important; align-items: stretch !important; flex-wrap: wrap !important; gap: 8px !important; background: transparent !important; border: none !important; padding: 0 !important; } body .table-filter .filter .search input, body.dark-theme .table-filter .filter .search input { flex: 1 1 200px; min-width: 0; height: 42px !important; padding: 0 14px !important; border-radius: 999px !important; border: 1px solid var(--uo-input-border) !important; background: var(--uo-input-bg) !important; color: var(--uo-text) !important; font-size: 13.5px !important; } body .table-filter .filter .search input:focus, body.dark-theme .table-filter .filter .search input:focus { outline: none !important; border-color: var(--uo-accent) !important; box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15) !important; } body .table-filter .filter .search input[type="date"], body.dark-theme .table-filter .filter .search input[type="date"] { max-width: 180px; } body .table-filter .filter .search .apply-btn, body.dark-theme .table-filter .filter .search .apply-btn, body .apply-btn, body.dark-theme .apply-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: 42px !important; padding: 0 22px !important; background: var(--uo-accent) !important; color: #ffffff !important; border: none !important; border-radius: 999px !important; font-size: 13.5px !important; font-weight: 600 !important; cursor: pointer !important; transition: background .15s !important; } body .apply-btn:hover, body.dark-theme .apply-btn:hover { background: var(--uo-accent-hover) !important; color: #fff !important; } body .apply-btn i, body .apply-btn svg, body.dark-theme .apply-btn i, body.dark-theme .apply-btn svg { width: 14px !important; height: 14px !important; margin: 0 !important; } /* ----------------------------------------------------------------------- 7. PAGINATION (Laravel's default markup uses .pagination, .page-item, .page-link) ----------------------------------------------------------------------- */ body .pagination, body.dark-theme .pagination { display: flex !important; align-items: center !important; gap: 4px !important; list-style: none !important; padding: 14px 0 0 !important; margin: 0 !important; flex-wrap: wrap !important; } body .pagination .page-item, body.dark-theme .pagination .page-item { margin: 0 !important; } body .pagination .page-link, body.dark-theme .pagination .page-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; border-radius: 999px !important; background: transparent !important; border: 1px solid var(--uo-divider-strong) !important; color: var(--uo-text) !important; font-size: 13px !important; font-weight: 500 !important; transition: background .15s, color .15s !important; text-decoration: none !important; box-shadow: none !important; } body .pagination .page-link:hover, body.dark-theme .pagination .page-link:hover { background: var(--uo-card-bg-2) !important; color: var(--uo-text-strong) !important; border-color: var(--uo-divider-strong) !important; } body .pagination .page-item.active .page-link, body.dark-theme .pagination .page-item.active .page-link { background: var(--uo-accent) !important; color: #fff !important; border-color: var(--uo-accent) !important; } body .pagination .page-item.disabled .page-link, body.dark-theme .pagination .page-item.disabled .page-link { opacity: 0.45 !important; cursor: not-allowed !important; } /* Compact, centered pagination on small screens */ @media (max-width: 575px) { body .pagination, body.dark-theme .pagination { justify-content: center !important; } } /* ----------------------------------------------------------------------- 8. MOBILE TRANSACTION CARDS (`.all-feature-mobile`, `.single-transaction`) These render on `/transactions`, `/deposit/log`, `/withdraw/log`, `/send_money/log` for mobile users. ----------------------------------------------------------------------- */ body .all-feature-mobile, body.dark-theme .all-feature-mobile { background: var(--uo-card-bg) !important; border: 1px solid var(--uo-card-border) !important; border-radius: var(--uo-card-radius) !important; box-shadow: var(--uo-card-shadow) !important; padding: 18px 16px !important; margin-bottom: 16px !important; } body .all-feature-mobile > .title, body.dark-theme .all-feature-mobile > .title { font-size: 17px !important; font-weight: 600 !important; color: var(--uo-text-strong) !important; margin: 0 0 14px !important; letter-spacing: -0.01em !important; text-transform: none !important; } body .mobile-transaction-filter, body.dark-theme .mobile-transaction-filter { margin-bottom: 12px !important; } body .all-feature-mobile .contents, body.dark-theme .all-feature-mobile .contents { display: flex !important; flex-direction: column !important; gap: 10px !important; } body .single-transaction, body.dark-theme .single-transaction { display: flex !important; align-items: stretch !important; justify-content: space-between !important; gap: 12px !important; padding: 12px 14px !important; border-radius: var(--uo-card-radius-sm) !important; background: var(--uo-card-bg-2) !important; border: 1px solid var(--uo-divider) !important; } body .single-transaction .transaction-left, body.dark-theme .single-transaction .transaction-left { min-width: 0; flex: 1; } body .single-transaction .transaction-title, body.dark-theme .single-transaction .transaction-title { font-size: 14px !important; font-weight: 600 !important; color: var(--uo-text-strong) !important; margin-bottom: 2px !important; line-height: 1.25 !important; } body .single-transaction .transaction-id, body.dark-theme .single-transaction .transaction-id { font-family: ui-monospace, "SF Mono", Menlo, monospace !important; font-size: 11.5px !important; color: var(--uo-text-muted) !important; } body .single-transaction .transaction-date, body.dark-theme .single-transaction .transaction-date { font-size: 11.5px !important; color: var(--uo-text-faint) !important; } body .single-transaction .transaction-right, body.dark-theme .single-transaction .transaction-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } body .single-transaction .transaction-amount, body.dark-theme .single-transaction .transaction-amount { font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; } body .single-transaction .transaction-amount.add, body.dark-theme .single-transaction .transaction-amount.add { color: var(--uo-success) !important; } body .single-transaction .transaction-amount.sub, body.dark-theme .single-transaction .transaction-amount.sub { color: var(--uo-danger) !important; } body .single-transaction .transaction-fee, body.dark-theme .single-transaction .transaction-fee { font-size: 11px !important; color: var(--uo-text-muted) !important; } body .single-transaction .transaction-gateway, body.dark-theme .single-transaction .transaction-gateway { font-size: 11px !important; color: var(--uo-text-faint) !important; text-transform: capitalize !important; } body .single-transaction .transaction-status, body.dark-theme .single-transaction .transaction-status { display: inline-flex !important; align-items: center !important; padding: 3px 10px !important; border-radius: 999px !important; font-size: 10.5px !important; font-weight: 600 !important; text-transform: capitalize !important; margin-top: 4px !important; } body .single-transaction .transaction-status.pending, body.dark-theme .single-transaction .transaction-status.pending { background: var(--uo-warn-soft) !important; color: var(--uo-warn-ink) !important; } body .single-transaction .transaction-status.success, body.dark-theme .single-transaction .transaction-status.success { background: var(--uo-success-soft) !important; color: var(--uo-success-ink) !important; } body .single-transaction .transaction-status.canceled, body .single-transaction .transaction-status.failed, body.dark-theme .single-transaction .transaction-status.canceled, body.dark-theme .single-transaction .transaction-status.failed { background: var(--uo-danger-soft) !important; color: var(--uo-danger-ink) !important; } /* ----------------------------------------------------------------------- 9. FORMS — generic Bootstrap-like inputs used across settings, KYC, ticket forms, deposit forms, withdraw forms, etc. ----------------------------------------------------------------------- */ body .form-control, body .form-control-textarea, body .form-select, body input[type="text"]:not(.cr-input):not(.np-ref-input):not(.site-nice-select):not([class*="nice-select"]), body input[type="email"]:not(.cr-input):not(.np-ref-input):not(.site-nice-select):not([class*="nice-select"]), body input[type="number"]:not(.cr-input):not(.np-ref-input):not(.site-nice-select):not([class*="nice-select"]), body input[type="password"]:not(.cr-input):not(.np-ref-input):not(.site-nice-select):not([class*="nice-select"]), body input[type="date"]:not(.cr-input):not(.np-ref-input):not(.site-nice-select):not([class*="nice-select"]), body select:not(.cr-select):not(.site-nice-select):not([class*="nice-select"]), body textarea, body.dark-theme .form-control, body.dark-theme .form-control-textarea, body.dark-theme .form-select, body.dark-theme textarea { background: var(--uo-input-bg) !important; border: 1px solid var(--uo-input-border) !important; color: var(--uo-text) !important; border-radius: 12px !important; font-size: 14px !important; padding: 10px 14px !important; transition: border-color .15s, box-shadow .15s !important; box-shadow: none !important; } body .form-control:focus, body .form-control-textarea:focus, body .form-select:focus, body textarea:focus, body.dark-theme .form-control:focus, body.dark-theme .form-control-textarea:focus, body.dark-theme .form-select:focus, body.dark-theme textarea:focus { border-color: var(--uo-accent) !important; box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.15) !important; outline: none !important; background: var(--uo-input-bg) !important; color: var(--uo-text) !important; } body .form-control::placeholder, body textarea::placeholder, body.dark-theme .form-control::placeholder, body.dark-theme textarea::placeholder { color: var(--uo-text-faint) !important; } body label, body.dark-theme label, body .progress-steps-form label, body.dark-theme .progress-steps-form label { color: var(--uo-text-strong) !important; font-weight: 500 !important; font-size: 13.5px !important; margin-bottom: 6px !important; } body .input-group, body.dark-theme .input-group { border-radius: 12px !important; /* IMPORTANT: do NOT set overflow:hidden here — it clips the `.nice-select .list` dropdown that opens below the select, leaving it invisible. The form-control/input-group-text children below handle their own corner rounding. */ overflow: visible !important; } body .input-group .input-group-text, body.dark-theme .input-group .input-group-text { background: var(--uo-card-bg-2) !important; border: 1px solid var(--uo-input-border) !important; color: var(--uo-text-muted) !important; font-size: 13.5px !important; } body .input-group .form-control, body .input-group .form-select, body.dark-theme .input-group .form-control, body.dark-theme .input-group .form-select { border-radius: 12px !important; } /* ----------------------------------------------------------------------- 10. BUTTONS — `.site-btn` and its variants (`.grad-btn`, `.red-btn`). The drawer logout button is already styled by pill-nav.css, but for page-content buttons we re-style here. ----------------------------------------------------------------------- */ body .site-btn:not(.grad-btn), body.dark-theme .site-btn:not(.grad-btn) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 42px !important; padding: 0 22px !important; background: var(--uo-accent) !important; color: #ffffff !important; border: none !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: background .15s, transform .15s !important; text-decoration: none !important; box-shadow: none !important; } body .site-btn:not(.grad-btn):hover, body.dark-theme .site-btn:not(.grad-btn):hover { background: var(--uo-accent-hover) !important; color: #fff !important; } /* The page-content `.site-btn.grad-btn` (outside the drawer/.side-nav) */ body .site-card .site-btn.grad-btn, body .site-card-body .site-btn.grad-btn, body .progress-steps-form .site-btn.grad-btn, body.dark-theme .site-card .site-btn.grad-btn, body.dark-theme .site-card-body .site-btn.grad-btn, body.dark-theme .progress-steps-form .site-btn.grad-btn { background: var(--uo-accent) !important; color: #fff !important; border: none !important; border-radius: 999px !important; padding: 0 22px !important; height: 42px !important; font-weight: 600 !important; font-size: 14px !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-decoration: none !important; text-align: center !important; line-height: 1 !important; cursor: pointer !important; transition: background .15s !important; } body .site-card .site-btn.grad-btn:hover, body.dark-theme .site-card .site-btn.grad-btn:hover { background: var(--uo-accent-hover) !important; color: #fff !important; } /* Force the inline icon inside grad-btn to be centered and visible */ body .site-card .site-btn.grad-btn i, body .site-card .site-btn.grad-btn svg, body.dark-theme .site-card .site-btn.grad-btn i, body.dark-theme .site-card .site-btn.grad-btn svg, body .site-card-body .site-btn.grad-btn i, body .site-card-body .site-btn.grad-btn svg { color: #ffffff !important; width: 14px !important; height: 14px !important; line-height: 1 !important; margin: 0 !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; } /* `.w-100` modifier makes it full-width — keep the centered flex layout */ body .site-btn.grad-btn.w-100, body.dark-theme .site-btn.grad-btn.w-100 { width: 100% !important; } /* `.centered` modifier is just an alignment hint — ensure flex stays centered */ body .site-btn.grad-btn.centered, body.dark-theme .site-btn.grad-btn.centered { justify-content: center !important; } body .btn-primary, body.dark-theme .btn-primary { background: var(--uo-accent) !important; border-color: var(--uo-accent) !important; color: #fff !important; border-radius: 999px !important; } body .btn-primary:hover, body.dark-theme .btn-primary:hover { background: var(--uo-accent-hover) !important; border-color: var(--uo-accent-hover) !important; color: #fff !important; } body .btn-danger, body.dark-theme .btn-danger { background: var(--uo-danger) !important; border-color: var(--uo-danger) !important; color: #fff !important; border-radius: 999px !important; } body .btn-success, body.dark-theme .btn-success { background: var(--uo-success) !important; border-color: var(--uo-success) !important; color: #fff !important; border-radius: 999px !important; } /* ----------------------------------------------------------------------- 11. PROGRESS-STEPS / WIZARDS — used in /user/deposit, /user/withdraw, /user/send-money, /user/wallet flows. Two-step indicator showing "01 Deposit Amount" → "02 Success". IMPORTANT: the actual CSS class on the active step is `.current`, NOT `.active` (set in DepositController.php line 27 as `$isStepOne = 'current'`). Legacy CSS gives: - `.single-step .number` → `#e73667` pink circle - `.single-step.current` → `#2a9d8f` mint green panel - `.single-step.current .number` → `#ffc300` yellow circle - Plus a small yellow dot pseudo-element on `.current::after` Re-skin all of these to the new blue accent palette. ----------------------------------------------------------------------- */ body .progress-steps, body.dark-theme .progress-steps { background: transparent !important; display: flex !important; gap: 12px !important; flex-wrap: wrap !important; margin-bottom: 24px !important; padding: 0 !important; justify-content: flex-start !important; } body .progress-steps .single-step, body.dark-theme .progress-steps .single-step { flex: 1 1 240px !important; background: var(--uo-card-bg-2) !important; border: 1px solid var(--uo-divider) !important; color: var(--uo-text) !important; border-radius: var(--uo-card-radius-sm) !important; padding: 14px 16px !important; display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 !important; position: relative !important; opacity: 0.7 !important; transition: opacity .2s, background .2s, border-color .2s !important; } /* CURRENT step — active highlight with accent-soft tint */ body .progress-steps .single-step.current, body.dark-theme .progress-steps .single-step.current, body .progress-steps .single-step.active, body.dark-theme .progress-steps .single-step.active { background: var(--uo-accent-soft) !important; border-color: var(--uo-accent) !important; color: var(--uo-accent-ink) !important; opacity: 1 !important; } /* The pseudo-element yellow dot from legacy — hide it. */ body .progress-steps .single-step.current::after, body .progress-steps .single-step.current::before, body.dark-theme .progress-steps .single-step.current::after, body.dark-theme .progress-steps .single-step.current::before { display: none !important; content: none !important; } /* The "01" / "02" badge — was `#e73667` pink for inactive, `#ffc300` yellow for current. Recolor: inactive = neutral, current = accent. */ body .progress-steps .single-step .number, body.dark-theme .progress-steps .single-step .number { background: var(--uo-divider) !important; color: var(--uo-text-muted) !important; height: 36px !important; width: 36px !important; min-width: 36px !important; line-height: 36px !important; text-align: center !important; border-radius: 50% !important; margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body .progress-steps .single-step.current .number, body.dark-theme .progress-steps .single-step.current .number { background: var(--uo-accent) !important; color: #ffffff !important; } /* Step content text */ body .progress-steps .single-step .content, body.dark-theme .progress-steps .single-step .content { flex: 1 !important; min-width: 0 !important; } body .progress-steps .single-step .content h4, body.dark-theme .progress-steps .single-step .content h4 { color: var(--uo-text-strong) !important; font-size: 14px !important; font-weight: 600 !important; margin: 0 0 2px !important; letter-spacing: -0.005em !important; } body .progress-steps .single-step.current .content h4, body.dark-theme .progress-steps .single-step.current .content h4 { color: var(--uo-accent-ink) !important; } body .progress-steps .single-step .content p, body.dark-theme .progress-steps .single-step .content p { color: var(--uo-text-muted) !important; font-size: 12.5px !important; margin: 0 !important; line-height: 1.4 !important; } body .progress-steps .single-step.current .content p, body.dark-theme .progress-steps .single-step.current .content p { color: var(--uo-accent-ink) !important; opacity: 0.85 !important; } /* Input info text (charge/min-max hints below deposit/withdraw inputs). Legacy color is pink `rgba(239, 71, 111, 0.7)`. Recolor to muted text. */ body .input-info-text, body.dark-theme .input-info-text { font-size: 12.5px !important; color: var(--uo-text-muted) !important; margin-top: 6px !important; line-height: 1.4 !important; } body .input-info-text strong, body.dark-theme .input-info-text strong { color: var(--uo-text-strong) !important; font-weight: 600 !important; } /* The "Review Details" / transaction-list table on /user/deposit and /user/withdraw forms. Legacy gives it: white text, dark border `#003049`, dark muted strong text. Re-skin as a clean borderless table on the light card surface. */ body .transaction-list, body.dark-theme .transaction-list { margin-top: 8px !important; background: var(--uo-card-bg-2) !important; border: 1px solid var(--uo-divider) !important; border-radius: var(--uo-card-radius-sm) !important; padding: 8px 12px !important; overflow: hidden !important; } body .transaction-list .user-panel-title, body.dark-theme .transaction-list .user-panel-title, body .progress-steps-form .transaction-list .user-panel-title, body.dark-theme .progress-steps-form .transaction-list .user-panel-title { padding: 10px 4px 12px !important; margin: 0 !important; } body .transaction-list .user-panel-title h3, body.dark-theme .transaction-list .user-panel-title h3, body .progress-steps-form .transaction-list .user-panel-title h3, body.dark-theme .progress-steps-form .transaction-list .user-panel-title h3 { color: var(--uo-text-strong) !important; font-size: 15px !important; font-weight: 600 !important; margin: 0 !important; letter-spacing: -0.005em !important; } body .transaction-list .table, body.dark-theme .transaction-list .table, body .progress-steps-form .transaction-list .table, body.dark-theme .progress-steps-form .transaction-list .table { background: transparent !important; color: var(--uo-text) !important; border: none !important; margin-bottom: 0 !important; width: 100% !important; } body .transaction-list .table tbody tr, body.dark-theme .transaction-list .table tbody tr, body .progress-steps-form .transaction-list .table tbody tr, body.dark-theme .progress-steps-form .transaction-list .table tbody tr { border-bottom: 1px solid var(--uo-divider) !important; background: transparent !important; } body .transaction-list .table tbody tr:last-child, body.dark-theme .transaction-list .table tbody tr:last-child, body .progress-steps-form .transaction-list .table tbody tr:last-child, body.dark-theme .progress-steps-form .transaction-list .table tbody tr:last-child { border-bottom: none !important; } body .transaction-list .table tbody tr td, body.dark-theme .transaction-list .table tbody tr td, body .progress-steps-form .transaction-list .table tbody tr td, body.dark-theme .progress-steps-form .transaction-list .table tbody tr td { background: transparent !important; color: var(--uo-text-muted) !important; padding: 12px 8px !important; font-size: 13.5px !important; border: none !important; vertical-align: middle !important; } /* The right-side strong value cells */ body .transaction-list .table tbody tr td strong, body.dark-theme .transaction-list .table tbody tr td strong, body .progress-steps-form .transaction-list .table tbody tr td strong, body.dark-theme .progress-steps-form .transaction-list .table tbody tr td strong { color: var(--uo-text-strong) !important; font-weight: 600 !important; font-size: 14px !important; } /* The form submit button beneath the review details */ body .progress-steps-form .site-btn, body.dark-theme .progress-steps-form .site-btn, body .progress-steps-form button.site-btn, body.dark-theme .progress-steps-form button.site-btn { background: var(--uo-accent) !important; color: #ffffff !important; border-radius: 999px !important; padding: 12px 28px !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border: none !important; text-decoration: none !important; transition: background .15s !important; } body .progress-steps-form .site-btn:hover, body.dark-theme .progress-steps-form .site-btn:hover { background: var(--uo-accent-hover) !important; color: #ffffff !important; } body .progress-steps-form .site-btn i, body .progress-steps-form .site-btn svg { width: 14px !important; height: 14px !important; } /* Buttons wrapper */ body .progress-steps-form .buttons, body.dark-theme .progress-steps-form .buttons { margin-top: 18px !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } /* ----------------------------------------------------------------------- 12. NEO ANNOUNCEMENTS — the `.neo-announcement` cards used in /announcements and /notifications. ----------------------------------------------------------------------- */ body .neo-announcement, body.dark-theme .neo-announcement { background: var(--uo-card-bg-2) !important; border: 1px solid var(--uo-divider) !important; border-radius: var(--uo-card-radius-sm) !important; padding: 16px !important; box-shadow: none !important; margin-bottom: 12px !important; } body .neo-announcement-header, body.dark-theme .neo-announcement-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; } body .neo-announcement-type-badge, body.dark-theme .neo-announcement-type-badge { display: inline-flex !important; align-items: center !important; padding: 4px 10px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 600 !important; background: var(--uo-accent-soft) !important; color: var(--uo-accent-ink) !important; text-transform: capitalize !important; } body .neo-announcement-type-badge.neo-type-warning, body.dark-theme .neo-announcement-type-badge.neo-type-warning { background: var(--uo-warn-soft) !important; color: var(--uo-warn-ink) !important; } body .neo-announcement-type-badge.neo-type-success, body.dark-theme .neo-announcement-type-badge.neo-type-success { background: var(--uo-success-soft) !important; color: var(--uo-success-ink) !important; } body .neo-announcement-type-badge.neo-type-danger, body.dark-theme .neo-announcement-type-badge.neo-type-danger { background: var(--uo-danger-soft) !important; color: var(--uo-danger-ink) !important; } body .neo-announcement-date, body.dark-theme .neo-announcement-date { font-size: 12px !important; color: var(--uo-text-muted) !important; } body .neo-announcement-title, body.dark-theme .neo-announcement-title { font-size: 15px !important; font-weight: 600 !important; color: var(--uo-text-strong) !important; margin: 0 0 6px !important; } body .neo-announcement-content, body.dark-theme .neo-announcement-content { font-size: 13.5px !important; color: var(--uo-text) !important; line-height: 1.55 !important; } body .neo-announcement-expires, body.dark-theme .neo-announcement-expires { margin-top: 8px !important; margin-bottom: 0 !important; font-size: 11.5px !important; color: var(--uo-text-faint) !important; } /* ----------------------------------------------------------------------- 13. ALERTS — Bootstrap-style alerts used on success/error pages. ----------------------------------------------------------------------- */ body .alert, body.dark-theme .alert { border-radius: var(--uo-card-radius-sm) !important; padding: 12px 16px !important; font-size: 14px !important; border: 1px solid transparent !important; box-shadow: none !important; } body .alert-success, body.dark-theme .alert-success { background: var(--uo-success-soft) !important; color: var(--uo-success-ink) !important; border-color: rgba(5, 150, 105, 0.25) !important; } body .alert-danger, body.dark-theme .alert-danger, body .alert-error, body.dark-theme .alert-error { background: var(--uo-danger-soft) !important; color: var(--uo-danger-ink) !important; border-color: rgba(220, 38, 38, 0.25) !important; } body .alert-warning, body.dark-theme .alert-warning { background: var(--uo-warn-soft) !important; color: var(--uo-warn-ink) !important; border-color: rgba(245, 158, 11, 0.25) !important; } body .alert-info, body.dark-theme .alert-info, body .alert-primary, body.dark-theme .alert-primary { background: var(--uo-accent-soft) !important; color: var(--uo-accent-ink) !important; border-color: rgba(41, 98, 255, 0.25) !important; } body .text-muted, body.dark-theme .text-muted { color: var(--uo-text-muted) !important; } body .text-center, body.dark-theme .text-center { text-align: center; } /* ----------------------------------------------------------------------- 14. NICE-SELECT inside page content (e.g. country select on KYC, gateway select on deposit). Keep the same pill aesthetic. ----------------------------------------------------------------------- */ body .site-card .nice-select, body .site-card-body .nice-select, body.dark-theme .site-card .nice-select, body.dark-theme .site-card-body .nice-select { height: 44px !important; line-height: 42px !important; background: var(--uo-input-bg) !important; border: 1px solid var(--uo-input-border) !important; color: var(--uo-text) !important; border-radius: 12px !important; font-size: 14px !important; padding: 0 30px 0 14px !important; } body .site-card .nice-select::after, body.dark-theme .site-card .nice-select::after { border-color: var(--uo-text-muted) !important; } body .site-card .nice-select .list, body.dark-theme .site-card .nice-select .list { background: var(--uo-card-bg) !important; border: 1px solid var(--uo-divider) !important; border-radius: 12px !important; margin-top: 6px !important; color: var(--uo-text) !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important; padding: 6px !important; } body .site-card .nice-select .list .option, body.dark-theme .site-card .nice-select .list .option { background: transparent !important; color: var(--uo-text) !important; padding: 8px 14px !important; font-size: 14px !important; border-radius: 8px !important; line-height: 1.3 !important; } body .site-card .nice-select .list .option:hover, body .site-card .nice-select .list .option.selected, body .site-card .nice-select .list .option.focus, body.dark-theme .site-card .nice-select .list .option:hover, body.dark-theme .site-card .nice-select .list .option.selected, body.dark-theme .site-card .nice-select .list .option.focus { background: var(--uo-accent-soft) !important; color: var(--uo-accent-ink) !important; } /* ----------------------------------------------------------------------- 15. TICKETS — `/user/tickets` list, new, show. Stuff inside .site-card already gets reskinned; here we just polish ticket pills. ----------------------------------------------------------------------- */ body .ticket-status, body.dark-theme .ticket-status { display: inline-flex !important; align-items: center !important; padding: 4px 10px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 600 !important; text-transform: capitalize !important; } body .ticket-status.open, body.dark-theme .ticket-status.open { background: var(--uo-success-soft) !important; color: var(--uo-success-ink) !important; } body .ticket-status.pending, body.dark-theme .ticket-status.pending { background: var(--uo-warn-soft) !important; color: var(--uo-warn-ink) !important; } body .ticket-status.closed, body.dark-theme .ticket-status.closed { background: var(--uo-danger-soft) !important; color: var(--uo-danger-ink) !important; } body .ticket-message, body.dark-theme .ticket-message { background: var(--uo-card-bg-2) !important; border: 1px solid var(--uo-divider) !important; border-radius: var(--uo-card-radius-sm) !important; padding: 14px !important; margin-bottom: 12px !important; color: var(--uo-text) !important; } /* ----------------------------------------------------------------------- 16. SCHEMA / INVEST CARDS — the legacy `.schema-item`, `.invest-now-btn` used on /user/schema and the dashboard's "Invest now" CTA. ----------------------------------------------------------------------- */ body .schema-item, body.dark-theme .schema-item, body .invest-schema, body.dark-theme .invest-schema { background: var(--uo-card-bg) !important; border: 1px solid var(--uo-card-border) !important; border-radius: var(--uo-card-radius) !important; box-shadow: var(--uo-card-shadow) !important; color: var(--uo-text) !important; padding: 18px !important; margin-bottom: 16px !important; } body .schema-item h3, body .schema-item h4, body .schema-item h5, body.dark-theme .schema-item h3, body.dark-theme .schema-item h4, body.dark-theme .schema-item h5 { color: var(--uo-text-strong) !important; } body .invest-now-btn, body.dark-theme .invest-now-btn { background: var(--uo-accent) !important; color: #fff !important; border-radius: 999px !important; padding: 10px 22px !important; font-weight: 600 !important; border: none !important; text-decoration: none !important; } body .invest-now-btn:hover, body.dark-theme .invest-now-btn:hover { background: var(--uo-accent-hover) !important; color: #fff !important; } /* ----------------------------------------------------------------------- 17. KYC NOTIFICATION SPACING — ensure the kyc banner sits comfortably below the header on every breakpoint with no big gap. ----------------------------------------------------------------------- */ body .np-kyc-alert, body.dark-theme .np-kyc-alert { margin-top: 0 !important; margin-bottom: 16px !important; } @media (max-width: 575px) { body .np-kyc-alert, body.dark-theme .np-kyc-alert { margin-bottom: 12px !important; padding: 14px 16px !important; } body .np-kyc-alert .np-kyc-title { font-size: 14px !important; } body .np-kyc-alert .np-kyc-desc { font-size: 12.5px !important; } } /* ----------------------------------------------------------------------- 18. SAFETY NET — kill any text rendered as the legacy bright purple #e73667 / #ef476f on light surfaces. These were the brand pinks from the original theme that still leaked through on a few pages. ----------------------------------------------------------------------- */ body .site-card a:not(.site-btn):not(.invest-now-btn):not(.np-kyc-btn):not(.apply-btn):not(.card-header-link), body.dark-theme .site-card a:not(.site-btn):not(.invest-now-btn):not(.np-kyc-btn):not(.apply-btn):not(.card-header-link) { color: var(--uo-accent) !important; } body .site-card a:not(.site-btn):not(.invest-now-btn):not(.np-kyc-btn):not(.apply-btn):not(.card-header-link):hover, body.dark-theme .site-card a:not(.site-btn):not(.invest-now-btn):not(.np-kyc-btn):not(.apply-btn):not(.card-header-link):hover { color: var(--uo-accent-hover) !important; text-decoration: underline !important; } /* Generic content text & headings inside cards */ body .site-card h1, body .site-card h2, body .site-card h3, body .site-card h4, body .site-card h5, body .site-card h6, body.dark-theme .site-card h1, body.dark-theme .site-card h2, body.dark-theme .site-card h3, body.dark-theme .site-card h4, body.dark-theme .site-card h5, body.dark-theme .site-card h6 { color: var(--uo-text-strong) !important; } body .site-card p, body.dark-theme .site-card p { color: var(--uo-text) !important; } /* ----------------------------------------------------------------------- 19. RESPONSIVE CONTAINER — small-screen padding/widths so cards never feel cramped or too far from the edges. ----------------------------------------------------------------------- */ @media (max-width: 575px) { body .site-card, body.dark-theme .site-card { border-radius: 14px !important; } body .site-card .site-card-header, body.dark-theme .site-card .site-card-header { padding: 14px 16px !important; } body .site-card .site-card-body, body.dark-theme .site-card .site-card-body { padding: 16px !important; } body .site-table .table thead th, body .table.table-hover thead th { padding: 10px 12px !important; font-size: 11px !important; } body .site-table .table tbody td, body .table.table-hover tbody td { padding: 12px 12px !important; font-size: 13px !important; } } /* ----------------------------------------------------------------------- 20. ANCHOR / SCROLL — make sure horizontally-scrolling tables don't bleed the rounded corners. ----------------------------------------------------------------------- */ body .site-card .table-responsive, body.dark-theme .site-card .table-responsive { width: 100% !important; overflow-x: auto !important; } /* ----------------------------------------------------------------------- 21. DASHBOARD WALLET TEXT — bulletproof bright-white amounts on the gradient so it never reads "dark on dark" regardless of theme, browser color settings, or surrounding CSS. ----------------------------------------------------------------------- */ body .np-wallets-gradient, body.dark-theme .np-wallets-gradient { /* Slightly brighter gradient for better contrast on every monitor. */ background: linear-gradient(135deg, #4361ee 0%, #5b51f8 50%, #7048f5 100%) !important; } body .np-wallets-gradient .np-wallet-label, body.dark-theme .np-wallets-gradient .np-wallet-label { color: rgba(255, 255, 255, 0.88) !important; font-weight: 500 !important; font-size: 13.5px !important; text-shadow: 0 1px 1px rgba(0,0,0,0.10) !important; margin-bottom: 4px !important; } body .np-wallets-gradient .np-wallet-value, body.dark-theme .np-wallets-gradient .np-wallet-value { color: #ffffff !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; letter-spacing: -0.02em !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important; } /* ----------------------------------------------------------------------- 22. ADMIN OR LEGACY MOBILE WALLET DISPLAY — if any page still uses the legacy `.user-balance-card .balance` markup outside the sidebar, make sure the amount text is readable. ----------------------------------------------------------------------- */ body .page-container .user-balance-card, body.dark-theme .page-container .user-balance-card { background: linear-gradient(135deg, #4361ee 0%, #7048f5 100%) !important; color: #fff !important; border-radius: var(--uo-card-radius-sm) !important; padding: 16px !important; border: none !important; } body .page-container .user-balance-card .balance, body .page-container .user-balance-card .wallet-id, body.dark-theme .page-container .user-balance-card .balance, body.dark-theme .page-container .user-balance-card .wallet-id { color: #ffffff !important; } /* ----------------------------------------------------------------------- 23. AUTH PAGE PASSWORD ICONS / EYE TOGGLE — when the auth pages render in their reskinned look, make sure inline eye-toggles aren't purple on white. ----------------------------------------------------------------------- */ body .cr-pw-toggle, body.dark-theme .cr-pw-toggle { color: var(--uo-text-muted) !important; } /* ----------------------------------------------------------------------- 24. RESPONSIVE — final mobile polish for the dashboard's np-wallets gradient. The dashboard-neo.css already converts grid to stacked on mobile; we tighten padding so the card feels right next to the page edge. ----------------------------------------------------------------------- */ @media (max-width: 575px) { body .np-wallets-gradient, body.dark-theme .np-wallets-gradient { padding: 18px 18px !important; border-radius: 14px !important; } body .np-wallets-gradient .np-wallet-value, body.dark-theme .np-wallets-gradient .np-wallet-value { font-size: 26px !important; } body .np-card, body.dark-theme .np-card { border-radius: 14px !important; padding: 16px !important; } } /* ----------------------------------------------------------------------- 25. REFERRAL PAGE — the legacy `.referral-link` form was pink/red and the management hierarchy tree used dark-navy + pink for the user nodes. Re-skin everything to the new blue accent palette. ----------------------------------------------------------------------- */ body .panel-layout .referral-link, body.dark-theme .panel-layout .referral-link, body .site-card .referral-link, body.dark-theme .site-card .referral-link { background: transparent !important; border: none !important; padding: 0 !important; } body .panel-layout .referral-link .referral-link-form, body.dark-theme .panel-layout .referral-link .referral-link-form, body .site-card .referral-link .referral-link-form, body.dark-theme .site-card .referral-link .referral-link-form { display: flex !important; align-items: stretch !important; background: var(--uo-card-bg-2) !important; border: 1px solid var(--uo-divider) !important; border-radius: 999px !important; padding: 4px !important; overflow: hidden !important; margin-bottom: 12px !important; gap: 0 !important; } body .panel-layout .referral-link .referral-link-form input, body.dark-theme .panel-layout .referral-link .referral-link-form input, body .site-card .referral-link .referral-link-form input, body.dark-theme .site-card .referral-link .referral-link-form input { flex: 1 !important; height: 42px !important; border: none !important; background: transparent !important; color: var(--uo-text) !important; padding: 0 14px !important; font-size: 13px !important; font-weight: 500 !important; border-radius: 999px 0 0 999px !important; text-align: left !important; margin: 0 !important; box-shadow: none !important; outline: none !important; } body .panel-layout .referral-link .referral-link-form input:focus, body.dark-theme .panel-layout .referral-link .referral-link-form input:focus, body .site-card .referral-link .referral-link-form input:focus, body.dark-theme .site-card .referral-link .referral-link-form input:focus { outline: none !important; box-shadow: none !important; color: var(--uo-text) !important; } body .panel-layout .referral-link .referral-link-form input::placeholder, body.dark-theme .panel-layout .referral-link .referral-link-form input::placeholder, body .site-card .referral-link .referral-link-form input::placeholder, body.dark-theme .site-card .referral-link .referral-link-form input::placeholder { color: var(--uo-text-faint) !important; } /* The Copy URL button — defeat the legacy pink `#e73667` (styles.css) AND the indigo `#4f46e5` override in dashboard-modern.css. Use max specificity with body + dark-theme variants. */ body .panel-layout .referral-link .referral-link-form button, body.dark-theme .panel-layout .referral-link .referral-link-form button, body .site-card .referral-link .referral-link-form button, body.dark-theme .site-card .referral-link .referral-link-form button, body .referral-link .referral-link-form button, body.dark-theme .referral-link .referral-link-form button { flex: 0 0 auto !important; height: 42px !important; background: var(--uo-accent) !important; color: #ffffff !important; border: none !important; border-radius: 999px !important; padding: 0 22px !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; transition: background .15s !important; cursor: pointer !important; box-shadow: none !important; } body .panel-layout .referral-link .referral-link-form button:hover, body.dark-theme .panel-layout .referral-link .referral-link-form button:hover, body .site-card .referral-link .referral-link-form button:hover, body.dark-theme .site-card .referral-link .referral-link-form button:hover, body .referral-link .referral-link-form button:hover, body.dark-theme .referral-link .referral-link-form button:hover { background: var(--uo-accent-hover) !important; color: #ffffff !important; border-color: var(--uo-accent-hover) !important; } body .panel-layout .referral-link .referral-link-form button i, body.dark-theme .panel-layout .referral-link .referral-link-form button i, body .referral-link .referral-link-form button i, body .referral-link .referral-link-form button svg { color: #ffffff !important; margin-right: 4px !important; } body .panel-layout .referral-link .referral-joined, body.dark-theme .panel-layout .referral-link .referral-joined { color: var(--uo-text-muted) !important; font-size: 13px !important; margin: 0 0 8px !important; } /* Referral tree (`.management-hierarchy`) — recolor the user "person" nodes from the legacy blue (#5364f1) + pink (#e73667) to the new accent. */ body .management-hierarchy, body.dark-theme .management-hierarchy { background: var(--uo-card-bg-2) !important; border: 1px solid var(--uo-divider) !important; border-radius: var(--uo-card-radius-sm) !important; padding: 20px 16px !important; overflow-x: auto !important; margin-bottom: 16px !important; } body .management-hierarchy .person > img, body.dark-theme .management-hierarchy .person > img, body .management-hierarchy .person > .f-name-l-name, body.dark-theme .management-hierarchy .person > .f-name-l-name { width: 50px !important; height: 50px !important; border-radius: 50% !important; border: 3px solid var(--uo-accent) !important; overflow: hidden !important; line-height: 44px !important; background-color: var(--uo-accent-soft) !important; color: var(--uo-accent-ink) !important; font-weight: 700 !important; font-size: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body .management-hierarchy .person > p.name, body.dark-theme .management-hierarchy .person > p.name { background-color: var(--uo-accent) !important; color: #ffffff !important; padding: 6px 12px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; margin: 8px auto 0 !important; display: inline-block !important; max-width: 100% !important; } body .management-hierarchy .person > p.name b, body.dark-theme .management-hierarchy .person > p.name b { color: #ffffff !important; } body .hv-wrapper .hv-item .hv-item-parent::after, body .hv-wrapper .hv-item .hv-item-children .hv-item-child::before, body .hv-wrapper .hv-item .hv-item-children .hv-item-child::after, body.dark-theme .hv-wrapper .hv-item .hv-item-parent::after, body.dark-theme .hv-wrapper .hv-item .hv-item-children .hv-item-child::before, body.dark-theme .hv-wrapper .hv-item .hv-item-children .hv-item-child::after { background-color: var(--uo-divider-strong) !important; } /* ----------------------------------------------------------------------- 26. LEGACY COLOR KILLS — last-pass sweep for stragglers in the user-facing frontend. styles.css uses `#e73667` (pink-red) as primary color/background in many places, plus `#2a9d8f` (mint) for some success utilities. Replace them all with the new accent/success tokens. ----------------------------------------------------------------------- */ body .panel-layout .primary-color, body.dark-theme .panel-layout .primary-color { color: var(--uo-accent) !important; } body .panel-layout .primary-bg, body.dark-theme .panel-layout .primary-bg { background: var(--uo-accent) !important; color: #ffffff !important; } body .panel-layout .green-btn, body.dark-theme .panel-layout .green-btn, body .panel-layout a.green-btn, body.dark-theme .panel-layout a.green-btn { background: var(--uo-success) !important; color: #ffffff !important; } body .panel-layout .red-btn, body.dark-theme .panel-layout .red-btn, body .panel-layout a.red-btn, body.dark-theme .panel-layout a.red-btn { background: var(--uo-danger) !important; color: #ffffff !important; } /* Site-btn hover/focus/active — legacy used pink-red `#e73667` for hover */ body .panel-layout .site-btn:hover, body .panel-layout .site-btn:focus, body .panel-layout .site-btn:active, body .panel-layout .site-btn-sm:hover, body .panel-layout .site-btn-xs:hover, body .panel-layout .primary-btn:hover, body.dark-theme .panel-layout .site-btn:hover, body.dark-theme .panel-layout .site-btn:focus, body.dark-theme .panel-layout .site-btn:active, body.dark-theme .panel-layout .site-btn-sm:hover, body.dark-theme .panel-layout .site-btn-xs:hover, body.dark-theme .panel-layout .primary-btn:hover { background: var(--uo-accent-hover) !important; color: #ffffff !important; } /* Bootstrap form-switch in user pages */ body .panel-layout .form-check.form-switch input.form-check-input:checked, body.dark-theme .panel-layout .form-check.form-switch input.form-check-input:checked { background-color: var(--uo-accent) !important; border-color: var(--uo-accent) !important; } /* Transaction-status success/pending card — `.transaction-status.centered` This is the large success/pending card on /user/deposit/now, withdraw success, send-money success, wallet success. Legacy CSS gives it a dark navy `#003049` background in dark theme, but dashboard-modern.css then overrides the text color to `#475569` (dark gray), making the heading and paragraph nearly invisible on the dark navy bg. Re-skin to a clean, light card with the accent-soft tint and proper contrast text. IMPORTANT: only target `.centered` so we don't break the small pill badges (`.transaction-status.pending`, `.success`, `.canceled`) used inside transaction log tables. */ body .panel-layout .progress-steps-form .transaction-status.centered, body.dark-theme .panel-layout .progress-steps-form .transaction-status.centered, body .progress-steps-form .transaction-status.centered, body.dark-theme .progress-steps-form .transaction-status.centered { background: var(--uo-accent-soft) !important; color: var(--uo-text-strong) !important; padding: 48px 24px !important; border-radius: var(--uo-card-radius-sm) !important; border: 1px solid var(--uo-divider) !important; margin-bottom: 24px !important; text-align: center !important; } body .progress-steps-form .transaction-status.centered h2, body.dark-theme .progress-steps-form .transaction-status.centered h2, body .panel-layout .progress-steps-form .transaction-status.centered h2, body.dark-theme .panel-layout .progress-steps-form .transaction-status.centered h2 { color: var(--uo-text-strong) !important; font-size: 24px !important; font-weight: 700 !important; margin: 16px 0 8px !important; letter-spacing: -0.01em !important; } body .progress-steps-form .transaction-status.centered p, body.dark-theme .progress-steps-form .transaction-status.centered p, body .panel-layout .progress-steps-form .transaction-status.centered p, body.dark-theme .panel-layout .progress-steps-form .transaction-status.centered p { color: var(--uo-text-muted) !important; font-size: 14px !important; margin: 0 0 8px !important; line-height: 1.5 !important; } body .progress-steps-form .transaction-status.centered p:last-of-type, body.dark-theme .progress-steps-form .transaction-status.centered p:last-of-type { margin-bottom: 24px !important; } body .progress-steps-form .transaction-status.centered .icon, body.dark-theme .progress-steps-form .transaction-status.centered .icon { height: 72px !important; width: 72px !important; line-height: 72px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 32px !important; color: #ffffff !important; } body .progress-steps-form .transaction-status.centered .icon.success, body.dark-theme .progress-steps-form .transaction-status.centered .icon.success { background: var(--uo-success) !important; } body .progress-steps-form .transaction-status.centered .icon.cancelled, body .progress-steps-form .transaction-status.centered .icon.canceled, body.dark-theme .progress-steps-form .transaction-status.centered .icon.cancelled, body.dark-theme .progress-steps-form .transaction-status.centered .icon.canceled { background: var(--uo-danger) !important; } /* The "Deposit Again" / "Withdraw Again" CTA inside the success card — make sure it's a clear primary pill, white text on accent. */ body .progress-steps-form .transaction-status.centered .site-btn, body.dark-theme .progress-steps-form .transaction-status.centered .site-btn, body .progress-steps-form .transaction-status.centered a.site-btn, body.dark-theme .progress-steps-form .transaction-status.centered a.site-btn { background: var(--uo-accent) !important; color: #ffffff !important; border-radius: 999px !important; padding: 12px 28px !important; font-weight: 600 !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-decoration: none !important; } body .progress-steps-form .transaction-status.centered .site-btn:hover, body.dark-theme .progress-steps-form .transaction-status.centered .site-btn:hover { background: var(--uo-accent-hover) !important; color: #ffffff !important; } /* Card header link button (e.g. "Deposit History" on /user/deposit, "Withdraw Account" on /user/withdraw/account/create, "Mark it close" on /user/ticket/show). Legacy styles.css hardcoded background #e73667 (pink). Re-skin as the accent pill — solid for clickable links, soft for informational spans. */ body .site-card .site-card-header .card-header-links .card-header-link, body.dark-theme .site-card .site-card-header .card-header-links .card-header-link, body .panel-layout .site-card .site-card-header .card-header-links .card-header-link, body.dark-theme .panel-layout .site-card .site-card-header .card-header-links .card-header-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: var(--uo-accent) !important; color: #ffffff !important; border-radius: 999px !important; padding: 7px 16px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; text-decoration: none !important; border: none !important; line-height: 1.1 !important; transition: background .15s !important; cursor: pointer !important; } body .site-card .site-card-header .card-header-links a.card-header-link:hover, body.dark-theme .site-card .site-card-header .card-header-links a.card-header-link:hover, body .panel-layout .site-card .site-card-header .card-header-links a.card-header-link:hover, body.dark-theme .panel-layout .site-card .site-card-header .card-header-links a.card-header-link:hover { background: var(--uo-accent-hover) !important; color: #ffffff !important; text-decoration: none !important; } /* Informational badge variant — `` is used as a status pill (e.g. "Referral Profit: $0") rather than a button. Use a soft accent tint so it reads as data, not as a clickable action. */ body .site-card .site-card-header .card-header-links span.card-header-link, body.dark-theme .site-card .site-card-header .card-header-links span.card-header-link, body .panel-layout .site-card .site-card-header .card-header-links span.card-header-link, body.dark-theme .panel-layout .site-card .site-card-header .card-header-links span.card-header-link { background: var(--uo-accent-soft) !important; color: var(--uo-accent-ink) !important; cursor: default !important; } /* ----------------------------------------------------------------------- 27. FRONTEND SITE TAB BARS — used on /user/referral, /user/transactions, /user/investments and other dashboard pages with secondary tab navigation (typically `.site-tab-bars` containing `.nav.nav-pills`, OR a plain `