/* * Dashboard theme * ----------------------------------------------------------------------------- * Layered on top of Bootstrap 5. Provides the design tokens, spacing/size * utilities and shell components (sidebar, navbar, cards, tables, auth screens) * that the dashboard markup uses. * * Light and dark are both driven by [data-theme] on . */ /* ========================================================================== 1. Tokens ========================================================================== */ :root { --primary-50: #eef2ff; --primary-100: #e0e7ff; --primary-200: #c7d2fe; --primary-500: #6b8fff; --primary-600: #487fff; --primary-700: #3f6fe0; --primary-800: #2f56b3; --success-50: #eefdf3; --success-100: #d1fae5; --success-200: #a7f3d0; --success-500: #22c55e; --success-600: #16a34a; --success-focus: #e6f8ee; --success-main: #0d9f6e; --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-200: #fecaca; --danger-500: #ef4444; --danger-600: #dc2626; --danger-focus: #fdeaea; --danger-main: #dc2626; --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-200: #fde68a; --warning-500: #f59e0b; --warning-600: #d97706; --warning-focus: #fff5e0; --warning-main: #d98f07; --info-50: #eff6ff; --info-100: #dbeafe; --info-200: #bfdbfe; --info-500: #3b82f6; --info-600: #2563eb; --info-focus: #e7f1ff; --info-main: #2563eb; --lilac-50: #f5f3ff; --lilac-100: #ede9fe; --lilac-200: #ddd6fe; --lilac-500: #8b5cf6; --lilac-600: #7c3aed; --neutral-50: #f9fafb; --neutral-100: #f3f4f6; --neutral-200: #e5e7eb; --neutral-300: #d1d5db; --neutral-400: #9ca3af; --neutral-500: #6b7280; --neutral-600: #4b5563; --neutral-700: #374151; --neutral-800: #1f2937; --neutral-900: #111827; --base: #ffffff; --body-bg: #f5f6fa; --text-primary-light: #1f2937; --text-secondary-light: #6b7280; --border-color: #e5e7eb; --card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .04); --sidebar-width: 260px; --sidebar-collapsed: 82px; --radius: 8px; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } [data-theme="dark"] { --base: #273142; --body-bg: #1b2431; --text-primary-light: #e5e7eb; --text-secondary-light: #9ca3af; --border-color: #313d4f; --neutral-50: #1f2937; --neutral-100: #273142; --neutral-200: #313d4f; --neutral-300: #3d4b60; --neutral-600: #cbd5e1; --primary-50: #1e293b; --card-shadow: 0 1px 2px rgba(0, 0, 0, .3); } /* ========================================================================== 2. Base ========================================================================== */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.6; background: var(--body-bg); color: var(--text-primary-light); -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: var(--primary-600); } a:hover { color: var(--primary-700); } h1, h2, h3, h4, h5, h6 { color: var(--text-primary-light); font-weight: 600; margin-top: 0; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1.0625rem; } img { max-width: 100%; height: auto; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 10px; } /* ========================================================================== 3. Utilities ========================================================================== */ /* Font sizes */ .text-xs { font-size: 12px !important; } .text-sm { font-size: 13px !important; } .text-md { font-size: 15px !important; } .text-lg { font-size: 17px !important; } .text-xl { font-size: 20px !important; } .text-2xl { font-size: 24px !important; } .text-3xl { font-size: 30px !important; } .text-4xl { font-size: 36px !important; } .text-5xl { font-size: 44px !important; } /* Text colours */ .text-primary-light { color: var(--text-primary-light) !important; } .text-secondary-light { color: var(--text-secondary-light) !important; } .text-primary-600 { color: var(--primary-600) !important; } .text-primary-500 { color: var(--primary-500) !important; } .text-success-600, .text-success-main { color: var(--success-main) !important; } .text-danger-600, .text-danger-main { color: var(--danger-main) !important; } .text-warning-600, .text-warning-main { color: var(--warning-main) !important; } .text-info-600, .text-info-main { color: var(--info-main) !important; } .text-lilac-600 { color: var(--lilac-600) !important; } .text-neutral-600 { color: var(--neutral-600) !important; } .text-white { color: #fff !important; } .text-black { color: var(--text-primary-light) !important; } .hover-text-primary:hover { color: var(--primary-600) !important; } .hover-text-danger:hover { color: var(--danger-main) !important; } .hover-bg-transparent:hover { background: transparent !important; } /* Backgrounds */ .bg-base { background-color: var(--base) !important; } .bg-body { background-color: var(--body-bg) !important; } .bg-white { background-color: #fff !important; } .bg-primary-50 { background-color: var(--primary-50) !important; } .bg-primary-100 { background-color: var(--primary-100) !important; } .bg-primary-600 { background-color: var(--primary-600) !important; } .bg-neutral-50 { background-color: var(--neutral-50) !important; } .bg-neutral-100 { background-color: var(--neutral-100) !important; } .bg-neutral-200 { background-color: var(--neutral-200) !important; } .bg-success-50 { background-color: var(--success-50) !important; } .bg-success-100 { background-color: var(--success-100) !important; } .bg-success-200 { background-color: var(--success-200) !important; } .bg-success-focus { background-color: var(--success-focus) !important; } .bg-danger-50 { background-color: var(--danger-50) !important; } .bg-danger-100 { background-color: var(--danger-100) !important; } .bg-danger-focus { background-color: var(--danger-focus) !important; } .bg-warning-50 { background-color: var(--warning-50) !important; } .bg-warning-100 { background-color: var(--warning-100) !important; } .bg-warning-focus { background-color: var(--warning-focus) !important; } .bg-info-50 { background-color: var(--info-50) !important; } .bg-info-100 { background-color: var(--info-100) !important; } .bg-info-200 { background-color: var(--info-200) !important; } .bg-info-focus { background-color: var(--info-focus) !important; } .bg-lilac-100 { background-color: var(--lilac-100) !important; } .bg-lilac-200 { background-color: var(--lilac-200) !important; } .bg-gradient-end-1 { background: linear-gradient(270deg, var(--primary-50) 0%, var(--base) 100%) !important; } .bg-gradient-end-2 { background: linear-gradient(270deg, var(--success-50) 0%, var(--base) 100%) !important; } .bg-gradient-end-3 { background: linear-gradient(270deg, var(--info-50) 0%, var(--base) 100%) !important; } .gradient-deep-2 { background: linear-gradient(270deg, var(--lilac-50) 0%, var(--base) 100%) !important; } .bg-gradient-primary { background: linear-gradient(180deg, var(--primary-50) 0%, var(--base) 100%) !important; } /* Borders */ .border-primary-100 { border-color: var(--primary-100) !important; } .border-neutral-300 { border-color: var(--neutral-300) !important; } .border-success-100 { border-color: var(--success-100) !important; } .border-danger-100 { border-color: var(--danger-100) !important; } .border-warning-100 { border-color: var(--warning-100) !important; } .hover-border-primary:hover { border-color: var(--primary-600) !important; } .radius-4 { border-radius: 4px !important; } .radius-8 { border-radius: 8px !important; } .radius-12 { border-radius: 12px !important; } .radius-16 { border-radius: 16px !important; } .left-line { position: relative; } .left-line::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--primary-600); } .line-bg-lilac::before { background: var(--lilac-600); } /* Spacing — generated on an 4px-ish scale matching the markup */ .p-0 { padding: 0 !important; } .p-3 { padding: 12px !important; } .p-8 { padding: 8px !important; } .p-16 { padding: 16px !important; } .p-20 { padding: 20px !important; } .p-24 { padding: 24px !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-8 { padding-left: 8px !important; padding-right: 8px !important; } .px-12 { padding-left: 12px !important; padding-right: 12px !important; } .px-16 { padding-left: 16px !important; padding-right: 16px !important; } .px-20 { padding-left: 20px !important; padding-right: 20px !important; } .px-24 { padding-left: 24px !important; padding-right: 24px !important; } .py-2 { padding-top: 2px !important; padding-bottom: 2px !important; } .py-4 { padding-top: 4px !important; padding-bottom: 4px !important; } .py-6 { padding-top: 6px !important; padding-bottom: 6px !important; } .py-8 { padding-top: 8px !important; padding-bottom: 8px !important; } .py-10 { padding-top: 10px !important; padding-bottom: 10px !important; } .py-11 { padding-top: 11px !important; padding-bottom: 11px !important; } .py-12 { padding-top: 12px !important; padding-bottom: 12px !important; } .py-14 { padding-top: 14px !important; padding-bottom: 14px !important; } .py-16 { padding-top: 16px !important; padding-bottom: 16px !important; } .py-24 { padding-top: 24px !important; padding-bottom: 24px !important; } .py-32 { padding-top: 32px !important; padding-bottom: 32px !important; } .py-40 { padding-top: 40px !important; padding-bottom: 40px !important; } .py-120 { padding-top: 120px !important; padding-bottom: 120px !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 2px !important; } .mb-2 { margin-bottom: 4px !important; } .mb-3 { margin-bottom: 12px !important; } .mb-4 { margin-bottom: 16px !important; } .mb-5 { margin-bottom: 20px !important; } .mb-8 { margin-bottom: 8px !important; } .mb-12 { margin-bottom: 12px !important; } .mb-16 { margin-bottom: 16px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-24 { margin-bottom: 24px !important; } .mb-32 { margin-bottom: 32px !important; } .mb-40 { margin-bottom: 40px !important; } .mt-1 { margin-top: 2px !important; } .mt-2 { margin-top: 4px !important; } .mt-3 { margin-top: 12px !important; } .mt-4 { margin-top: 16px !important; } .mt-8 { margin-top: 8px !important; } .mt-12 { margin-top: 12px !important; } .mt-16 { margin-top: 16px !important; } .mt-24 { margin-top: 24px !important; } .mt-32 { margin-top: 32px !important; } .mt-n8 { margin-top: -8px !important; } .mt-n16 { margin-top: -16px !important; } .gap-1 { gap: 4px !important; } .gap-2 { gap: 8px !important; } .gap-3 { gap: 12px !important; } .gap-4 { gap: 16px !important; } /* Sizing */ .w-36-px { width: 36px !important; } .w-40-px { width: 40px !important; } .w-44-px { width: 44px !important; } .w-80-px { width: 80px !important; } .w-120-px { width: 120px !important; } .h-36-px { height: 36px !important; } .h-40-px { height: 40px !important; } .h-44-px { height: 44px !important; } .h-56-px { height: 56px !important; } .h-80-px { height: 80px !important; } .h-120-px { height: 120px !important; } .h-240-px { height: 240px !important; } .max-w-290-px { max-width: 290px !important; } .max-w-464-px { max-width: 464px !important; } .w-440-px { width: 440px !important; } .cursor-pointer { cursor: pointer !important; } .font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; } .z-n1 { z-index: -1 !important; } .z-1 { z-index: 1 !important; } .line-height-1 { line-height: 1 !important; } .shadow-2 { box-shadow: var(--card-shadow) !important; } .shadow-none { box-shadow: none !important; } /* ========================================================================== 4. Dashboard shell ========================================================================== */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: var(--base); border-right: 1px solid var(--border-color); overflow-y: auto; z-index: 1030; transition: transform .25s ease, width .25s ease; padding: 20px 16px 40px; } .sidebar-logo { display: block; padding: 4px 8px 20px; } .sidebar-logo img { max-height: 46px; width: auto; } .sidebar-logo .logo-icon, .sidebar-logo .dark-logo { display: none; } .sidebar-close-btn { display: none; position: absolute; top: 14px; right: 14px; background: var(--neutral-100); border: 0; border-radius: 50%; width: 32px; height: 32px; color: var(--text-secondary-light); } .sidebar-menu { list-style: none; margin: 0; padding: 0; } .sidebar-menu > li { margin-bottom: 2px; } .sidebar-menu a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius); color: var(--text-secondary-light); font-size: 14px; font-weight: 500; transition: background .18s ease, color .18s ease; } .sidebar-menu a:hover { background: var(--primary-50); color: var(--primary-600); } .sidebar-menu .menu-icon { font-size: 20px; flex-shrink: 0; } .sidebar-menu > li.active-page > a, .sidebar-menu .sidebar-submenu li.active-page > a { background: var(--primary-600); color: #fff; } .sidebar-submenu { list-style: none; margin: 2px 0 6px; padding: 0 0 0 16px; display: none; } .sidebar-menu li.dropdown.open > .sidebar-submenu, .sidebar-menu li.dropdown.dropdown-open > .sidebar-submenu { display: block; } .sidebar-submenu a { padding: 8px 12px; font-size: 13.5px; } .sidebar-submenu .menu-icon { font-size: 17px; } /* Parent rows get a chevron that flips when open */ .sidebar-menu > li.dropdown > a { position: relative; padding-right: 32px; } .sidebar-menu > li.dropdown > a::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; opacity: .6; } .sidebar-menu > li.dropdown.open > a::after, .sidebar-menu > li.dropdown.dropdown-open > a::after { transform: translateY(-30%) rotate(-135deg); } .dashboard-main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin .25s ease; } .dashboard-main-body { flex: 1; padding: 24px; } /* Collapsed (desktop) */ body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); } body.sidebar-collapsed .dashboard-main { margin-left: var(--sidebar-collapsed); } body.sidebar-collapsed .sidebar-menu a { justify-content: center; padding-inline: 8px; } body.sidebar-collapsed .sidebar-menu a span, body.sidebar-collapsed .sidebar-submenu, body.sidebar-collapsed .sidebar-logo .light-logo, body.sidebar-collapsed .sidebar-menu > li.dropdown > a::after { display: none; } body.sidebar-collapsed .sidebar-logo .logo-icon { display: inline-block; max-height: 34px; } /* Top bar */ .navbar-header { position: sticky; top: 0; z-index: 1020; background: var(--base); border-bottom: 1px solid var(--border-color); padding: 14px 24px; } .sidebar-toggle, .sidebar-mobile-toggle { background: var(--neutral-100); border: 0; width: 40px; height: 40px; border-radius: var(--radius); color: var(--text-secondary-light); display: inline-flex; align-items: center; justify-content: center; } .sidebar-toggle:hover, .sidebar-mobile-toggle:hover { background: var(--primary-50); color: var(--primary-600); } .sidebar-mobile-toggle { display: none; } .sidebar-toggle .active { display: none; } body.sidebar-collapsed .sidebar-toggle .active { display: inline-flex; } body.sidebar-collapsed .sidebar-toggle .non-active { display: none; } /* Theme switch: the icon shows the theme you are currently in — sun in light mode, moon in dark. The glyphs are real elements in the markup, so nothing depends on hard-coded icon-font codepoints. */ [data-theme-toggle] { border: 0; cursor: pointer; padding: 0; transition: background .18s ease, color .18s ease; } [data-theme-toggle]:hover { background: var(--primary-50) !important; } .theme-toggle-icon { font-size: 19px; line-height: 1; color: var(--text-secondary-light); transition: color .18s ease; } [data-theme-toggle]:hover .theme-toggle-icon { color: var(--primary-600); } .theme-toggle-icon--dark { display: none; } [data-theme="dark"] .theme-toggle-icon--light { display: none; } [data-theme="dark"] .theme-toggle-icon--dark { display: inline-block; } .d-footer { background: var(--base); border-top: 1px solid var(--border-color); padding: 16px 24px; font-size: 13.5px; color: var(--text-secondary-light); } /* Overlay used by the mobile sidebar */ .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1029; display: none; } body.sidebar-open-mobile .sidebar-backdrop { display: block; } /* ========================================================================== 5. Components ========================================================================== */ .card { background: var(--base); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--card-shadow); } .card-header { background: var(--base); border-bottom: 1px solid var(--border-color); border-radius: 12px 12px 0 0; padding: 16px 24px; } .card-body { padding: 24px; } .table { width: 100%; margin-bottom: 0; color: var(--text-primary-light); border-color: var(--border-color); } .table > thead > tr > th { background: var(--neutral-50); color: var(--text-secondary-light); font-size: 13px; font-weight: 600; text-transform: none; padding: 12px 16px; border-bottom: 1px solid var(--border-color); white-space: nowrap; } .table > tbody > tr > td { padding: 14px 16px; border-bottom: 1px solid var(--border-color); vertical-align: middle; font-size: 14px; } .table > tbody > tr:last-child > td { border-bottom: 0; } .bordered-table > tbody > tr:hover > td { background: var(--neutral-50); } .scroll-sm { overflow-x: auto; } .form-control, .form-select { background: var(--base); border: 1px solid var(--neutral-300); border-radius: var(--radius); color: var(--text-primary-light); padding: 10px 14px; font-size: 14px; } .form-control::placeholder { color: var(--neutral-400); } .form-control:focus, .form-select:focus { background: var(--base); color: var(--text-primary-light); border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(72, 127, 255, .12); outline: 0; } .form-label { font-size: 13.5px; font-weight: 500; margin-bottom: 6px; } .icon-field { position: relative; } .icon-field .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--neutral-400); pointer-events: none; z-index: 2; } .icon-field .form-control { padding-left: 46px; } .btn { border-radius: var(--radius); font-weight: 500; font-size: 14px; padding: 10px 18px; } .btn-primary, .btn-primary-600 { background: var(--primary-600); border-color: var(--primary-600); color: #fff; } .btn-primary:hover, .btn-primary-600:hover { background: var(--primary-700); border-color: var(--primary-700); color: #fff; } .btn-primary-600:disabled, .btn-primary:disabled { opacity: .55; } .btn-danger-600 { background: var(--danger-600); border-color: var(--danger-600); color: #fff; } .btn-danger-600:hover { background: #b91c1c; color: #fff; } .btn-outline-primary { border-color: var(--primary-600); color: var(--primary-600); background: transparent; } .btn-outline-primary:hover { background: var(--primary-600); color: #fff; } .nav-pills .nav-link { color: var(--text-secondary-light); background: transparent; border-radius: var(--radius); } .nav-pills .nav-link.active { background: var(--primary-600); color: #fff; } .bordered-tab .nav-link { border-radius: 0; border-bottom: 2px solid transparent; padding: 18px 20px; } .bordered-tab .nav-link.active { background: transparent; color: var(--primary-600); border-bottom-color: var(--primary-600); } .dropdown-menu { background: var(--base); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .12); padding: 12px; } .dropdown-menu-sm { min-width: 260px; } .dropdown-menu.to-top { right: 0; left: auto; } .to-top-list { list-style: none; margin: 0; padding: 0; } .dropdown-item { color: var(--text-primary-light); border-radius: 6px; } .dropdown-item:hover { background: var(--neutral-50); } .alert { border-radius: var(--radius); border: 1px solid transparent; } .modal-content { background: var(--base); border: 1px solid var(--border-color); border-radius: 12px; } .modal-header, .modal-footer { border-color: var(--border-color); } .list-group-item { background: transparent; border-color: var(--border-color); color: var(--text-primary-light); } .form-check-input:checked { background-color: var(--primary-600); border-color: var(--primary-600); } .form-switch .form-check-input { width: 40px; height: 22px; } .pagination { gap: 6px; } .page-link { border: 1px solid var(--border-color); border-radius: var(--radius) !important; color: var(--text-secondary-light); background: var(--base); padding: 8px 14px; } .page-item.active .page-link { background: var(--primary-600); border-color: var(--primary-600); color: #fff; } .badge-soft { padding: 4px 12px; border-radius: 4px; font-size: 13px; font-weight: 500; } /* ========================================================================== 6. Auth screens ========================================================================== */ .auth { min-height: 100vh; background: var(--base); } .auth-left { width: 48%; background: linear-gradient(150deg, var(--primary-50) 0%, var(--lilac-50) 100%); padding: 40px; } .auth-left img { max-width: 290px; } .auth-right { width: 52%; padding: 40px 24px; } @media (max-width: 991px) { .auth-right { width: 100%; } } .auth-right .form-control { background: var(--neutral-50); } /* ========================================================================== 7. Responsive ========================================================================== */ @media (max-width: 1199px) { .sidebar { transform: translateX(-100%); width: 280px; } body.sidebar-open-mobile .sidebar { transform: translateX(0); } .dashboard-main { margin-left: 0 !important; } .sidebar-toggle { display: none !important; } .sidebar-mobile-toggle { display: inline-flex !important; } .sidebar-close-btn { display: block; } body.sidebar-collapsed .sidebar { width: 280px; } body.sidebar-collapsed .sidebar-menu a { justify-content: flex-start; padding-inline: 14px; } body.sidebar-collapsed .sidebar-menu a span, body.sidebar-collapsed .sidebar-logo .light-logo { display: inline; } } @media (max-width: 575px) { .dashboard-main-body { padding: 16px; } .navbar-header { padding: 12px 16px; } .card-body { padding: 16px; } .card-header { padding: 14px 16px; } } /* ========================================================================== 8. Legacy class compatibility -------------------------------------------------------------------------- Pages carried over from the previous template (withdraw, KYC, support, payment, account listings) still use its class names. Mapping them onto the current design keeps those pages consistent without rewriting their markup. ========================================================================== */ .form-group { margin-bottom: 18px; } .form-group > label, .form--label { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-primary-light); margin-bottom: 6px; } .form--label.required::after, .form-group label.required::after { content: " *"; color: var(--danger-main); } .form--control { display: block; width: 100%; background: var(--base); border: 1px solid var(--neutral-300); border-radius: var(--radius); color: var(--text-primary-light); padding: 10px 14px; font-size: 14px; line-height: 1.5; } .form--control::placeholder { color: var(--neutral-400); } .form--control:focus { border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(72, 127, 255, .12); outline: 0; } textarea.form--control { min-height: 110px; } .btn--base { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary-600); border: 1px solid var(--primary-600); border-radius: var(--radius); color: #fff; font-size: 14px; font-weight: 500; padding: 10px 18px; cursor: pointer; } .btn--base:hover { background: var(--primary-700); border-color: var(--primary-700); color: #fff; } .btn--danger { background: var(--danger-600); border-color: var(--danger-600); color: #fff; } .btn--danger:hover { background: #b91c1c; color: #fff; } .btn--filter { background: var(--primary-600); border-color: var(--primary-600); color: #fff; } .custom--card { background: var(--base); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--card-shadow); margin-bottom: 24px; } .custom--card > .card-header { border-bottom: 1px solid var(--border-color); padding: 16px 24px; } .custom--card > .card-header .card-title { margin: 0; font-size: 1.0625rem; font-weight: 600; } .custom--card > .card-body { padding: 24px; } .custom--table, .table--responsive--lg { width: 100%; color: var(--text-primary-light); } .custom--table > thead > tr > th, .table--responsive--lg > thead > tr > th { background: var(--neutral-50); color: var(--text-secondary-light); font-size: 13px; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border-color); text-align: left; } .custom--table > tbody > tr > td, .table--responsive--lg > tbody > tr > td { padding: 14px 16px; border-bottom: 1px solid var(--border-color); vertical-align: middle; font-size: 14px; } .custom--modal .modal-content { border-radius: 12px; } .text--base { color: var(--primary-600) !important; } .text--success { color: var(--success-main) !important; } .text--danger { color: var(--danger-main) !important; } .text--warning { color: var(--warning-main) !important; } .bg--base { background-color: var(--primary-600) !important; color: #fff; } .empty-slip-message, .empty-message { text-align: center; color: var(--text-secondary-light); padding: 32px 16px; } .switch-primary .form-check-input:checked { background-color: var(--primary-600); border-color: var(--primary-600); } .sidebar-menu-area { padding-bottom: 24px; } /* Filter bar shown/hidden by the shared layout script */ .responsive-filter-card { display: none; } .responsive-filter-card.show { display: block; } .account-form, .file-upload { margin-bottom: 18px; } .feedback { font-size: 13px; color: var(--text-secondary-light); } /* Legacy tables stack into cards on small screens */ @media (max-width: 767px) { .table--responsive--lg > thead { display: none; } .table--responsive--lg > tbody > tr { display: block; border: 1px solid var(--border-color); border-radius: var(--radius); margin-bottom: 12px; padding: 6px 12px; } .table--responsive--lg > tbody > tr > td { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--border-color); padding: 10px 0; text-align: right; } .table--responsive--lg > tbody > tr > td:last-child { border-bottom: 0; } .table--responsive--lg > tbody > tr > td::before { content: attr(data-label); font-weight: 600; color: var(--text-secondary-light); text-align: left; } } /* Small leftovers from carried-over markup */ .fs-14 { font-size: 14px !important; } .fs-13 { font-size: 13px !important; } .input-form-light { border-color: var(--border-color); } .show-filter { margin-bottom: 12px; } .modal-icon { font-size: 42px; color: var(--primary-600); } .success-code { color: var(--success-main); font-weight: 600; } .loading-sms { display: inline-flex; align-items: center; gap: 8px; } /* ========================================================================== 9. Dashboard notice modal ========================================================================== */ #globalNoticeModal .modal-content { border-radius: 14px; overflow: hidden; background: var(--base); } #globalNoticeModal .modal-header { border: 0; padding: 14px 18px; min-height: 58px; } #globalNoticeModal .btn-close { opacity: .75; padding: 8px; margin: 0 0 0 auto; background-size: 17px; transition: opacity .15s ease; } #globalNoticeModal .btn-close:hover { opacity: 1; } #globalNoticeModal .modal-body { padding: 0 16px 16px; } #globalNoticeModal .bg-gradient-primary { background: linear-gradient(160deg, #dbe6fe 0%, #e8f0fe 45%, #eaf4ff 100%); border-radius: 10px; } #globalNoticeModal .card-body { padding: 28px 26px 30px; } #globalNoticeModal h6 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; color: #101828; margin-bottom: 18px; } #globalNoticeModal .card-text p { font-size: 1.02rem; line-height: 1.55; color: #4b5563; margin-bottom: 1.25rem; } #globalNoticeModal .card-text p:last-child { margin-bottom: 0; } #globalNoticeModal .btn { font-size: 1.05rem; font-weight: 600; color: var(--primary-600); background: transparent; border: 0; margin-top: 20px; } #globalNoticeModal .btn:hover { color: var(--primary-700); } [data-theme="dark"] #globalNoticeModal .bg-gradient-primary { background: linear-gradient(160deg, #1e293b 0%, #232f42 100%); } [data-theme="dark"] #globalNoticeModal h6 { color: #f3f4f6; } [data-theme="dark"] #globalNoticeModal .card-text p { color: #cbd5e1; } [data-theme="dark"] #globalNoticeModal .btn-close { filter: invert(1) grayscale(100%); } @media (max-width: 575px) { #globalNoticeModal h6 { font-size: 1.4rem; } #globalNoticeModal .card-text p { font-size: .96rem; } #globalNoticeModal .card-body { padding: 22px 18px 24px; } } /* ========================================================================== 10. Page heading + breadcrumb ========================================================================== */ .page-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; } .page-heading__title { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--text-primary-light); } .breadcrumb-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; /* the browser default bullets read as noise here */ margin: 0; padding: 0; font-size: 13.5px; } .breadcrumb-nav li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary-light); } .breadcrumb-nav li a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary-light); font-weight: 500; transition: color .18s ease; } .breadcrumb-nav li a:hover { color: var(--primary-600); } .breadcrumb-nav li a iconify-icon { font-size: 16px; } /* Chevron between crumbs, drawn rather than typed so it stays crisp */ .breadcrumb-nav li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid var(--neutral-400); border-right: 1.5px solid var(--neutral-400); transform: rotate(45deg); flex-shrink: 0; } .breadcrumb-nav li:last-child { color: var(--text-primary-light); font-weight: 600; } @media (max-width: 575px) { .page-heading { gap: 6px; } .page-heading__title { font-size: 1.1rem; } .breadcrumb-nav { font-size: 12.5px; } } /* Funding cards on the wallet page */ .funding-card__logo { max-height: 26px; width: auto; object-fit: contain; } /* ========================================================================== 11. Responsive refinements ========================================================================== */ /* Nothing should ever push the page sideways */ html, body { max-width: 100%; overflow-x: hidden; } /* Fluid headings so text scales between breakpoints instead of jumping */ h4 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); } h5 { font-size: clamp(1.1rem, 2.2vw, 1.25rem); } h6 { font-size: clamp(1rem, 1.9vw, 1.0625rem); } .page-heading__title { font-size: clamp(1.05rem, 2.4vw, 1.25rem); } /* Wide content scrolls inside its own box rather than stretching the layout */ .table-responsive, .scroll-sm { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { min-width: 100%; } /* Long values (account numbers, trx ids) must not blow the column out */ .font-monospace { word-break: break-all; } /* Pill navs: one scrollable row on narrow screens beats four wrapped rows */ @media (max-width: 767px) { .card-body > .nav-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; } .card-body > .nav-pills::-webkit-scrollbar { display: none; } .card-body > .nav-pills .nav-link { white-space: nowrap; } } /* Tabs inside card headers behave the same way */ @media (max-width: 767px) { .card-header .bordered-tab { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .card-header .bordered-tab::-webkit-scrollbar { display: none; } .card-header .bordered-tab .nav-link { white-space: nowrap; padding: 14px 14px; } } /* Card headers that hold a title plus an action */ @media (max-width: 575px) { .card-header { flex-wrap: wrap; gap: 8px; } .dashboard-main-body { padding: 14px; } .navbar-header { padding: 10px 14px; } /* Filter bars stack, and their buttons go full width */ .card-header form .row > [class*="col-"] { width: 100%; } /* Funding card art keeps its shape on a narrow screen */ .h-240-px { height: 200px !important; } /* Dropdown menus must not overflow the viewport */ .dropdown-menu-sm { min-width: min(260px, calc(100vw - 32px)); } .dropdown-menu { max-width: calc(100vw - 24px); } } /* Very small phones */ @media (max-width: 380px) { .dashboard-main-body { padding: 12px; } .card-body { padding: 14px; } .btn { padding: 9px 14px; font-size: 13.5px; } } /* Buttons that sit alone on a row go full width on phones */ @media (max-width: 575px) { .d-flex.justify-content-end > .btn { width: 100%; } } /* Auth screens: never let the panel touch the edges */ @media (max-width: 575px) { .auth-right { padding: 28px 16px; } } /* Respect reduced-motion across the dashboard too */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* Instant-funding badge on the wallet cards */ .funding-card__badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .24); border: 1px solid rgba(255, 255, 255, .38); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; } /* ========================================================================== 12. Top-bar circular buttons -------------------------------------------------------------------------- The theme toggle and the avatar must read as one pair: identical size, perfectly round, contents clipped to the circle. ========================================================================== */ .nav-circle-btn { /* Fixed box on all three axes so nothing can distort the circle. */ flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; transition: background .18s ease, box-shadow .18s ease; } .nav-circle-btn:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; } /* Theme toggle — neutral disc */ .nav-circle-btn--theme { background: var(--neutral-100); } .nav-circle-btn--theme:hover { background: var(--primary-50); } /* Avatar — tinted disc, image cropped square then clipped round */ .nav-circle-btn--avatar { background: var(--primary-50); box-shadow: inset 0 0 0 1px var(--border-color); } .nav-circle-btn--avatar:hover { box-shadow: inset 0 0 0 1px var(--primary-600); } .nav-circle-btn--avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* Bootstrap adds a caret to dropdown toggles; it would break the circle. */ .nav-circle-btn.dropdown-toggle::after { display: none; } @media (max-width: 575px) { .nav-circle-btn { width: 38px; height: 38px; } }