/* ═══════════════════════════════════════════════════════════════
THEME TOKENS
─────────────────────────────────────────────────────────────
List A — Dark-theme variables (each pairs with List C)
List B — Cross-theme colours (used by BOTH themes, no pair)
List C — Light-theme overrides (each pairs with List A)
Naming rule: every variable in List A has an identically-named
entry in List C and vice versa. List B never appears elsewhere.
═══════════════════════════════════════════════════════════════ */
:root {
/* ═══════════════════════════════════════════════════════════
LIST A — DARK THEME (default)
═══════════════════════════════════════════════════════════ */
/* State */
--success: #34D399;
--danger: #F87171;
--warning: #FBBF24;
--secondary: #FB923C;
--link: #60a5fa;
/* Page */
--page-bg: #0b0e14;
--page-bg-alt: #14181f;
/* Navigation (bg now lives in List B) */
--nav-bg-alt: #1e2530;
/* Titles */
--title: #ffffff;
--title-alt: #e8edf5;
/* Text */
--text: #ffffff;
--text-alt: #a1a9b8;
--text-muted: #6b7280;
/* Placeholder */
--placeholder: #6b7280;
--placeholder-alt: #4a5568;
/* Input */
--input-bg: #1e2530;
--input-border: rgba(255, 255, 255, 0.06);
--input-text: #ffffff;
/* Label */
--label: #a1a9b8;
--label-alt: #6b7280;
/* Border */
--border: rgba(255, 255, 255, 0.06);
--border-alt: rgba(255, 255, 255, 0.12);
/* Icon */
--icon: #fbbf24;
--icon-alt: #f59e0b;
/* Button */
--button: #f59e0b;
--button-alt: #fbbf24;
--button-text: #0b0e14;
/* Div — Outer (bg now lives in List B) */
--div-outer-alt: #1e2530;
/* Div — Inner */
--div-inner: #1e2530;
--div-inner-alt: #2a3340;
/* Others */
--others: #1e2530;
--others-alt: #2a3340;
/* Divs — generic */
--divs: #14181f;
--divs-alt: #1e2530;
/* Name */
--name: #ffffff;
--name-alt: #e2e8f0;
/* Numbers */
--numbers: #ffffff;
--numbers-alt: #f7fafc;
/* Shadows & Glass */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
--shadow-gold: 0 4px 24px rgba(245, 158, 11, 0.15);
--glass-bg: rgba(20, 24, 31, 0.7);
--glass-border: rgba(255, 255, 255, 0.06);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
/* ═══════════════════════════════════════════════════════════
LIST B — CROSS-THEME COLOURS
─────────────────────────────────────────────────────────
Shared across dark AND light. Never defined inside
[data-theme="light"].
═══════════════════════════════════════════════════════════ */
/* Typography */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Radii */
--radius-sm: 0.5rem;
--radius: 0.75rem;
--radius-lg: 1rem;
/* Layout */
--sidebar-width: 18rem;
/* Derived aliases (resolve from List A, so they theme-switch) */
--theme-navy: var(--page-bg);
--theme-blue: var(--button);
/* ─── Cross-theme surface colours / gradients ─── */
--nav-bg: #033f00;
--face-out: linear-gradient(135deg, #078b00, #067700);
--face-in: linear-gradient(135deg, #310794, #26017e);
--div-outer: linear-gradient(135deg, #078500, #078a00);
/* ─── Cross-theme text colours ─── */
--text-white: #ffffff;
--text-fade: #d1d5db; /* light grey */
--text-dull: #4b5563; /* dark grey */
--text-gold: #fbbf24;
/* ─── Imaginary placeholder entries — replace with real values ─── */
/* Brand gradients */
/* --gradient-gold: linear-gradient(135deg, #fbbf24, #f59e0b); */
/* --gradient-purple: linear-gradient(135deg, #8b5cf6, #6d28d9); */
/* --gradient-emerald: linear-gradient(135deg, #10b981, #059669); */
/* --gradient-royal: linear-gradient(135deg, #3b82f6, #1d4ed8); */
/* --gradient-sunset: linear-gradient(135deg, #f59e0b, #ef4444); */
/* --gradient-midnight: linear-gradient(135deg, #0b0e14, #1e2530); */
/* Brand solid colours */
/* --brand-gold: #f59e0b; */
/* --brand-purple: #8b5cf6; */
/* --brand-emerald: #10b981; */
/* --brand-royal: #3b82f6; */
/* Feature-card accents */
/* --card-welcome: #f59e0b; */
/* --card-daily: #3b82f6; */
/* --card-share: #8b5cf6; */
/* --card-tasks: #10b981; */
/* --card-withdraw: #06b6d4; */
/* Quick-action icon backgrounds (dashboard) */
/* --qa-withdraw: #10b981; */
/* --qa-deposit: #3b82f6; */
/* --qa-tasks: #031B3B; */
/* --qa-share: #8b5cf6; */
/* Verified / status decoration */
/* --verified-gold: #fbbf24; */
/* --streak-flame: #f97316; */
/* Neutral overlays */
/* --overlay-dark: rgba(0, 0, 0, 0.55); */
/* --overlay-light: rgba(255, 255, 255, 0.06); */
}
/* ═══════════════════════════════════════════════════════════════
LIST C — LIGHT THEME OVERRIDES
─────────────────────────────────────────────────────────────
Same names, same order as List A. Only values differ.
═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
/* State */
--success: #10B981;
--danger: #EF4444;
--warning: #F59E0B;
--secondary: #FF9800;
--link: #2563eb;
/* Page */
--page-bg: #fcf8f0;
--page-bg-alt: #f5efe4;
/* Navigation (bg now lives in List B) */
--nav-bg-alt: #fcf8f0;
/* Titles */
--title: #3d2e1e;
--title-alt: #5a4632;
/* Text */
--text: #3d2e1e;
--text-alt: #5a4632;
--text-muted: #8a7a66;
/* Placeholder */
--placeholder: #b5a58c;
--placeholder-alt: #a09078;
/* Input */
--input-bg: #ffffff;
--input-border: #e8ddd0;
--input-text: #3d2e1e;
/* Label */
--label: #7a6a56;
--label-alt: #9a8a76;
/* Border */
--border: #e8ddd0;
--border-alt: #d4c5b4;
/* Icon */
--icon: #f59e0b;
--icon-alt: #fbbf24;
/* Button */
--button: #f59e0b;
--button-alt: #fbbf24;
--button-text: #ffffff;
/* Div — Outer (bg now lives in List B) */
--div-outer-alt: #fcf8f0;
/* Div — Inner */
--div-inner: #fcf8f0;
--div-inner-alt: #f5efe4;
/* Others */
--others: #faf3e8;
--others-alt: #f0e6d8;
/* Divs — generic */
--divs: #ffffff;
--divs-alt: #fcf8f0;
/* Name */
--name: #3d2e1e;
--name-alt: #5a4632;
/* Numbers */
--numbers: #3d2e1e;
--numbers-alt: #5a4632;
/* Shadows & Glass */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08);
--shadow-gold: 0 4px 20px rgba(245, 158, 11, 0.25);
--glass-bg: rgba(255, 255, 255, 0.6);
--glass-border: rgba(255, 255, 255, 0.8);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}
/* ─── RESET & BASE ─── */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--page-bg);
color: var(--text);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
min-height: 100vh;
transition: background 0.3s ease, color 0.3s ease;
}
/* ─── GLASSMORPHISM HELPERS ─── */
.glass {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
/* ─── LAYOUT ─── */
.app-layout {
display: flex;
min-height: 100vh;
}
.main-content {
flex: 1;
min-width: 0;
background: var(--page-bg);
}
/* ─── DESKTOP SIDEBAR ─── */
.desktop-sidebar {
position: sticky;
top: 0;
height: 100vh;
width: 0;
overflow: hidden;
flex-shrink: 0;
background: var(--nav-bg);
border-right: 1px solid var(--border);
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: none;
flex-direction: column;
overflow-y: auto;
z-index: 40;
}
.desktop-sidebar.open {
width: var(--sidebar-width);
}
@media (min-width: 992px) {
.desktop-sidebar {
display: flex;
}
}
.desktop-sidebar::-webkit-scrollbar {
width: 4px;
}
.desktop-sidebar::-webkit-scrollbar-thumb {
background: var(--border-alt);
border-radius: 9999px;
}
/* ─── SIDEBAR SUB-MENU ─── */
.sub-menu {
display: none;
padding-left: 1.5rem;
list-style: none;
margin: 0;
}
.sub-menu.open {
display: block;
}
.sub-menu li a {
padding-left: 2.5rem !important;
font-size: 0.85rem;
color: var(--text-alt);
}
.sub-menu li a:hover {
color: var(--text);
}
.nav-link-custom .chevron-icon {
transition: transform 0.2s;
margin-left: auto;
}
.nav-link-custom .chevron-icon.fa-chevron-up {
transform: rotate(180deg);
}
.nav-link-custom .big-dots {
color: var(--icon);
font-weight: 700;
letter-spacing: 0.1em;
font-size: 0.9rem;
}
/* ─── MOBILE SIDEBAR SHEET ─── */
.sidebar-overlay {
position: fixed;
inset: 0;
z-index: 50;
background: rgba(0, 0, 0, 0.7);
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sidebar-overlay.open {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
.sidebar-sheet {
position: fixed;
z-index: 51;
top: 0;
left: 0;
bottom: 0;
width: var(--sidebar-width);
background: var(--nav-bg);
box-shadow: var(--shadow-lg);
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
border-right: 1px solid var(--border);
overflow-y: auto;
}
.sidebar-sheet.open {
transform: translateX(0);
}
.sidebar-sheet .close-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1.25rem;
cursor: pointer;
}
/* ─── GLOBAL SCROLLBAR STYLES ─── */
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--text-muted);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--button);
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--text-muted) transparent;
}
/* ─── SCROLL ─── */
.main-scroll {
overflow-y: auto;
flex: 1;
min-height: 0;
}
.main-scroll::-webkit-scrollbar {
width: 4px;
}
.main-scroll::-webkit-scrollbar-thumb {
background: var(--border-alt);
border-radius: 9999px;
}
/* ─── HEADINGS ─── */
.heading-mobile {
display: block;
}
.heading-desktop {
display: none;
}
@media (min-width: 576px) {
.heading-mobile {
display: none;
}
.heading-desktop {
display: block;
}
}
/* ─── BALANCE HIDE (big dots) ─── */
.balance-hidden .big-dots {
display: inline;
}
.balance-hidden .value-text {
display: none;
}
.big-dots {
display: none;
font-size: 1.25rem;
letter-spacing: 0.15em;
color: var(--text-muted);
font-weight: 700;
user-select: none;
}
.big-dots-lg {
font-size: 1.75rem;
letter-spacing: 0.2em;
}
/* ─── SPARKLINE ─── */
.sparkline svg {
display: block;
width: 100%;
height: 100%;
}
/* ─── BADGE BREATHE ─── */
@keyframes breathe {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.95);
}
}
.badge-breathe {
animation: breathe 1.8s ease-in-out infinite;
display: inline-block;
}
/* ─── CHECKMARK BADGE ─── */
.checkmark-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--icon);
background: transparent;
flex-shrink: 0;
margin-left: 6px;
vertical-align: middle;
margin-top: -2px;
}
.checkmark-badge svg {
width: 14px;
height: 14px;
stroke: var(--icon);
stroke-width: 3;
fill: none;
}
/* ─── TOAST ─── */
@keyframes slideDown {
from {
transform: translateY(-30px) scale(0.95);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes slideUp {
to {
transform: translateY(-40px) scale(0.9);
opacity: 0;
}
}
/* ─── NOTIFICATION TOAST (two‑section) ─── */
.toast-item.removing {
animation: slideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
pointer-events: none;
}
.toast-container {
position: fixed;
top: 16px;
left: 0;
right: 0;
z-index: 9999;
width: 92%;
max-width: 400px;
margin: 0 auto;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
}
.toast-item {
display: flex;
flex-direction: column;
background: var(--div-outer);
border-radius: 12px;
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
overflow: hidden;
min-width: 300px;
max-width: 480px;
width: 100%;
pointer-events: auto;
animation: slideDown 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}
.toast-item .toast-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px 8px 16px;
border-bottom: 1px solid var(--border);
background: var(--div-inner);
}
.toast-item .toast-header .left {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 0.9rem;
}
.toast-item .toast-header .left .icon {
font-size: 1.2rem;
line-height: 1;
}
.toast-item .toast-header .close-btn {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: var(--text-muted);
padding: 0 4px;
line-height: 1;
transition: color 0.2s;
}
.toast-item .toast-header .close-btn:hover {
color: var(--text);
}
.toast-item .toast-body {
padding: 12px 16px 14px 16px;
background: var(--div-outer);
}
.toast-item .toast-body .message {
font-size: 0.95rem;
color: var(--text);
line-height: 1.5;
margin-bottom: 6px;
}
.toast-item .toast-body .timestamp {
font-size: 0.7rem;
color: var(--text-muted);
text-align: right;
margin-top: 4px;
}
/* Colour variants based on type */
.toast-item.success .toast-header .left {
color: var(--success);
}
.toast-item.error .toast-header .left {
color: var(--danger);
}
.toast-item.warning .toast-header .left {
color: var(--secondary);
}
.toast-item.info .toast-header .left {
color: var(--icon);
}
/* Optional – subtle left border accent */
.toast-item.success {
border-left: 4px solid var(--success);
}
.toast-item.error {
border-left: 4px solid var(--danger);
}
.toast-item.warning {
border-left: 4px solid var(--secondary);
}
.toast-item.info {
border-left: 4px solid var(--icon);
}
.toast-item .toast-header .left .icon {
font-size: 1.2rem;
width: 1.5rem;
text-align: center;
}
/* The spinning icon (loading) */
.toast-item .toast-header .left .icon .fa-spinner {
font-size: 1.2rem;
}
/* ─── SITE ICON ─── */
.site-icon {
width: 40px;
height: 40px;
border-radius: 10px;
object-fit: cover;
background: var(--button);
}
.site-icon-sm {
width: 32px;
height: 32px;
border-radius: 8px;
object-fit: cover;
background: var(--button);
}
/* ─── FONT HELPERS ─── */
.font-headline {
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: -0.02em;
}
.font-body {
font-family: var(--font-sans);
}
/* ─── CUSTOM COMPONENT CLASSES ─── */
.bg-surface {
background-color: var(--div-outer);
}
.bg-elevated {
background-color: var(--div-inner);
}
.bg-primary-gold {
background-color: var(--button);
}
.text-gold {
color: var(--icon);
}
.text-secondary-light {
color: var(--text-alt);
}
.text-muted-light {
color: var(--text-muted);
}
.border-gold {
border-color: var(--button);
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.shadow-glow {
box-shadow: var(--shadow-gold);
}
/* Sidebar nav link */
.nav-link-custom {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 0.75rem;
border-bottom: 1px solid var(--border);
color: var(--text-alt);
text-decoration: none;
font-size: 0.875rem;
transition: all 0.2s;
}
.nav-link-custom:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--text);
}
.nav-link-custom .icon-wrap {
padding: 0.25rem;
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.04);
display: inline-flex;
}
.nav-link-custom .icon-wrap svg {
width: 16px;
height: 16px;
stroke: currentColor;
}
/* Quick action icon */
.quick-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
}
.quick-icon:hover {
transform: scale(1.05);
}
@media (min-width: 992px) {
.quick-icon {
width: 48px;
height: 48px;
}
}
.quick-icon svg {
width: 20px;
height: 20px;
stroke: #fff;
fill: none;
stroke-width: 2;
}
@media (min-width: 992px) {
.quick-icon svg {
width: 24px;
height: 24px;
}
}
/* .stat-card rules moved to dashboard.blade.php (dashboard-only component) */
/* .earning-card rules moved to dashboard.blade.php (dashboard-only component) */
@media (max-width: 575.98px) {
.earning-card {
padding: 0.9rem 1rem;
}
.earning-card .value {
font-size: 1rem;
}
}
/* Profile row */
.profile-row {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
}
.profile-row .label {
color: var(--text-muted);
}
.profile-row .value {
font-weight: 500;
color: var(--text);
}
/* ─── SETTINGS POPUP ─── */
.settings-overlay {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.settings-overlay.open {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
.settings-popup {
background: var(--div-outer);
border-radius: 1.25rem;
padding: 2rem 2rem 1.75rem;
max-width: 420px;
width: 92%;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
transform: translateY(20px) scale(0.96);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
opacity: 0;
}
.settings-overlay.open .settings-popup {
transform: translateY(0) scale(1);
opacity: 1;
}
.settings-popup .close-settings {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: none;
border: none;
color: var(--text-muted);
font-size: 1.4rem;
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
transition: background 0.2s;
}
.settings-popup .close-settings:hover {
background: var(--div-inner);
}
.settings-popup h4 {
color: var(--title);
font-weight: 700;
margin-bottom: 0.25rem;
}
.settings-popup .subtitle {
color: var(--text-muted);
font-size: 0.875rem;
margin-bottom: 1.5rem;
}
.settings-group {
margin-bottom: 1.5rem;
}
.settings-group label {
display: block;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--label);
margin-bottom: 0.5rem;
}
.settings-options {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.settings-options .opt-btn {
flex: 1;
min-width: 60px;
padding: 0.6rem 0.75rem;
border-radius: 0.75rem;
border: 2px solid var(--border);
background: var(--div-inner);
color: var(--text);
font-weight: 500;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.settings-options .opt-btn:hover {
border-color: var(--button);
background: var(--others);
}
.settings-options .opt-btn.active {
border-color: var(--button);
background: var(--button);
color: var(--button-text);
}
.settings-options .opt-btn .emoji {
display: block;
font-size: 1.4rem;
margin-bottom: 0.15rem;
}
.settings-options .opt-btn .label-text {
font-size: 0.7rem;
opacity: 0.8;
}
/* ─── RESPONSIVE ─── */
@media (max-width: 767.98px) {
.container-fluid {
padding-left: 12px;
padding-right: 12px;
}
.settings-popup {
padding: 1.5rem 1.25rem;
}
}
/* ─── CUSTOM BADGE COLORS ─── */
.bg-purple {
background-color: #8b5cf6 !important;
color: #fff !important;
}
.bg-purple.badge-breathe {
animation: breathe 1.8s ease-in-out infinite;
}
.btn-start {
background: var(--button);
color: var(--button-text);
border: none;
padding: 0.5rem 1.25rem;
border-radius: 0.75rem;
font-weight: 600;
transition: all 0.2s;
cursor: pointer;
}
.btn-start:hover {
opacity: 0.9;
transform: scale(1.02);
}
/* ─── AFFILIATE LINK ─── */
.affiliate-link {
color: var(--text);
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
direction: rtl; /* show the end of the URL when truncated */
text-align: left; /* keep text visually left-aligned */
}
.copy-btn {
background: transparent;
border: 1px solid var(--border);
border-radius: 0.75rem;
color: var(--icon);
padding: 0 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
align-self: stretch;
}
.copy-btn:hover {
background: var(--icon);
color: var(--button-text);
border-color: var(--icon);
}
/* ─── CUSTOM SELECT DROPDOWN ─── */
.custom-select {
position: relative;
width: 100%;
}
.custom-select-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--radius);
padding: 0.6rem 1rem;
font-size: 0.9rem;
color: var(--input-text);
cursor: pointer;
transition: all 0.15s ease;
}
.custom-select-trigger:hover {
border-color: var(--icon);
}
.custom-select-trigger:focus-visible {
outline: none;
border-color: var(--icon);
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.custom-select-options {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--div-outer);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
z-index: 10001;
overflow-y: auto;
max-height: 60vh;
}
.custom-select-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.6rem 1rem;
font-size: 0.9rem;
color: var(--text);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.custom-select-option:hover {
background: var(--div-inner);
color: var(--icon);
}
.custom-select-option.selected {
background: var(--div-inner);
color: var(--icon);
font-weight: 600;
}
.custom-select-option .cs-name {
flex: 1;
text-align: left;
}
.custom-select-option .cs-amount {
min-width: 7rem;
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--icon);
}
.custom-select-trigger .cs-name {
flex: 1;
text-align: left;
}
.custom-select-trigger .cs-right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.custom-select-trigger .cs-amount {
min-width: 6rem;
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--icon);
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════
GLOBAL THEMED TABLE
Reusable across all table pages: history, team, transactions,
deposits, admin lists, etc.
Usage:
Approved
═══════════════════════════════════════════════════════════════ */
.themed-table {
color: var(--text);
--bs-table-bg: transparent;
--bs-table-color: var(--text);
--bs-table-border-color: var(--border);
}
.themed-table thead th {
color: var(--icon);
font-weight: 700;
font-size: 0.9rem;
border-bottom: 1px solid var(--border);
background: transparent;
white-space: nowrap;
padding: 0.75rem 0.5rem;
}
.themed-table tbody td {
color: var(--text);
font-size: 0.9rem;
border-bottom: 1px solid var(--border);
padding: 0.7rem 0.5rem;
vertical-align: middle;
white-space: nowrap;
}
.themed-table tbody tr:hover td {
background: var(--div-inner);
}
.themed-table tbody tr.row-pending td {
background: rgba(245, 158, 11, 0.06);
}
/* ─── Status pills ─── */
.status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.2rem 0.65rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.status-success {
background: rgba(16, 185, 129, 0.15);
color: var(--success);
border: 1px solid var(--success);
}
.status-warning {
background: rgba(245, 158, 11, 0.15);
color: var(--warning);
border: 1px solid var(--warning);
}
.status-danger {
background: rgba(239, 68, 68, 0.15);
color: var(--danger);
border: 1px solid var(--danger);
}
.status-info {
background: rgba(96, 165, 250, 0.15);
color: var(--link);
border: 1px solid var(--link);
}
.status-muted {
background: rgba(148, 163, 184, 0.15);
color: var(--text-muted);
border: 1px solid var(--text-muted);
}
/* ─── Themed Bootstrap paginator ─── */
.themed-pagination .pagination {
margin-bottom: 0;
gap: 0.25rem;
}
.themed-pagination .page-link {
background: var(--div-inner);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.85rem;
padding: 0.35rem 0.7rem;
}
.themed-pagination .page-link:hover {
background: var(--div-outer);
color: var(--icon);
border-color: var(--icon);
}
.themed-pagination .page-item.active .page-link {
background: var(--button);
color: var(--button-text);
border-color: var(--button);
}
.themed-pagination .page-item.disabled .page-link {
background: transparent;
color: var(--text-muted);
border-color: var(--border);
opacity: 0.5;
}
/* ─── Themed button (global) ─── */
.themed-button {
background: var(--button);
color: var(--button-text);
border: none;
border-radius: var(--radius);
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
}
.themed-button:hover,
.themed-button:focus,
.themed-button:active {
background: var(--button);
color: var(--button-text);
opacity: 0.9;
box-shadow: none;
}
/* ─── Themed input (global) ─── */
.themed-input,
.themed-input.form-control {
background: var(--input-bg) !important;
color: var(--input-text) !important;
border: 1px solid var(--input-border);
border-radius: var(--radius);
padding: 0.6rem 1rem;
transition: border-color 0.15s, box-shadow 0.15s;
}
.themed-input:focus,
.themed-input.form-control:focus {
background: var(--input-bg) !important;
color: var(--input-text) !important;
border-color: var(--icon);
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
outline: none;
}
.themed-input::placeholder {
color: var(--text-muted);
opacity: 0.7;
}
.themed-input[readonly] {
background: var(--div-inner) !important;
cursor: not-allowed;
}
/* Outline variant of the themed button (global) */
.themed-button-outline {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
}
.themed-button-outline:hover,
.themed-button-outline:focus,
.themed-button-outline:active {
background: var(--div-inner);
color: var(--icon);
border-color: var(--icon);
box-shadow: none;
}
/* Lucide icons inside sidebar nav */
.nav-link-custom .icon-wrap svg {
width: 16px;
height: 16px;
}
/* ─── HIDE GOOGLE TRANSLATE INJECTED UI ─── */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-logo-link,
.goog-te-gadget span,
.VIpgJd-ZVi9od-xl07Ob-lTBxed {
display: none !important;
visibility: hidden !important;
}
body {
top: 0 !important; /* Google sometimes pushes the body down */
position: static !important;
}
.skiptranslate iframe {
display: none !important;
}
/* ─── HARD-HIDE Google Translate UI (prevents first-paint flash) ─── */
#google_translate_element,
#google_translate_element *,
.goog-te-gadget,
.goog-te-gadget *,
.skiptranslate,
.skiptranslate *,
iframe.goog-te-banner-frame,
iframe.skiptranslate {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
}
body > .skiptranslate {
display: none !important;
}
/* If English is chosen, prevent Google's cached class from making it look translated */
html.force-no-translate .goog-text-highlight {
background: none !important;
box-shadow: none !important;
}