/** * Admin UI refresh + light/dark theme (data-admin-theme on ). * Does not alter layout structure — colors, radii, shadows, typography only. */ :root { --admin-radius: 12px; --admin-radius-sm: 8px; --admin-page-bg: #eef1f6; --admin-surface: #ffffff; --admin-surface-elevated: #ffffff; --admin-border: rgba(15, 23, 42, 0.08); --admin-text: #0f172a; --admin-text-muted: #64748b; --admin-header-bg: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%); --admin-sidebar-bg: #1a2332; --admin-sidebar-text: rgba(255, 255, 255, 0.88); --admin-sidebar-hover: rgba(255, 255, 255, 0.06); --admin-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06); --admin-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html[data-admin-theme="dark"] { --admin-page-bg: #070a0e; --admin-surface: #111820; --admin-surface-elevated: #161d28; --admin-border: rgba(255, 255, 255, 0.08); --admin-text: #e8edf4; --admin-text-muted: #94a3b8; --admin-header-bg: linear-gradient(135deg, #0a0f14 0%, #111820 50%, #0d1218 100%); --admin-sidebar-bg: #0a0d12; --admin-sidebar-text: rgba(255, 255, 255, 0.9); --admin-sidebar-hover: rgba(56, 189, 248, 0.12); --admin-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.45); } /* Base typography */ html[data-admin-theme="light"] body, html[data-admin-theme="dark"] body { font-family: var(--admin-font); -webkit-font-smoothing: antialiased; } html[data-admin-theme="dark"] body { color: var(--admin-text); background-color: var(--admin-page-bg); } /* ----- Light mode shell: premium black top bar (matches classic theme1) + calm canvas ----- */ html[data-admin-theme="light"] body { color: #0f172a; background-color: #e8eaef; } html[data-admin-theme="light"] .pcoded .pcoded-header[header-theme="theme1"], html[data-admin-theme="light"] .pcoded .pcoded-header.header-navbar { background: #000000 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important; } html[data-admin-theme="light"] .pcoded .pcoded-header[header-theme="theme1"] a, html[data-admin-theme="light"] .pcoded .pcoded-header[header-theme="theme1"] .input-group-addon, html[data-admin-theme="light"] .pcoded-header .nav-left a, html[data-admin-theme="light"] .pcoded-header .nav-right a { color: rgba(255, 255, 255, 0.92) !important; } /* Dropdowns sit on white panels — override nav-right link color so Logout (and icons) stay visible */ html[data-admin-theme="light"] .pcoded-header .nav-right .header-notification .profile-notification a, html[data-admin-theme="light"] .pcoded-header .nav-right .header-notification .profile-notification a i, html[data-admin-theme="light"] .pcoded-header .nav-right .header-notification .show-notification a, html[data-admin-theme="light"] .pcoded-header .nav-right .header-notification .show-notification a i { color: #0f172a !important; } html[data-admin-theme="light"] .pcoded-header .nav-right .header-notification .profile-notification li:hover a, html[data-admin-theme="light"] .pcoded-header .nav-right .header-notification .profile-notification li:hover a i, html[data-admin-theme="light"] .pcoded-header .nav-right .header-notification .show-notification li:hover a, html[data-admin-theme="light"] .pcoded-header .nav-right .header-notification .show-notification li:hover a i { color: #0f172a !important; } html[data-admin-theme="light"] .pcoded-header .navbar-logo .brand-logo { color: #ffffff !important; font-weight: 600; letter-spacing: 0.35em; } html[data-admin-theme="light"] .pcoded-header select.form-control { color: rgba(255, 255, 255, 0.95) !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 8px !important; } html[data-admin-theme="light"] .pcoded-header select.form-control option { background: #111827; color: #f8fafc; } html[data-admin-theme="light"] .pcoded-header .noti__item span, html[data-admin-theme="light"] .pcoded-header .noti__item h5 span, html[data-admin-theme="light"] .pcoded-header .user-profile span { color: rgba(255, 255, 255, 0.95) !important; } html[data-admin-theme="light"] .pcoded .pcoded-container { background: #e8eaef !important; box-shadow: none !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar { background: #ffffff !important; border-right: 1px solid rgba(15, 23, 42, 0.1) !important; box-shadow: 4px 0 24px rgba(15, 23, 42, 0.04) !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .main-menu, html[data-admin-theme="light"] .pcoded .pcoded-navbar .main-menu { background-color: #ffffff !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .main-menu .main-menu-header { background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%) !important; border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .main-menu .main-menu-header .user-details span { color: #0f172a !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li > a { color: #334155 !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li > a .pcoded-micon { color: #64748b !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.active > a { color: #0f172a !important; background: #f1f5f9 !important; box-shadow: inset 3px 0 0 #6366f1 !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li:hover > a { color: #f8fafc !important; background: linear-gradient(135deg, #475569 0%, #334155 55%, #1e293b 100%) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li:hover > a .pcoded-micon { color: #f8fafc !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li:hover > a i { color: #f8fafc !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li:hover.pcoded-hasmenu > a:after { color: rgba(248, 250, 252, 0.9) !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover > a { background: linear-gradient(135deg, #475569 0%, #334155 100%) !important; color: #f8fafc !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover > a .pcoded-micon, html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover > a i { color: #f8fafc !important; } /* Beat Jet blue hover — use slate gradient instead of pure black */ html[data-admin-theme="light"] .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li:hover > a { color: #f8fafc !important; background: linear-gradient(135deg, #475569 0%, #334155 55%, #1e293b 100%) !important; border-radius: 8px !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li:hover > a .pcoded-micon { color: #f8fafc !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li .pcoded-submenu li:hover > a { background: linear-gradient(135deg, #475569 0%, #334155 100%) !important; color: #f8fafc !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu { background: #ffffff !important; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08) !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a { color: #475569 !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.pcoded-hasmenu > a:after, html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu > a:after { color: #94a3b8 !important; } html[data-admin-theme="light"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li > a i { color: #64748b !important; } /* Shell: main area */ html[data-admin-theme="dark"] .pcoded-main-container { background: var(--admin-page-bg) !important; } html[data-admin-theme="dark"] .pcoded .pcoded-container { background: var(--admin-page-bg) !important; box-shadow: none !important; } html[data-admin-theme="dark"] .pcoded-inner-content { background: transparent; } html[data-admin-theme="dark"] .main-body .page-wrapper { background: transparent; } html[data-admin-theme="dark"] .page-body { background: transparent; } /* Header */ html[data-admin-theme="dark"] .pcoded .pcoded-header { background: var(--admin-header-bg) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } html[data-admin-theme="dark"] .pcoded[theme-layout="vertical"] .pcoded-header .sidebar_toggle a, html[data-admin-theme="dark"] .pcoded-header .nav-left a, html[data-admin-theme="dark"] .pcoded-header .nav-right a { color: rgba(255, 255, 255, 0.9) !important; } html[data-admin-theme="dark"] .pcoded-header .navbar-logo .brand-logo { color: #fff !important; font-weight: 600; letter-spacing: 0.02em; } html[data-admin-theme="dark"] .pcoded-header select.form-control { color: rgba(255, 255, 255, 0.95) !important; } html[data-admin-theme="dark"] .pcoded-header select.form-control option { background: #161d28; color: var(--admin-text); } /* Sidebar — base + override Jet/themelight1 (white bar + #000 !important links beat naive dark rules) */ html[data-admin-theme="dark"] .pcoded .pcoded-navbar { background: var(--admin-sidebar-bg) !important; box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4) !important; border-right: 1px solid rgba(255, 255, 255, 0.06); } html[data-admin-theme="dark"] .pcoded .pcoded-navbar .pcoded-inner-navbar.main-menu, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .main-menu, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="theme1"] .main-menu { background-color: #0c1016 !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar .main-menu-header, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .main-menu .main-menu-header, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="theme1"] .main-menu .main-menu-header { background-color: #121a22 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar .pcoded-item > li > a, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li > a, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li > a { color: rgba(255, 255, 255, 0.9) !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.active > a, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item > li.active > a { color: #fff !important; background: rgba(56, 189, 248, 0.12) !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar .pcoded-item > li:hover > a, html[data-admin-theme="dark"] .pcoded .pcoded-navbar .pcoded-item > li.active > a { background: var(--admin-sidebar-hover) !important; box-shadow: none !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li:hover > a, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.active:hover > a { color: #fff !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu { background: #0a0d11 !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li > a { color: rgba(255, 255, 255, 0.85) !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover > a, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active > a { color: #fff !important; background: rgba(255, 255, 255, 0.06) !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.pcoded-hasmenu > a:after, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu > a:after { color: rgba(255, 255, 255, 0.65) !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li .pcoded-submenu li.active > a, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li .pcoded-submenu li:hover > a { color: #7dd3fc !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar .pcoded-item > li > a .pcoded-micon, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item > li > a .pcoded-micon { color: rgba(255, 255, 255, 0.88) !important; } html[data-admin-theme="dark"] .pcoded .pcoded-navbar .pcoded-item > li > a i { color: rgba(255, 255, 255, 0.75) !important; } html[data-admin-theme="dark"] .main-menu-header { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } html[data-admin-theme="dark"] .main-menu-header .user-details span, html[data-admin-theme="dark"] .pcoded .pcoded-navbar[navbar-theme="themelight1"] .main-menu .main-menu-header .user-details span { color: rgba(255, 255, 255, 0.92) !important; } /* Generic cards & tables (other admin pages) */ html[data-admin-theme="dark"] .card { background: var(--admin-surface-elevated) !important; border: 1px solid var(--admin-border); border-radius: var(--admin-radius); color: var(--admin-text); box-shadow: var(--admin-shadow); } html[data-admin-theme="dark"] .card-header { background: rgba(255, 255, 255, 0.03) !important; border-bottom: 1px solid var(--admin-border); color: var(--admin-text); } html[data-admin-theme="dark"] .table { color: var(--admin-text); } html[data-admin-theme="dark"] .table thead th { border-color: var(--admin-border); color: var(--admin-text-muted); } html[data-admin-theme="dark"] .table td, html[data-admin-theme="dark"] .table th { border-color: var(--admin-border); } html[data-admin-theme="dark"] .form-control { background: #0d1218; border-color: var(--admin-border); color: var(--admin-text); } html[data-admin-theme="dark"] .form-control:focus { background: #0d1218; border-color: #38bdf8; color: var(--admin-text); } html[data-admin-theme="dark"] .admin-card { background: var(--admin-surface-elevated) !important; border: 1px solid var(--admin-border); box-shadow: var(--admin-shadow) !important; } /* Profile dropdown */ html[data-admin-theme="dark"] .header-notification .profile-notification { background: var(--admin-surface-elevated) !important; border: 1px solid var(--admin-border); box-shadow: var(--admin-shadow); } html[data-admin-theme="dark"] .header-notification .profile-notification a { color: var(--admin-text) !important; } /* Theme toggle control */ .admin-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0 4px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.95); cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; } .admin-theme-toggle:hover { background: rgba(255, 255, 255, 0.2); } .admin-theme-toggle:active { transform: scale(0.96); } .admin-theme-toggle:focus { outline: 2px solid rgba(56, 189, 248, 0.6); outline-offset: 2px; } .admin-theme-toggle .theme-icon-dark, .admin-theme-toggle .theme-icon-light { font-size: 18px; line-height: 1; } html[data-admin-theme="light"] .admin-theme-toggle .theme-icon-light { display: none !important; } html[data-admin-theme="light"] .admin-theme-toggle .theme-icon-dark { display: inline !important; } html[data-admin-theme="dark"] .admin-theme-toggle .theme-icon-dark { display: none !important; } html[data-admin-theme="dark"] .admin-theme-toggle .theme-icon-light { display: inline !important; } /* Light mode: theme toggle on black bar (moon / sun) */ html[data-admin-theme="light"] .admin-theme-toggle { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; } /* Dashboard home — layout grid */ .admin-dashboard-home .page-body .row { margin-left: -10px; margin-right: -10px; } .admin-dashboard-home .page-body .row > [class*="col-"] { padding-left: 10px; padding-right: 10px; } /* Premium stat cards: muted palette, accent rail (overrides inline + legacy .green) */ .admin-dashboard-home .dash-stat--reg { --dash-accent: #059669; --dash-tint: rgba(5, 150, 105, 0.14); } .admin-dashboard-home .dash-stat--master { --dash-accent: #0e7490; --dash-tint: rgba(14, 116, 144, 0.16); } .admin-dashboard-home .dash-stat--agents { --dash-accent: #4f46e5; --dash-tint: rgba(79, 70, 229, 0.14); } .admin-dashboard-home .dash-stat--deposits { --dash-accent: #b45309; --dash-tint: rgba(180, 83, 9, 0.12); } .admin-dashboard-home .dash-stat--withdrawals { --dash-accent: #1d4ed8; --dash-tint: rgba(29, 78, 216, 0.12); } .admin-dashboard-home .dash-stat--players { --dash-accent: #0284c7; --dash-tint: rgba(2, 132, 199, 0.12); } .admin-dashboard-home .dash-stat--casino { --dash-accent: #7c3aed; --dash-tint: rgba(124, 58, 237, 0.12); } .admin-dashboard-home .dash-stat--betstack { --dash-accent: #64748b; --dash-tint: rgba(100, 116, 139, 0.15); } .admin-dashboard-home .dash-stat--openbet { --dash-accent: #be123c; --dash-tint: rgba(190, 18, 60, 0.14); } .admin-dashboard-home .dash-stat--wonbet { --dash-accent: #15803d; --dash-tint: rgba(21, 128, 61, 0.14); } .admin-dashboard-home .dash-stat--lostbet { --dash-accent: #57534e; --dash-tint: rgba(87, 83, 78, 0.2); } /* Light mode: premium stat cards — white surface, dark icon rail, muted accent edge (not full candy fill) */ html[data-admin-theme="light"] .admin-dashboard-home .dash-stat--reg { --dash-accent: #15803d; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat--master { --dash-accent: #0f766e; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat--agents { --dash-accent: #4338ca; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat--deposits { --dash-accent: #b45309; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat--withdrawals { --dash-accent: #1d4ed8; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat--players { --dash-accent: #0369a1; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat--casino { --dash-accent: #7e22ce; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat--betstack { --dash-accent: #64748b; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat--openbet { --dash-accent: #9f1239; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat--wonbet { --dash-accent: #166534; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat--lostbet { --dash-accent: #57534e; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat { background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.09) !important; border-left: 4px solid var(--dash-accent) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 28px rgba(15, 23, 42, 0.09), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important; color: #0f172a !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat.green, html[data-admin-theme="light"] .admin-dashboard-home .dash-stat[class*="dash-stat--"] { background: #ffffff !important; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat.text-white { color: #0f172a !important; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 16px 40px rgba(15, 23, 42, 0.1) !important; } /* Outer wrapper only — three bet rows supply their own colors */ html[data-admin-theme="light"] .admin-dashboard-home .dash-stat.dash-stat--betstack { background: transparent !important; border: none !important; box-shadow: none !important; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat.dash-stat--betstack:hover { transform: none; box-shadow: none !important; } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat { background: linear-gradient(168deg, #151b24 0%, #0a0d11 100%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-left: 4px solid var(--dash-accent) !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) !important; color: #e8edf4 !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat.text-white { color: #e8edf4 !important; } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat:hover { transform: translateY(-2px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07) !important; } /* Strip candy backgrounds; icon column = soft tint */ .admin-dashboard-home .dash-stat .col-3, .admin-dashboard-home .dash-stat .col-9 { background-color: transparent !important; background: transparent !important; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat .col-3.text-center { background: linear-gradient(165deg, #1c1917 0%, #0c0a09 100%) !important; border-right: 1px solid rgba(15, 23, 42, 0.12) !important; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat .dashboard-icon img { max-height: 48px; width: auto; opacity: 0.95; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat .col-3.text-center { background: rgba(255, 255, 255, 0.04) !important; border-right: 1px solid rgba(255, 255, 255, 0.06); } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat .cst-cont p.m-b-0 { color: #475569 !important; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat .cst-cont p.m-b-0 { color: #f1f5f9 !important; font-weight: 600; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat .duration-label { color: #64748b !important; font-size: 0.8125rem; font-weight: 500; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat .duration-value { color: #0f172a !important; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat .duration-item { background-color: rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat .duration-label { color: rgba(226, 232, 240, 0.88) !important; } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat .duration-value { color: #fff !important; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat .duration-item { background-color: #f8fafc !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; border-radius: 8px !important; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat .wager-amount { background: rgba(5, 150, 105, 0.1) !important; color: #047857 !important; border: 1px solid rgba(5, 150, 105, 0.25) !important; } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat .wager-amount { background: rgba(255, 255, 255, 0.08) !important; color: #a7f3d0 !important; } /* Non-dash stat cards (fallback, e.g. charts) */ html[data-admin-theme="light"] .admin-dashboard-home .mat-clr-stat-card:not(.dash-stat) { border-radius: var(--admin-radius); overflow: hidden; background: #ffffff !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.1) !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; } html[data-admin-theme="dark"] .admin-dashboard-home .mat-clr-stat-card:not(.dash-stat) { border-radius: var(--admin-radius); overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06); } html[data-admin-theme="light"] .admin-dashboard-home .admin-card { border-radius: var(--admin-radius); border: 1px solid var(--admin-border); box-shadow: var(--admin-shadow) !important; } /* Light mode: calm canvas so white cards register clearly */ html[data-admin-theme="light"] .pcoded-main-container { background: linear-gradient(180deg, #e8eaef 0%, #dfe3e8 100%) !important; } /* Dashboard: SVG spark trend (3-metric cards) */ .admin-dashboard-home .dash-stat-mini-chart { margin: 0 0 14px; } .admin-dashboard-home .dash-stat-mini-chart__label { display: flex; justify-content: space-between; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat-mini-chart__label { color: #94a3b8; } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat-mini-chart__label { color: rgba(148, 163, 184, 0.9); } .admin-dashboard-home .dash-stat-spark-host { border-radius: 12px; overflow: hidden; line-height: 0; } html[data-admin-theme="light"] .admin-dashboard-home .dash-stat-spark-host { background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(15, 23, 42, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 12px rgba(15, 23, 42, 0.05); } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat-spark-host { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.07); } .admin-dashboard-home .dash-stat-spark-svg { width: 100%; height: 58px; display: block; } .admin-dashboard-home .dash-stat-spark-line { filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.08)); } html[data-admin-theme="dark"] .admin-dashboard-home .dash-stat-spark-line { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); } /* Morris dashboard charts — premium dark plot wells (reference: deep navy, subtle grid) */ .admin-dashboard-home .admin-chart-panel { --admin-chart-canvas-bg: #0b111e; --admin-chart-grid: #1f2937; --admin-chart-axis-text: #9ca3af; background: var(--admin-chart-canvas-bg); border-radius: 10px; min-height: 240px; padding: 12px 10px 8px; box-sizing: border-box; } .admin-dashboard-home #total_sports_chart.admin-chart-panel { min-height: 300px; color: #9ca3af; font-size: 13px; } .admin-dashboard-home #donut-example.admin-chart-panel { min-height: 260px; } .admin-dashboard-home .admin-chart-panel svg { overflow: visible; } .admin-dashboard-home .admin-chart-panel .morris-hover { background: rgba(15, 23, 42, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; color: #e5e7eb !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important; } .admin-dashboard-home .total-sports-chart .admin-chart-axis-label { color: #9ca3af; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; } html[data-admin-theme="dark"] .admin-dashboard-home .total-sports-chart .admin-chart-axis-label { color: #9ca3af; } html[data-admin-theme="light"] .admin-dashboard-home .total-sports-chart .admin-chart-axis-label { color: #64748b; } /* ----- Phase 1 — COP grouped sidebar + breadcrumbs ----- */ .cop-phase1-nav .cop-nav-section-divider { padding: 0; margin: 0; height: 0; overflow: hidden; } .cop-phase1-nav .cop-nav-section-title { display: none; } .cop-phase1-nav .cop-nav-section-ul { padding-bottom: 0 !important; margin-bottom: 0; } .cop-phase1-nav .pcoded-item.pcoded-left-item > li > a { padding-top: 5px !important; padding-bottom: 5px !important; margin: 0 8px !important; line-height: 1.25; } .cop-phase1-nav .pcoded-item.pcoded-left-item > li > a > .pcoded-micon { width: 26px; height: 26px; padding: 2px; font-size: 13px; } .cop-phase1-nav .pcoded-item .pcoded-hasmenu .pcoded-submenu { margin: 2px auto 4px !important; } .cop-phase1-nav .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a { padding-top: 4px !important; padding-bottom: 4px !important; } .cop-phase1-nav .pcoded-item[item-border="true"] > li > a { border-bottom-width: 1px; } html[data-admin-theme="light"] .cop-phase1-nav .pcoded-item[item-border="true"] > li > a { border-bottom-color: rgba(15, 23, 42, 0.07); } html[data-admin-theme="dark"] .cop-phase1-nav .pcoded-item[item-border="true"] > li > a { border-bottom-color: rgba(255, 255, 255, 0.06); } .cop-phase1-nav .pcoded-item[item-border="true"] > li:last-child > a { border-bottom-width: 0; } .cop-phase1-nav .cop-nav-top-spacer { padding-top: 8px !important; } .cop-phase1-nav .pcoded-item li.pcoded-hasmenu > a:after { padding-top: 6px !important; top: 0 !important; } .cop-phase1-nav a.active { background: var(--admin-sidebar-hover, rgba(255, 255, 255, 0.08)) !important; border-radius: var(--admin-radius-sm, 8px); } .cop-nav-item-hidden { display: none !important; } .cop-breadcrumb-strip { padding: 10px 20px 0; max-width: 100%; } .cop-breadcrumb .breadcrumb { background: transparent; padding: 8px 14px; border-radius: var(--admin-radius-sm, 8px); font-size: 13px; } html[data-admin-theme="light"] .cop-breadcrumb .breadcrumb { background: var(--admin-surface, #fff); box-shadow: var(--admin-shadow); border: 1px solid var(--admin-border); } html[data-admin-theme="dark"] .cop-breadcrumb .breadcrumb { background: var(--admin-surface-elevated, #161d28); border: 1px solid var(--admin-border); } .cop-breadcrumb .breadcrumb-item a { color: #448aff; text-decoration: none; } .cop-breadcrumb .breadcrumb-item.active { color: var(--admin-text-muted, #64748b); } /* ----- Phase 2 — dashboard KPI strip + Chart.js cards ----- */ .phase2-dashboard-charts { align-items: flex-start; } .phase2-kpi-card { border-radius: var(--admin-radius, 12px); border: 1px solid var(--admin-border); box-shadow: var(--admin-shadow); background: var(--admin-surface, #fff); } html[data-admin-theme="dark"] .phase2-kpi-card { background: var(--admin-surface-elevated, #161d28); } .phase2-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--admin-text-muted, #64748b); margin-bottom: 6px; } .phase2-kpi-value { font-size: 1.35rem; font-weight: 700; margin: 0; color: var(--admin-text, #0f172a); } html[data-admin-theme="dark"] .phase2-kpi-value { color: var(--admin-text, #e8edf4); } .phase2-chart-card { border-radius: var(--admin-radius, 12px); border: 1px solid var(--admin-border); box-shadow: var(--admin-shadow); background: var(--admin-surface, #fff); } html[data-admin-theme="dark"] .phase2-chart-card { background: var(--admin-surface-elevated, #161d28); } .phase2-chart-card__header { font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--admin-border); background: transparent; } /* Fixed chart box — prevents Chart.js + flex (h-100) from unbounded vertical growth */ .phase2-chart-card__body { position: relative; height: 220px; min-height: 220px; max-height: 220px; overflow: hidden; padding: 8px 12px; box-sizing: border-box; } .phase2-chart-canvas-wrap { position: relative; width: 100%; height: 100%; max-height: 100%; overflow: hidden; } .phase2-chart-canvas-wrap canvas { display: block; max-width: 100%; } /* ----- COP feature INFO (i) + modal — matches admin shell / dark theme ----- */ :root { --cop-info-trigger-bg: #5b7fd4; --cop-info-header-bg: #2d8f4f; --cop-info-header-text: #ffffff; --cop-info-body-bg-light: #f8fafc; --cop-info-body-bg-dark: #0f1419; --cop-info-body-text-light: #0f172a; --cop-info-body-text-dark: #e8edf4; } .cop-dashboard-overview-row { padding: 0 4px; } .cop-dashboard-overview-title { color: var(--admin-text, #0f172a); font-weight: 700; } html[data-admin-theme="dark"] .cop-dashboard-overview-title { color: var(--admin-text, #e8edf4); } .cop-info-trigger { display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0 0 0 6px; border: none; background: transparent; cursor: pointer; vertical-align: middle; line-height: 1; } .cop-info-trigger:focus { outline: 2px solid rgba(91, 127, 212, 0.55); outline-offset: 2px; border-radius: 50%; } .cop-info-trigger__circle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cop-info-trigger-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .cop-info-trigger__circle--sm { width: 18px; height: 18px; } .cop-info-trigger__circle--header { width: 20px; height: 20px; flex-shrink: 0; } .cop-info-trigger__i { color: #fff; font-size: 12px; font-weight: 700; font-style: italic; font-family: Georgia, "Times New Roman", serif; line-height: 1; transform: translateY(-0.5px); } .cop-info-modal .modal-dialog { max-width: 420px; } .cop-info-modal__sheet { border-radius: var(--admin-radius, 12px); overflow: hidden; box-shadow: var(--admin-shadow); } .cop-info-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--cop-info-header-bg); color: var(--cop-info-header-text); } .cop-info-modal__header-left { display: flex; align-items: center; gap: 10px; } .cop-info-modal__header-label { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; } .cop-info-modal__close-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: var(--admin-radius-sm, 8px); background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0; } .cop-info-modal__close-btn:hover { background: rgba(255, 255, 255, 0.12); } .cop-info-modal__body { padding: 18px 18px 20px; background: var(--cop-info-body-bg-light); color: var(--cop-info-body-text-light); } html[data-admin-theme="dark"] .cop-info-modal__body { background: var(--cop-info-body-bg-dark); color: var(--cop-info-body-text-dark); } .cop-info-modal__feature-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 12px; color: inherit; } .cop-info-modal__text p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: inherit; opacity: 0.95; } .cop-info-modal__text p:last-child { margin-bottom: 0; } .phase2-kpi-label.cop-info-label-row, .phase2-chart-card__header.cop-info-chart-header { gap: 6px; } .mat-clr-stat-card .cop-info-trigger { margin-left: auto; }