/* ============================================================
   FORTRADEFX CLIENT AREA — Exact Design
   Based on Fortrade Fx live client portal
   ============================================================ */

:root {
    --fx-primary: #5e72e4;
    --fx-primary-rgb: 94,114,228;
    --fx-dark: #344767;
    --fx-dark-rgb: 52,71,103;
    --fx-body-bg: #f3f3f3;
    --fx-white: #fff;
    --fx-body-color: #67748e;
    --fx-muted: #64748b;
    --fx-border: #e9ecef;
    --fx-input-border: #d2d6da;
    --fx-green: rgb(16,185,129);
    --fx-red: rgb(239,68,68);
    --fx-shadow-card: 0 1px 3px rgba(0,0,0,.1);
    --fx-shadow-lg: 0 8px 26px -4px hsla(0,0%,8%,.15), 0 8px 9px -5px hsla(0,0%,8%,.06);
    --fx-gradient-primary: linear-gradient(310deg, #5e72e4, #825ee4);
    --fx-heading: #1a1a1a;
    --fx-font: 'Open Sans', sans-serif;
    --secondary: #344767;
    --muted: #64748b;
    --muted2: #9ca3af;
    --primary: #5e72e4;
    --primary-dark: #3b4fc9;
    --primary-light: rgba(94,114,228,.08);
    --surface2: #f8f9fa;
    --text2: #1a1a1a;
    --success: rgb(16,185,129);
    --danger: rgb(239,68,68);
    --border: #e9ecef;
    --surface: #f3f3f3;
    --warning: #fb6340;
}

/* ===== GLOBAL ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body {
    font-family: var(--fx-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--fx-body-color);
    background-color: var(--fx-body-bg) !important;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    margin: 0;
}
h1,.h1{font-size:1.625rem;font-weight:700;letter-spacing:.025em;color:var(--fx-heading);line-height:1.5;margin-bottom:0.5rem}
h2,.h2{font-size:1.25rem;font-weight:700;letter-spacing:.025em;color:var(--fx-heading);line-height:1.5;margin-bottom:0.5rem}
h3,.h3{font-size:1.0625rem;font-weight:700;letter-spacing:.025em;color:var(--fx-heading);line-height:1.5;margin-bottom:0.5rem}
h4,.h4{font-size:.9375rem;font-weight:700;letter-spacing:.025em;color:var(--fx-heading);line-height:1.5;margin-bottom:0.5rem}
h5,.h5{font-size:.8125rem;font-weight:700;letter-spacing:.025em;color:var(--fx-heading);line-height:1.5;margin-bottom:0.5rem}
h6,.h6{font-size:.625rem;font-weight:700;letter-spacing:.025em;color:var(--fx-heading);line-height:1.5;margin-bottom:0.5rem;text-transform:uppercase}
a{text-decoration:none;color:var(--fx-primary)}
a:hover{color:#5e72e4}

/* ===== USER LAYOUT ===== */
.user-layout { min-height: 100vh; background: var(--fx-body-bg); overflow-x: hidden; }
body.bg-gray-100 { background-color: var(--fx-body-bg) !important; }
.sticky-header { position: sticky; top: 0; z-index: 1020; }
.header-wrapper { background: var(--fx-body-bg); }
.page-content { padding: 1.5rem; margin-top: 0; }
@media (min-width: 992px) {
    .g-sidenav-show .page-content { min-height: calc(100vh - 140px); }
}

/* ===== TIME BAR ===== */
.time-bar-section {
    background: #fff;
    border-radius: 16px;
    margin: 12px 16px 0;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.time-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: #344767;
    font-weight: 500;
}
.platform-text { font-weight: 600; color: #344767; font-size: 0.8125rem; }
.time-date { color: #64748b; font-size: 0.8125rem; font-weight: 500; }
.timezone-item { font-size: 0.8125rem; color: #344767; font-weight: 500; }
.tz-time { color: #344767; font-weight: 600; }

/* ===== TOP SECTION ===== */
.top-section { background: transparent; padding: 16px 0 12px; }
.logo-container a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-decoration: none;
}
.brand-logo-img { height: 36px; width: auto; }
.brand-arabic-text {
    font-size: 11px;
    color: #344767;
    font-weight: 600;
    direction: rtl;
    line-height: 1;
    margin-top: -2px;
}
.button-group { display: flex; align-items: center; gap: 12px; }

/* Wallet Display */
.wallet-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow .15s;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.wallet-display:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.wallet-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 16px;
}
.wallet-icon-wrapper .wallet-icon {
    width: 20px;
    height: 20px;
}
.balance-text { font-weight: 600; font-size: 0.9375rem; color: var(--fx-heading); }

/* Deposit Button */
.deposit-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 10px;
    background: #000;
    color: #fff !important;
    border: none;
    cursor: pointer;
    transition: opacity .15s;
    line-height: 1.4;
    text-decoration: none;
}
.deposit-button:hover { opacity: 0.85; color: #fff !important; }

/* ===== MOBILE NAV BAR ===== */
.mobile-nav-bar {
    background: #fff;
    border-radius: 16px;
    margin: 0 12px 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.nav-circle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    cursor: pointer;
    color: #64748b;
    font-size: 15px;
    position: relative;
    transition: all .15s;
    flex-shrink: 0;
}
.nav-circle-btn:hover { border-color: #344767; color: #344767; }
.nav-circle-btn i { font-size: 15px; }
.hamburger-btn-mobile {
    background: none;
    border: 1.5px solid #e0e0e0;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hamburger-btn-mobile i { font-size: 16px; color: #64748b; }
.user-name-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background .15s;
}
.user-name-dropdown:hover { background: #f8f9fa; }
.user-name-dropdown .user-name-text {
    font-size: 0.875rem;
    font-weight: 700;
    color: #344767;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
.user-name-dropdown .user-menu-arrow { font-size: 10px; color: #64748b; }

/* ===== NAVBAR ===== */
.navbar-section { background: transparent; padding: 0 0 12px; }
.admin-nav-menu {
    background: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Desktop Nav */
.icon-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    height: 100%;
    flex: 1;
}
.icon-nav-list > li { height: 100%; display: flex; align-items: center; position: relative; }
.icon-nav-list > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s;
    border-radius: 10px;
}
.icon-nav-list > li > a:hover { color: #344767; background: #f8f9fa; }
.icon-nav-list > li > a.active {
    color: #fff;
    background: #000;
    font-weight: 600;
}
.icon-nav-list > li > a i:first-child { font-size: 14px; }
.sub-arrow { font-size: 9px; margin-left: 2px; opacity: 0.6; }

/* Submenu dropdown (hover) */
.has-submenu { position: relative; }
.popup-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--fx-white);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    box-shadow: var(--fx-shadow-lg);
    z-index: 9999;
    padding: 0.5rem 0;
    margin-top: 8px;
}
.popup-submenu-content { display: flex; flex-direction: column; }
.popup-submenu .popup-link {
    display: flex;
    align-items: center;
    padding: 0.55rem 1rem;
    font-size: 0.8125rem;
    color: var(--fx-body-color);
    transition: background .1s;
}
.popup-submenu .popup-link:hover { background: #f8f9fa; color: var(--fx-dark); }

/* Right side nav items */
.user-menu-item { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* ===== WALLET POPUP ===== */
.wallet-popup {
    display: none;
    position: fixed;
    min-width: 240px;
    background: var(--fx-white);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    box-shadow: var(--fx-shadow-lg);
    z-index: 9999;
    padding: 0.5rem 0;
}
.wallet-popup .popup-content { padding: 0; }
.wallet-popup .popup-header {
    padding: 0.75rem 1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fx-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--fx-border);
}
.wallet-popup .popup-balance {
    padding: 0.5rem 1rem 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fx-dark);
}
.wallet-popup .popup-link {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    color: var(--fx-body-color);
    font-size: 0.8125rem;
    transition: background .1s;
}
.wallet-popup .popup-link:hover { background: #f8f9fa; color: var(--fx-dark); }
.wallet-popup .popup-divider { border-top: 1px solid var(--fx-border); margin: 0.25rem 0; }

/* ===== INFORMATION TOOLS POPUP ===== */
.information-tools-popup {
    display: none;
    position: fixed;
    min-width: 220px;
    background: var(--fx-white);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    box-shadow: var(--fx-shadow-lg);
    z-index: 9999;
    padding: 0.5rem 0;
}
.information-tools-popup .popup-content { padding: 0; }
.information-tools-popup .popup-header {
    padding: 0.75rem 1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fx-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--fx-border);
}
.information-tools-popup .popup-empty {
    padding: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--fx-muted);
}
.information-tools-popup .popup-empty i {
    display: block;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}
.information-tools-popup .popup-link {
    display: flex;
    align-items: center;
    padding: 0.55rem 1rem;
    font-size: 0.8125rem;
    color: var(--fx-body-color);
    transition: background .1s;
}
.information-tools-popup .popup-link:hover { background: #f8f9fa; color: var(--fx-dark); }
.information-tools-popup .popup-link.text-danger { color: #f5365c; }
.information-tools-popup .popup-link.text-danger:hover { background: #fff5f5; }
.information-tools-popup .popup-divider { border-top: 1px solid var(--fx-border); margin: 0.25rem 0; }
.information-tools-popup .popup-notif-item {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--fx-border);
}
.information-tools-popup .popup-notif-title {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--fx-dark);
}
.information-tools-popup .popup-notif-msg {
    font-size: 0.7rem;
    color: var(--fx-muted);
    margin-top: 2px;
}

.notif-wrapper, .user-dropdown-wrapper { position: relative; cursor: pointer; }
.notif-badge-count {
    position: absolute;
    top: 0;
    right: 0;
    background: #f5365c;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fx-white);
}

/* ===== MOBILE SIDEBAR ===== */
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1040;
}
.mobile-sidebar-overlay.show { display: block; }
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    background: var(--fx-white);
    box-shadow: 2px 0 10px rgba(0,0,0,.1);
    z-index: 1050;
    transition: left .3s ease;
    overflow-y: auto;
}
.mobile-sidebar.open { left: 0; }
.mobile-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--fx-border);
}
.mobile-sidebar-brand { font-weight: 700; font-size: 1.125rem; color: var(--fx-dark); }
.mobile-sidebar-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--fx-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.mobile-sidebar-heading {
    padding: 0.75rem 1.25rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fx-muted);
}
.mobile-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 1.25rem;
    color: var(--fx-body-color);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all .15s;
    border-left: 3px solid transparent;
}
.mobile-sidebar-link:hover { background: #000; color: var(--fx-dark); }
.mobile-sidebar-link.active {
    background: #000;
    color: #fff !important;
    border-left-color: #000;
}
.mobile-sidebar-link.active i { color: #fff; }
.mobile-sidebar-link i { width: 18px; text-align: center; font-size: 1.125rem; }
.mobile-sidebar-link.text-danger { color: #f5365c; }
.mobile-sidebar-submenu { display: none; padding: 0; margin: 0; background: #f8f9fa; }
.mobile-sidebar-submenu .mobile-sidebar-link { padding-left: 3rem; font-size: 0.75rem; }
.has-submenu-wrap .menu-arrow { transition: transform .3s; }
.mobile-sidebar-footer { border-top: 1px solid var(--fx-border); margin-top: 1rem; padding: 0.5rem 0; }

/* Enhanced mobile sidebar overlay (slide-in with backdrop) */
.mobile-sidebar-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.mobile-sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}
.mobile-sidebar {
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    will-change: transform;
    transform: translateX(-100%);
    left: 0;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
.mobile-sidebar.open {
    transform: translateX(0);
    box-shadow: 6px 0 30px rgba(0,0,0,.18);
}
.mobile-sidebar-header {
    position: sticky;
    top: 0;
    background: var(--fx-white);
    z-index: 1;
    padding-top: calc(.85rem + env(safe-area-inset-top));
}
.mobile-sidebar-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color .15s ease;
}
.mobile-sidebar-close:hover,
.mobile-sidebar-close:active {
    background: #f1f3f5;
}
.mobile-sidebar-link {
    min-height: 44px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mobile-sidebar-link i { transition: color .15s ease; }

/* ===== MOBILE BOTTOM NAV ===== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid #e9ecef;
    z-index: 1030;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    justify-content: space-around;
    align-items: stretch;
    gap: 2px;
    -webkit-overflow-scrolling: touch;
}
.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    color: #6b7280;
    font-size: 11px;
    line-height: 1.2;
    text-decoration: none;
    min-width: 56px;
    min-height: 48px;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    flex: 1 1 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.mobile-bottom-nav-item i {
    font-size: 20px;
    margin-bottom: 2px;
    transition: transform .15s ease;
}
.mobile-bottom-nav-item:hover { color: #5e72e4; }
.mobile-bottom-nav-item:active {
    transform: scale(.92);
    background: rgba(94,114,228,.08);
}
.mobile-bottom-nav-item.active {
    color: #5e72e4;
    font-weight: 700;
}
.mobile-bottom-nav-item.active i { transform: scale(1.05); }
.mobile-bottom-nav-item .badge {
    position: absolute;
    top: 2px;
    right: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    border: 2px solid #fff;
    box-sizing: content-box;
}
.mobile-bottom-nav-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-top: -18px;
    border-radius: 50%;
    background: var(--fx-gradient-primary, linear-gradient(310deg, #5e72e4, #825ee4));
    color: #fff;
    box-shadow: 0 4px 14px rgba(94,114,228,.45);
    border: 3px solid #fff;
    font-size: 22px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.mobile-bottom-nav-fab:active { transform: scale(.94); }
.mobile-bottom-nav-fab i { margin: 0; }

/* ===== CARDS ===== */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0,0,0,.125);
    border-radius: 1rem;
    box-shadow: var(--fx-shadow-card);
}
.card .card-header {
    padding: 1.5rem;
    background: transparent;
    border-bottom: 0 solid rgba(0,0,0,.125);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card .card-header:first-child { border-radius: 1rem 1rem 0 0; }
.card .card-header.pb-0 { padding-bottom: 0; }
.card .card-body {
    font-family: var(--fx-font);
    padding: 1.5rem;
    flex: 1 1 auto;
}
.card .card-footer {
    padding: 1.5rem;
    background: transparent;
    border-top: 0;
}

/* Dashboard Card legacy classes (backcompat) */
.card-crm {
    background: var(--fx-white) !important;
    border: 0 !important;
    border-radius: 1rem;
    box-shadow: var(--fx-shadow-card);
}
.card-header-crm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem 0.5rem;
    flex-shrink: 0;
}
.card-header-crm h6 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fx-dark);
    margin: 0;
}
.card-body-crm {
    padding: 0.75rem 1.5rem 1.5rem;
    flex: 1;
}

/* Dashboard Card */
.dashboard-card {
    background: var(--fx-white);
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    padding: 24px;
    width: 100%;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dashboard-card:hover { border-color: #5e72e4; }
.dashboard-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border-bottom: none;
}
.dashboard-card .card-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--fx-heading);
    margin: 0;
}
.dashboard-card .card-body {
    padding: 0;
    flex: 1;
}
.dashboard-card .card-body.p-0 {
    padding: 0;
}
.dashboard-card .card-body:not(.p-0) {
    padding: 0;
}

/* ===== FUNDS CARD (My Funds) ===== */
/* Balance row wraps the wallet-display component */
.balance-row {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}
.balance-row .wallet-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 8px;
    width: 100%;
    box-shadow: none;
}
.balance-row .wallet-display:hover {
    box-shadow: none;
}
.balance-row .wallet-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 16px;
}
.balance-row .wallet-icon-wrapper svg {
    width: 20px;
    height: 20px;
    color: #6b7280;
}
.balance-row .balance-text {
    font-size: 15px;
    font-weight: 600;
    color: #344767;
}
.balance-amount {
    font-size: 42px;
    font-weight: 700;
    color: var(--fx-heading);
    letter-spacing: -2px;
    line-height: 1;
}
.balance-currency {
    font-size: 24px;
    font-weight: 600;
    color: var(--fx-heading);
}
.buttons-row {
    display: flex;
    gap: 40px;
    justify-content: center;
}
.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
}
.action-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.action-icon-circle:hover {
    background-color: #333;
    transform: none;
    box-shadow: none;
}
.action-icon-circle svg {
    width: 22px;
    height: 22px;
    color: #fff;
}
.action-icon-circle i { color: #fff; font-size: 1.25rem }
.action-text {
    font-size: 13px;
    font-weight: 500;
    color: #67748e;
    text-align: center;
}

/* ===== TABLE CARD (shared by Trading Accounts & Market Watch) ===== */
.table-card .table {
    min-width: 800px;
    margin-bottom: 0;
}
.table-card .table thead.table-light th {
    background: #f8f9fa;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap;
}
.table-card .table tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    color: #67748e;
}
.table-card .table tbody tr:last-child td {
    border-bottom: none;
}
.table-card .table tbody tr:hover {
    background-color: rgba(0,0,0,.02);
}
.btn-open-account {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: #000;
    color: #fff !important;
    text-decoration: none;
    transition: opacity .15s;
}
.btn-open-account:hover {
    opacity: 0.85;
    color: #fff !important;
}
.btn-filter {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #000;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .15s;
}
.btn-filter:hover {
    opacity: 0.85;
}
.trading-accounts-table {
    width: 100%;
    border-collapse: collapse;
}
.trading-accounts-table thead {
    background: #f5f5f5;
}
.trading-accounts-table thead th {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #67748e;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid #e9ecef;
}
.trading-accounts-table tbody td {
    padding: 14px 16px;
    font-size: 13px;
    color: #67748e;
    border-bottom: 1px solid #f0f0f0;
}
.trading-accounts-table tbody tr:last-child td {
    border-bottom: none;
}
.platform-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #000;
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.account-type-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #f5f5f5;
    color: #67748e;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

/* ===== MARKET WATCH TABLE ===== */
.market-watch-container {
    max-height: 320px;
    overflow-y: auto;
}
.market-watch-table {
    width: 100%;
    border-collapse: collapse;
}
.market-watch-table thead {
    background: #f5f5f5;
    position: sticky;
    top: 0;
    z-index: 1;
}
.market-watch-table thead th {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #67748e;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid #e9ecef;
}
.market-watch-table tbody td {
    padding: 10px 16px;
    font-size: 13px;
    color: #67748e;
    border-bottom: 1px solid #f0f0f0;
}
.market-watch-table tbody tr:last-child td {
    border-bottom: none;
}
.market-watch-table tbody tr:hover {
    background: #f8f9fa;
}
.change-positive {
    color: #10b981 !important;
    font-weight: 600;
}
.change-negative {
    color: #ef4444 !important;
    font-weight: 600;
}

/* ===== NEWS FEED ===== */
.news-feed-body {
    max-height: 320px;
    overflow-y: auto;
    padding: 0 !important;
}
.news-feed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}
.news-feed-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
}
.news-feed-item:hover {
    background: #e9ecef;
    transform: translateX(4px);
}
.news-feed-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.news-feed-icon i {
    color: #fff;
    font-size: 12px;
}
.news-feed-content {
    flex: 1;
}
.news-feed-date {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
}
.news-feed-title {
    font-size: 13px;
    font-weight: 600;
    color: #344767;
    line-height: 1.4;
}

/* ===== TABLE ===== */
.table-container { overflow-x: auto; }
.table-crm {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.table-crm thead th {
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--fx-muted);
    text-transform: uppercase;
    opacity: 0.7;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--fx-border);
    background: var(--fx-white);
    text-align: left;
}
.table-crm tbody td {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}
.table-crm tbody tr:last-child td { border-bottom: none; }
.table-crm tbody tr:hover { background-color: rgba(0,0,0,.02); }
.dashboard-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.dashboard-card table {
    width: 100%;
    border-collapse: collapse;
}
.dashboard-card table thead th {
    white-space: nowrap;
    font-weight: 600;
    font-size: 13px;
    color: #666;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fx-border);
    text-align: left;
}
.dashboard-card table tbody td {
    padding: 12px 16px;
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--fx-border);
    color: var(--fx-body-color);
}
.dashboard-card table tbody tr:last-child td { border-bottom: none; }
.dashboard-card table tbody tr:hover { background-color: rgba(0,0,0,.02); }
.change-percent { font-weight: 700; }
.change-percent.pos { color: var(--fx-green); }
.change-percent.neg { color: var(--fx-red); }

/* Market Watch table */
.crm-market-table { font-variant-numeric: tabular-nums; }
.crm-market-table thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fx-muted);
    padding: 14px 12px;
    border-bottom: 2px solid var(--fx-border);
    background: rgba(0,0,0,.02);
    white-space: nowrap;
}
.crm-market-table thead th.text-end { padding-right: 16px; }
.crm-market-table thead th.text-start { padding-left: 16px; }
.crm-market-table tbody td {
    padding: 14px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--fx-border);
    font-size: 0.875rem;
    color: #475569;
}
.crm-market-table tbody td.text-end { padding-right: 16px; }
.crm-market-table tbody td.text-start { padding-left: 16px; }
.crm-market-table tbody tr:last-child td { border-bottom: none; }
.crm-market-table tbody tr:hover { background-color: rgba(94,114,228,.04); }
.market-symbol { display: inline-flex; align-items: center; gap: 10px }
.market-symbol-icon { font-size: 0.875rem; opacity: 0.7 }
.market-num { font-weight: 600; color: var(--fx-body-color) }
.market-num--high { color: var(--fx-green) }
.market-num--low { color: var(--fx-red) }
.market-num--close { color: var(--fx-dark); font-weight: 800 }
.market-change { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.2 }
.market-change__value { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 0.875rem }
.market-change__pct { font-size: 0.75rem; font-weight: 700; padding: 1px 8px; border-radius: 6px; background: rgba(0,0,0,.06); color: var(--fx-muted) }
.market-change--up .market-change__value { color: var(--fx-green) }
.market-change--up .market-change__pct { background: rgba(16,185,129,.12); color: #047857 }
.market-change--down .market-change__value { color: var(--fx-red) }
.market-change--down .market-change__pct { background: rgba(239,68,68,.12); color: #b91c1c }
body.dark-version .crm-market-table thead th { background: rgba(255,255,255,.04); }
body.dark-version .crm-market-table tbody td { color: #cbd5e1; }
body.dark-version .crm-market-table tbody tr:hover { background-color: rgba(94,114,228,.08); }
body.dark-version .market-change--up .market-change__pct { background: rgba(16,185,129,.2); color: #34d399; }
body.dark-version .market-change--down .market-change__pct { background: rgba(239,68,68,.2); color: #f87171; }

/* ===== NEWS ===== */
.news-list { display: flex; flex-direction: column; gap: 8px; }
.news-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
}
.news-item:hover { background-color: #e9ecef; transform: translateX(4px); }
.news-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.news-icon i { color: #fff; font-size: 12px; }
.news-content { flex: 1; }
.news-date { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.news-title { font-size: 13px; font-weight: 600; color: #344767; line-height: 1.4; }

/* ===== LOADING / EMPTY / ERROR STATES ===== */
.loading-state, .empty-state, .error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: #666;
}
.loading-state i, .empty-state i, .error-state i {
    font-size: 48px;
    margin-bottom: 16px;
    color: #999;
}
.loading-state p, .empty-state p, .error-state p {
    font-size: 14px;
    color: #666;
    margin: 0;
}
.retry-button {
    margin-top: 12px;
    padding: 8px 20px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.retry-button:hover { background: #333; }

/* ===== MODAL ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 1rem;
}
.modal-container {
    background: var(--fx-white);
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 80px rgba(0,0,0,.4);
    position: relative;
}
.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: #f5f5f5;
    border: none;
    font-size: 1.5rem;
    color: var(--fx-muted);
    cursor: pointer;
    z-index: 1;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-close:hover { background: #f3f3f3; }

/* ===== FORMS ===== */
.form-control, .form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4rem;
    color: #495057;
    background-color: var(--fx-white);
    border: 1px solid var(--fx-input-border);
    border-radius: 0.5rem;
    transition: box-shadow .15s ease, border-color .15s ease;
    font-family: var(--fx-font);
}
.form-control:focus, .form-select:focus {
    color: #495057;
    background-color: var(--fx-white);
    border-color: var(--fx-primary);
    outline: 0;
    box-shadow: 0 3px 9px rgba(50,50,9,0), 3px 4px 8px rgba(var(--fx-primary-rgb),.1);
}
.form-control-lg { min-height: unset; padding: .75rem .75rem; font-size: .875rem; border-radius: .5rem; }
.form-control-default { padding: .5rem .75rem; font-size: .875rem; border-radius: .5rem; }
.form-control::placeholder { color: #6c757d; opacity: 1; }
.form-label {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fx-dark);
    display: block;
    margin-left: .25rem;
}
.form-group { margin-bottom: 1rem; }

/* Form Switch */
.form-switch {
    padding-left: 3rem;
    display: flex;
    align-items: center;
}
.form-switch .form-check-input {
    width: 2.5rem;
    margin-left: -3rem;
    background-image: none;
    border-radius: 2.5rem;
    border: 1px solid #e9ecef;
    position: relative;
    background-color: rgba(33,37,41,.1);
    height: 1.25em;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background-color .25s ease, border-color .25s ease;
}
.form-switch .form-check-input:after {
    transition: transform .25s ease-in-out, background-color .25s ease-in-out;
    content: "";
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    transform: translateX(1px);
    box-shadow: 0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12), 0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07);
    top: 1px;
}
.form-switch .form-check-input:checked {
    border-color: rgba(94,114,228,.95);
    background-color: rgba(94,114,228,.95);
}
.form-switch .form-check-input:checked:after { transform: translateX(21px); }
.form-switch .form-check-label {
    margin-bottom: 0;
    margin-left: .5rem;
    font-size: .875rem;
    font-weight: 400;
    cursor: pointer;
}

/* ===== ARGON-STYLE BUTTON SHADOWS ===== */
.btn.shadow-argon {
    box-shadow: 0 4px 6px rgba(50,50,93,.1), 0 1px 3px rgba(0,0,0,.08);
    transition: all .15s ease;
}
.btn.shadow-argon:hover {
    box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

/* ===== SUBMENU CLICK TOGGLE ===== */
#desktopNav .has-submenu { position: relative; }
#desktopNav .popup-submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--fx-white); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; box-shadow: var(--fx-shadow-lg); z-index: 9999; padding: 0.5rem 0; margin-top: 8px; }
#desktopNav .popup-submenu-content { display: flex; flex-direction: column; }
#desktopNav .popup-submenu .popup-link { display: flex; align-items: center; padding: 0.55rem 1rem; font-size: 0.8125rem; color: var(--fx-body-color); transition: background .1s; }
#desktopNav .popup-submenu .popup-link:hover { background: #f8f9fa; color: var(--fx-dark); }

/* ===== BUTTONS ===== */
.btn-primary-crm {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: #000;
    color: #fff !important;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1.5;
}
.btn-primary-crm:hover {
    background: #1a1a1a;
    color: #fff;
}
.btn-secondary-crm {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--fx-input-border);
    background: var(--fx-white);
    color: var(--fx-body-color);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1.5;
}
.btn-secondary-crm:hover { border-color: var(--fx-primary); color: var(--fx-primary); }
.btn-sm-crm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.btn-xs { padding: 0.25rem 0.625rem; font-size: 0.75rem; }

/* ===== BADGES ===== */
.badge-crm {
    padding: 0.35rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.45rem;
    text-transform: uppercase;
}
.badge-crm.bg-crm-primary { background: var(--fx-primary); color: #fff; }
.badge-crm.bg-crm-secondary { background: var(--fx-muted); color: #fff; }
.badge-crm.bg-crm-success { background: var(--fx-green); color: #fff; }
.badge-crm.bg-crm-danger { background: var(--fx-red); color: #fff; }
.badge-crm.bg-crm-warning { background: #fb6340; color: #fff; }
.badge-crm.bg-crm-info { background: #11cdef; color: #fff; }
.badge-crm.bg-crm-dark { background: var(--fx-dark); color: #fff; }

/* ===== STAT ICONS ===== */
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}
.stat-icon.si-primary { background: var(--fx-gradient-primary); color: #fff; box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); }
.stat-icon.si-success { background: linear-gradient(310deg, #474747, #2d2416); color: #fff; }
.stat-icon.si-danger { background: linear-gradient(310deg, #f5365c, #f56036); color: #fff; }
.stat-icon.si-warning { background: linear-gradient(310deg, #fb6340, #fbb140); color: #fff; }
.stat-icon.si-info { background: linear-gradient(310deg, #1171ef, #11cdef); color: #fff; }
.stat-icon.si-gold { background: linear-gradient(310deg, #f5a623, #f7b733); color: #fff; box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); }
.stat-icon.si-green { background: linear-gradient(310deg, #10b981, #34d399); color: #fff; box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); }
.stat-icon.si-orange { background: linear-gradient(310deg, #fb6340, #fbb140); color: #fff; box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); }
.stat-icon.si-blue { background: linear-gradient(310deg, #1171ef, #11cdef); color: #fff; box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); }
.stat-icon.si-secondary { background: linear-gradient(310deg, #64748b, #67748e); color: #fff; box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); }
.stat-icon.si-red { background: linear-gradient(310deg, #f5365c, #f56036); color: #fff; box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); }

/* ===== AVATARS ===== */
.avatar-crm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    border-radius: 0.75rem;
    height: 48px;
    width: 48px;
    transition: all .2s ease-in-out;
    background: var(--fx-gradient-primary);
    font-weight: 700;
}
.avatar-crm-sm { width: 36px !important; height: 36px !important; font-size: 0.875rem; }

/* ===== WALLET TABS ===== */
.desktop-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--fx-border);
}
.desktop-tabs .nav-item { margin-bottom: -1px; }
.desktop-tabs .nav-link {
    display: block;
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fx-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
}
.desktop-tabs .nav-link:hover { color: var(--fx-dark); }
.desktop-tabs .nav-link.active { color: var(--fx-dark); border-bottom-color: var(--fx-dark); }

/* Mobile vertical menu */
.mobile-vertical-menu { display: none; flex-direction: column; gap: 2px; }
.mobile-vertical-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fx-body-color);
    text-decoration: none;
    transition: background .15s;
}
.mobile-vertical-menu .menu-item:hover { background: rgba(0,0,0,.04); }
.mobile-vertical-menu .menu-item.active { background: #000; color: #fff; font-weight: 700; }
.mobile-vertical-menu .menu-item.active .menu-icon { color: #fff; }
.mobile-vertical-menu .menu-icon { width: 18px; text-align: center; color: var(--fx-muted); }

/* Mobile horizontal tabs */
.mobile-horizontal-tabs { display: none; align-items: center; gap: 4px; border-bottom: 1px solid var(--fx-border); padding-bottom: 0; }
.mobile-horizontal-tabs .scroll-button {
    background: none; border: none; cursor: pointer; padding: 8px;
    color: var(--fx-muted); font-size: 12px; flex-shrink: 0;
}
.mobile-horizontal-tabs .scroll-button:disabled { opacity: .3; cursor: default; }
.mobile-horizontal-tabs .tabs-scroll-container {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 0; flex: 1; scrollbar-width: none; -ms-overflow-style: none;
}
.mobile-horizontal-tabs .tabs-scroll-container::-webkit-scrollbar { display: none; }
.mobile-horizontal-tabs .mobile-tab {
    flex-shrink: 0; padding: 0.75rem 1rem; font-size: 0.8125rem;
    font-weight: 600; color: var(--fx-muted); text-decoration: none;
    border-bottom: 2px solid transparent; white-space: nowrap;
    background: none; border-top: none; border-left: none; border-right: none;
    cursor: pointer; transition: color .15s, border-color .15s;
}
.mobile-horizontal-tabs .mobile-tab:hover { color: var(--fx-dark); }
.mobile-horizontal-tabs .mobile-tab.active { color: var(--fx-dark); border-bottom-color: var(--fx-dark); }

@media (max-width: 767px) {
    .desktop-tabs { display: none; }
    .mobile-vertical-menu { display: flex; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .desktop-tabs { display: none; }
    .mobile-horizontal-tabs { display: flex; }
}
@media (min-width: 992px) {
    .desktop-tabs { display: flex; }
    .mobile-vertical-menu { display: none; }
    .mobile-horizontal-tabs { display: none; }
}

/* Override nav-link for desktop tabs to not use Bootstrap's default styling */
.nav.nav-tabs.desktop-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    margin-bottom: -1px;
}
.nav.nav-tabs.desktop-tabs .nav-link.active {
    border: none;
    border-bottom: 2px solid var(--fx-dark);
    background: none;
}
.nav.nav-tabs.desktop-tabs .nav-link:hover {
    border: none;
    border-bottom: 2px solid transparent;
    isolation: auto;
}

/* ===== TABLE CARD ===== */
.table-card {
    border: 1px solid var(--fx-border);
    border-radius: 0.75rem;
    overflow: hidden;
}
.table-card .table { min-width: var(--table-min-w, 800px); }
.table-card .table thead th {
    background: #f8f9fa;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fx-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--fx-border);
}
.table-card .table tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    color: var(--fx-body-color);
}
.table-card .table tbody tr:last-child td { border-bottom: none; }
.table-card .table tbody tr:hover { background-color: rgba(0,0,0,.02); }

/* ===== PAGE HEADER ===== */
.page-header {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.page-header h1 { font-size: 1.625rem; font-weight: 700; color: var(--fx-heading); letter-spacing: .025em; margin: 0; }
.page-header p { font-size: 0.875rem; color: var(--fx-body-color); margin: 0; }

/* ===== ADMIN HORIZONTAL LAYOUT ===== */
.admin-layout-wrapper {
    background: var(--fx-body-bg);
}
.admin-layout-wrapper .admin-top-section {
    padding: 12px 16px 0;
}
.admin-layout-wrapper .brand-logo-img {
    height: 36px;
    width: auto;
}
.admin-layout-wrapper .logo-container a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* ===== ADMIN NAVBAR ===== */
.admin-navbar-section {
    padding: 8px 16px 0;
}
.admin-navbar {
    background: var(--fx-white);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    min-height: 42px;
}
.admin-navbar-left {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.admin-navbar-left::-webkit-scrollbar { display: none; }
.admin-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    flex-wrap: nowrap;
}
.admin-nav-list > li {
    display: flex;
    align-items: center;
}
.admin-hamburger-btn {
    display: none;
    background: none;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    color: #6b7280;
    font-size: 22px;
    border-radius: 0.75rem;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.admin-hamburger-btn:hover {
    background-color: rgba(0,0,0,.05);
    color: #344767;
}
@media (max-width: 991px) {
    .admin-hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #212529 !important;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    line-height: 1.4;
}
.admin-nav-link i {
    font-size: 18px;
    color: #6b7280;
}
.admin-nav-link:hover {
    background-color: #000;
    color: #f1f5f9 !important;
}
.admin-nav-link:hover i {
    color: #cbd5e1 !important;
}
.admin-nav-link.active {
    background-color: #000;
    color: #fff !important;
    font-weight: 700;
}
.admin-nav-link.active i {
    color: #fff !important;
}

/* Admin navbar right side */
.admin-navbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}
.admin-nav-icon-btn {
    border-radius: 0.75rem;
    box-shadow: none !important;
    outline: none !important;
    padding: 4px 3px !important;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.15s ease;
}
.admin-nav-icon-btn:hover {
    background-color: transparent !important;
    box-shadow: none !important;
}
.admin-nav-icon-btn:hover .admin-nav-icon-circle {
    background-color: #fff;
    border-color: #d0d0d0;
    box-shadow: none !important;
}
.admin-nav-icon-btn:hover .admin-nav-icon-circle i {
    color: #6b7280 !important;
}
.admin-nav-icon-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #d0d0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    position: relative;
}
.admin-nav-icon-circle i {
    font-size: 18px;
    color: #6b7280;
    transition: color 0.15s ease;
}
.admin-notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f5365c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
}
.admin-desktop-name {
    color: #212529;
    font-size: 0.9375rem;
    font-weight: 700;
    max-width: 14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
}

/* ===== ADMIN SIDEBAR (kept for mobile) ===== */
.sidenav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 250px;
    max-width: 250px !important;
    background: var(--fx-white);
    box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: all .2s ease-in-out;
    transform: translateX(-100%);
}
.sidenav.open {
    transform: translateX(0);
}
.sidenav-header {
    padding: 1.5rem 1rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--fx-border);
    margin-bottom: 0.5rem;
}
.sidenav-brand { font-weight: 700; font-size: 1.125rem; color: var(--fx-dark); white-space: nowrap; }
.sidenav-body { flex: 1; overflow-y: auto; padding: 0; }
.sidenav-heading {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fx-muted);
    font-weight: 700;
    margin-top: 0.5rem;
}
.sidenav-nav { list-style: none; padding: 0; margin: 0; }
.sidenav-nav-item { margin-top: 0.125rem; }
.sidenav-nav-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.675rem 1rem;
    margin: 0 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--fx-body-color);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
    gap: 0;
}
.sidenav-nav-link i {
    min-width: 1.8rem;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    text-align: center;
    color: var(--fx-body-color);
}
.sidenav-nav-link:hover { background-color: rgba(0,0,0,.05); color: var(--fx-dark); }
.sidenav-nav-link.active {
    background-color: #f6f9fc;
    color: var(--fx-dark) !important;
    font-weight: 700;
    box-shadow: none;
}
.sidenav-nav-link.active i { color: var(--fx-dark) !important; }
.sidenav-footer { padding: 0.75rem 0.5rem 1rem; border-top: 1px solid var(--fx-border); }
.sidenav-nav-link.text-danger { color: #f5365c; }
.sidenav-nav-link.text-danger i { color: #f5365c; }
.sidenav-nav-link.text-danger:hover { background-color: rgba(245,54,92,.08); color: #f5365c; }

/* ===== ADMIN MAIN CONTENT (no sidebar) ===== */
.admin-layout__main {
    min-height: 100vh;
    background-color: var(--fx-body-bg);
    transition: all .2s ease-in-out;
}

/* ===== TOPBAR (legacy, hidden for admin) ===== */
.topbar {
    position: fixed;
    top: 0;
    left: 250px;
    right: 0;
    height: 60px;
    background: var(--fx-white) !important;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    z-index: 1020;
    transition: all .2s ease-in-out;
}
.topbar-left { display: flex; align-items: center; gap: 0.5rem; }
.topbar-right { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.topbar .sidenav-toggler {
    width: 36px; height: 36px; border-radius: 0.5rem;
    background: transparent; border: none; display: flex;
    align-items: center; justify-content: center; cursor: pointer;
    color: var(--fx-body-color); font-size: 1.125rem; transition: background-color .15s;
}
.topbar .sidenav-toggler:hover { background-color: rgba(0,0,0,.05); }
.sidenav-toggler-inner { width: 18px; }
.sidenav-toggler-line {
    display: block; height: 2px; background: var(--fx-body-color);
    border-radius: 0.125rem; transition: all .15s ease;
}
.sidenav-toggler-line:not(:last-child) { margin-bottom: 3px; }
.main-content {
    min-height: 100vh;
    background-color: var(--fx-body-bg);
    transition: all .2s ease-in-out;
}
.avatar-circle {
    width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
    background-color: var(--fx-white); border: 1px solid #d0d0d0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 0.875rem; font-weight: 600; color: var(--fx-body-color);
}
.avatar-circle-sm { width: 32px; height: 32px; min-width: 32px; font-size: 0.75rem; }
.user-menu-btn {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.375rem !important; border-radius: 0.5rem;
    transition: background-color .2s ease; white-space: nowrap;
    cursor: pointer; border: none; background: transparent; color: var(--fx-body-color);
}
.user-menu-btn:hover { background-color: rgba(0,0,0,.05); }
.dropdown-crm {
    display: none; position: absolute; right: 0; top: calc(100% + 0.5rem);
    min-width: 220px; background: var(--fx-white);
    border: 1px solid rgba(0,0,0,.15); border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); z-index: 3000; padding: 0.5rem 0;
}
.dropdown-crm.show { display: block; }
.dropdown-crm-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem;
    color: #212529; text-decoration: none; font-size: 0.875rem; font-weight: 400;
    transition: background-color .15s ease;
}
.dropdown-crm-item:hover { background-color: #f8f9fa; color: #212529; }
.dropdown-crm-item.danger { color: #f5365c; }
.dropdown-crm-divider { border-top: 1px solid var(--fx-border); margin: 0.5rem 0; }
.dropdown-crm-header {
    padding: 0.5rem 1rem; border-bottom: 1px solid var(--fx-border);
    font-weight: 700; font-size: 0.875rem; color: var(--fx-dark);
}

/* ===== STAT CARDS (Admin Dashboard) ===== */
.stat-card {
    background: var(--fx-white);
    border: 0;
    border-radius: 12px;
    box-shadow: var(--fx-shadow-card);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--fx-gradient-primary);
    border-radius: 12px 12px 0 0;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fx-shadow-lg);
}
.stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fx-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}
.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--fx-heading);
    line-height: 1.2;
    word-break: break-word;
}
.stat-change {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fx-muted);
    margin-top: 0.25rem;
}
.stat-change a {
    color: var(--fx-primary);
    font-weight: 600;
    text-decoration: none;
}
.stat-change a:hover {
    color: var(--primary-dark);
}

/* ===== ALERT VARIANTS ===== */
.alert-warning-crm {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: .5rem;
    font-size: .875rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}
.alert-info-crm {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
    border-radius: .5rem;
    font-size: .875rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .page-content { padding: 1rem 0.75rem; }
    .top-section .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
    .time-bar .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
    .admin-nav-menu { padding: 8px 12px; }
    .icon-nav-list > li > a { padding: 0 10px; font-size: 0.75rem; }
    .sidenav { transform: translateX(-100%); }
    .sidenav.open { transform: translateX(0); }

    /* Admin horizontal navbar responsive */
    .admin-layout-wrapper .admin-top-section { padding: 10px 12px 0; }
    .admin-navbar-section { padding: 6px 12px 0; }
    .admin-navbar { padding: 6px 10px; border-radius: 14px; }
    .admin-nav-link { padding: 5px 8px; font-size: 0.75rem; }
    .admin-nav-link span { display: none; }
    .admin-nav-link i { font-size: 18px; }
    .admin-desktop-name { display: none; }

    /* Responsive tables - enable horizontal scroll on small screens */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-crm { min-width: 600px; }

    /* Dashboard cards stack */
    .dashboard-card .buttons-row { gap: 24px; }

    /* Reduce gutters on tablet */
    .row.g-4 { --bs-gutter-x: 1.25rem; }
}

@media (max-width: 767px) {
    .time-bar-section { display: none; }
    .top-section { padding: 10px 0 6px; }
    .top-section .container-fluid > .d-flex { flex-wrap: nowrap; gap: 8px; align-items: center }
    .top-section .logo-container { flex-shrink: 1; min-width: 0 }
    .top-section .logo-container .company-logo { height: 56px; max-width: 180px; width: auto }
    .top-section .button-group { flex-shrink: 0; gap: 8px }
    .top-section .wallet-display { padding: 7px 11px; gap: 6px }
    .top-section .balance-text { font-size: 0.8125rem }
    .top-section .wallet-deposit-btn { font-size: 0.75rem; padding: 0.4rem 0.85rem }
    .brand-logo-img { height: 30px; }
    .brand-arabic-text { font-size: 10px; }
    .wallet-display { padding: 6px 10px; }
    .balance-text { font-size: 0.8125rem; }
    .deposit-button { padding: 8px 16px; font-size: 0.8125rem; }
    .mobile-nav-bar { margin: 0 10px 10px; padding: 10px 12px; }
    .nav-circle-btn { width: 36px; height: 36px; }
    .user-name-dropdown .user-name-text { font-size: 0.8125rem; }
    .navbar-section { padding: 0 0 8px; }
    .admin-nav-menu { border-radius: 14px; padding: 6px 10px; }
    .icon-nav-list > li > a { padding: 0 8px; font-size: 0.7rem; height: 36px; }

    /* Admin mobile navbar */
    .admin-layout-wrapper .admin-top-section { padding: 8px 10px 0; }
    .admin-navbar-section { padding: 5px 10px 0; }
    .admin-navbar { padding: 5px 8px; border-radius: 12px; min-height: 38px; }
    .admin-nav-link { padding: 4px 6px; font-size: 0; gap: 0; }
    .admin-nav-link span { display: none; }
    .admin-nav-link i { font-size: 18px; }
    .admin-nav-icon-circle { width: 32px; height: 32px; }
    .admin-nav-icon-circle i { font-size: 16px; }
    .admin-desktop-name { display: none; }

    /* ===== GENERAL MOBILE ===== */
    .top-section .button-group { gap: 8px; }
    .top-section .logo-container a { flex-direction: row; align-items: center; }
    .brand-logo-img { max-width: 140px; }

    /* Dashboard specific */
    .balance-amount { font-size: 28px; letter-spacing: -1px; }
    .balance-currency { font-size: 18px; }
    .buttons-row { gap: 24px; }
    .action-icon-circle { width: 48px; height: 48px; }
    .action-icon-circle svg { width: 18px; height: 18px; }
    .action-text { font-size: 12px; }

    /* Page header - centered on mobile */
    .page-header { flex-direction: column; align-items: center; text-align: center; }
    .page-header h1 { text-align: center; }
    .page-header p { text-align: center; }

    /* Stat cards - centered content on mobile */
    .stat-card { text-align: center; align-items: center; padding: 1rem; }
    .stat-card .stat-icon { margin-left: auto; margin-right: auto; width: 42px; height: 42px; font-size: 1.1rem; margin-bottom: 0.5rem; }
    .stat-card .stat-value { font-size: 1.25rem; }
    .stat-card .stat-label { font-size: 0.7rem; }
    .stat-card .stat-change { text-align: center; font-size: 0.7rem; }

    /* Pending actions bar - centered */
    .pending-actions-bar { justify-content: center; text-align: center; }
    .pending-actions-bar .pending-pills { justify-content: center; }

    /* Period filter buttons - centered */
    .period-filter-row { justify-content: center !important; }

    /* Card headers - centered stacked on mobile */
    .card-header-crm { justify-content: center; flex-direction: column; text-align: center; gap: 4px; }
    .card-header-crm h6 { text-align: center; }
    .card-header-crm a { text-align: center; }

    /* Quick actions - centered wrap */
    .quick-actions-wrap { justify-content: center; }

    /* New clients rows - centered */
    .client-row { justify-content: center; text-align: center; }
    .client-row .client-info { text-align: center; }

    /* Admin page header with buttons - centered */
    .page-header.d-flex { align-items: center; justify-content: center; }
    .page-header .page-header-actions { justify-content: center; width: 100%; }
    .page-header h1 { font-size: 1.25rem; }

    /* Table responsiveness */
    .table-crm { min-width: 600px; }

    /* Wallet nav */
    .wallet-nav-mobile { margin-bottom: 16px; padding: 6px; gap: 6px; }
    .wallet-nav-item { padding: 8px 12px; font-size: 13px; }

    /* Modal full-width on mobile */
    .modal-wrapper-crm { padding: 16px 12px; align-items: flex-end; }
    .modal-dialog-crm { max-width: 100% !important; border-radius: 16px 16px 0 0; margin: 0; }
    .modal-body-crm { padding: 20px 16px; }
    .modal-header-crm { padding: 16px 20px; }
    .modal-footer-crm { padding: 12px 16px 20px; }

    /* KYC page - doc type cards stack */
    .doc-type-card { min-width: calc(50% - 8px) !important; flex: 1 1 calc(50% - 8px); max-width: calc(50% - 8px); }
    .upload-box { padding: 24px 12px; }
    .upload-box-large { padding: 32px 16px; }

    /* Trading page */
    .leverage-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .account-features-box { padding: 12px 14px; }

    /* Transfer type cards */
    .transfer-type-card { padding: 12px; }

    /* Tickets page */
    .ticket-tabs .nav-link { font-size: 13px; padding: 8px 12px; }
    .msg-bubble { max-width: 100%; }
    .msg-thread { max-height: 300px; }
    .msg-content { padding: 10px 14px; font-size: 13px; }

    /* Profile page */
    .avatar-crm { width: 60px; height: 60px; font-size: 20px; }

    /* Card spacing */
    .card .card-body { padding: 16px; }
    .card .card-header { padding: 16px; }
    .card-body-crm { padding: 0.5rem 1rem 1rem; }
    .card-header-crm { padding: 1rem 1rem 0.5rem; }

    /* Stat cards */
    .stat-card { padding: 1rem; }
    .stat-value { font-size: 1.25rem; }
    .stat-icon { width: 40px; height: 40px; font-size: 1.1rem; margin-bottom: 0.5rem; }

    /* Reduce gutters */
    .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }

    /* Buttons */
    .btn-primary-crm, .btn-secondary-crm { padding: 0.5rem 1rem; font-size: 0.8125rem; }
    .btn-add-deposit, .btn-add-withdrawal { padding: 8px 14px; font-size: 13px; }

    /* Tickets page mobile responsive */
    .desktop-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 0.5rem !important }
    .desktop-tabs::-webkit-scrollbar { display: none }
    .desktop-tabs .nav-link { white-space: nowrap; padding: 0.6rem 0.75rem; font-size: 0.8125rem }
    .desktop-tabs .nav-link i { font-size: 13px }

    /* Ticket list table - card style on mobile */
    .dashboard-card .table { min-width: 0 }
    .dashboard-card .table thead { display: none }
    .dashboard-card .table tbody tr { display: block; padding: 12px; border-bottom: 8px solid var(--fx-body-bg); background: #fff; margin-bottom: 4px; border-radius: 8px }
    .dashboard-card .table tbody td { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border: none; text-align: right; font-size: 0.8125rem; gap: 8px }
    .dashboard-card .table tbody td::before { content: attr(data-label); font-weight: 700; color: var(--fx-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; flex-shrink: 0 }
    .dashboard-card .table tbody td:first-child::before { content: '' }
    .dashboard-card .table tbody td:first-child { padding-top: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--fx-border); margin-bottom: 4px; display: block; text-align: left }
    .dashboard-card .table tbody td:last-child { padding-top: 8px; border-top: 1px solid var(--fx-border); margin-top: 4px; display: block; text-align: center }
    .dashboard-card .table tbody td:has(code) { display: block; padding: 0 0 8px; border-bottom: 1px solid var(--fx-border); margin-bottom: 6px }

    /* Ticket detail view */
    .msg-thread { max-height: 400px; }
    .msg-bubble { max-width: 100% }
    .msg-avatar { width: 36px; height: 36px; font-size: 12px }
    .msg-content { padding: 12px 14px; font-size: 0.875rem }
    .msg-meta { font-size: 0.75rem }
    .ticket-detail-header { flex-direction: column; align-items: flex-start !important; gap: 12px }
    .ticket-detail-header .text-end { text-align: left !important; width: 100% }
    .ticket-detail-header .d-flex.flex-wrap { flex-direction: column; align-items: flex-start; gap: 6px }
    .detail-row { font-size: 0.8125rem; padding: 10px 0 }

    /* Ticket modal mobile */
    .modal-wrapper-crm { padding: 12px !important; align-items: flex-end !important }
    .modal-dialog-crm { border-radius: 16px 16px 0 0 !important; max-width: 100% !important; margin: 0 !important; max-height: 90vh; overflow-y: auto }
    .modal-header-crm { padding: 16px 18px !important; border-radius: 16px 16px 0 0 !important }
    .modal-body-crm { padding: 18px !important }
    .modal-footer-crm { padding: 14px 18px 20px !important; flex-direction: column-reverse; gap: 8px }
    .modal-footer-crm button { width: 100% }
    .modal-title-crm { font-size: 1.0625rem !important }

    /* Page header (older .page-header) for tickets */
    .page-header { flex-direction: column; align-items: stretch; gap: 12px; text-align: left }
    .page-header h1 { font-size: 1.25rem; text-align: left }
    .page-header p { text-align: left; font-size: 0.875rem }
    .page-header > .d-flex { width: 100% }
    .page-header > .d-flex button { width: 100%; justify-content: center }

    /* Filters */
    .btn-apply-filters { padding: 8px 16px; }

    /* Page hero: stack vertically on mobile so buttons don't overlap title */
    .crm-page-hero, .page-hero { flex-direction: column; align-items: flex-start; padding: 8px 10px; min-height: 0; gap: 8px; max-width: 100%; margin-bottom: 12px }
    .crm-page-hero .page-hero__left, .page-hero__left { width: 100%; min-width: 0; max-width: 100% }
    .crm-page-hero .page-hero__right, .page-hero__right { width: 100%; flex-wrap: wrap }
    .crm-page-hero .page-hero__right .btn-primary-crm,
    .crm-page-hero .page-hero__right .btn-secondary-crm,
    .page-hero__right .btn-primary-crm,
    .page-hero__right .btn-secondary-crm { flex: 1 1 auto; min-width: 0; text-align: center; padding: 10px 14px; font-size: 0.8125rem }
    .crm-page-hero .page-hero__title, .page-hero__title { font-size: 1.25rem !important; word-break: break-word }
    .crm-page-hero .page-hero__subtitle, .page-hero__subtitle { font-size: 0.875rem; word-break: break-word }

    /* Dashboard stat cards - shrink big numbers on mobile */
    .dashboard-card .card-body > .d-flex { gap: 12px }
    .dashboard-card [style*="font-size:1.875rem"] { font-size: 1.5rem !important }
    .dashboard-card [style*="padding:1.5rem 1.75rem"] { padding: 1rem !important }

    /* KYC banner - stack on mobile */
    .kyc-banner .card-body { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; padding: 1.25rem !important }
    .kyc-banner .card-body > a { width: 100%; text-align: center }

    /* Dashboard card header - stack title above button on mobile */
    .dashboard-card .card-header { flex-direction: column; align-items: stretch; gap: 10px }
    .dashboard-card .card-header > a { width: 100%; text-align: center; justify-content: center; display: inline-flex; align-items: center }
    .dashboard-card .card-title { font-size: 18px !important; word-break: break-word }

    /* Hide page hero icon on client dashboard in mobile */
    .crm-page-hero .page-hero__icon, .page-hero__icon { display: none }

    /* Ensure no element overflows the viewport on mobile */
    .user-layout .page-content,
    .user-layout .container-fluid,
    .user-layout .row,
    .user-layout [class*="col-"],
    .user-layout .dashboard-card,
    .user-layout .crm-page-hero,
    .user-layout .page-hero { min-width: 0; max-width: 100% }
    .user-layout .row { margin-left: 0; margin-right: 0 }

    /* Wallet popup */
    .wallet-popup { min-width: 200px; }

    /* Info popups */
    .information-tools-popup { min-width: 180px; }

    /* Balance row */
    .balance-row .wallet-display { padding: 10px 14px; }

    /* Page content */
    .page-content { padding: 0.75rem 0.5rem; }

    /* Remove outer spaces on client dashboard in mobile */
    .user-layout .page-content { padding: 0; }
    .user-layout .container-fluid.py-4 { padding: 0.5rem 0.5rem; }

    /* Notifications page */
    .card-body > div[style*="padding:16px 20px"] { padding: 12px 14px !important; }
    .card-body > div[style*="padding:12px 20px"] { padding: 10px 14px !important; }
}

@media (max-width: 575px) {
    /* Extra small devices */
    .page-content { padding: 0.5rem 0.375rem; }

    /* Container padding reduction */
    .container-fluid.px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

    /* Remove outer spaces on client dashboard in mobile */
    .user-layout .page-content { padding: 0; }
    .user-layout .container-fluid.py-4 { padding: 0.5rem 0.5rem; }
    .py-4.container-fluid { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

    /* Very small - single column */
    .wallet-nav-item { padding: 6px 10px; font-size: 12px; }
    .wallet-nav-arrow { width: 32px; height: 32px; }

    /* Dashboard */
    .balance-amount { font-size: 22px; }
    .balance-currency { font-size: 16px; }
    .buttons-row { gap: 16px; }
    .action-icon-circle { width: 40px; height: 40px; }
    .action-icon-circle svg { width: 16px; height: 16px; }

    /* Dashboard cards */
    .dashboard-card { padding: 16px; }
    .dashboard-card .card-title { font-size: 18px; }

    /* Stat cards */
    .stat-card { padding: 0.875rem; }
    .stat-value { font-size: 1.125rem; }
    .stat-icon { width: 38px; height: 38px; font-size: 1rem; margin-bottom: 0.375rem; }
    .stat-label { font-size: 0.65rem; }
    .stat-change { font-size: 0.65rem; }

    /* Table cells smaller */
    .table-crm thead th { padding: 0.5rem 0.75rem; font-size: 0.65rem; }
    .table-crm tbody td { padding: 0.5rem 0.75rem; font-size: 0.75rem; }

    .table-card .table thead th { padding: 0.5rem 0.75rem; font-size: 0.65rem; }
    .table-card .table tbody td { padding: 0.5rem 0.75rem; font-size: 0.75rem; }

    /* Trading page */
    .leverage-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
    .leverage-btn { padding: 8px 10px; font-size: 12px; }

    /* KYC */
    .doc-type-card { min-width: 100% !important; flex: 1 1 100%; max-width: 100%; }

    /* Top section further compacted - keep logo + button group in same row */
    .top-section .container-fluid > .d-flex { flex-wrap: nowrap; gap: 8px; align-items: center }
    .top-section .logo-container { flex-shrink: 1; min-width: 0; gap: 8px }
    .top-section .logo-container .company-logo { height: 50px; max-width: 160px; width: auto }
    .top-section .button-group { flex-shrink: 0; gap: 6px; justify-content: flex-end }
    .top-section .balance-toolbar { gap: 6px }
    .top-section .wallet-display { padding: 6px 10px; gap: 6px; font-size: 0.75rem }
    .top-section .wallet-icon-wrapper { font-size: 14px }
    .top-section .balance-text { font-size: 0.8125rem; font-weight: 600 }
    .top-section .wallet-deposit-btn { font-size: 0.75rem; padding: 0.4rem 0.75rem; white-space: nowrap }
    .brand-logo-img { height: 26px; }

    /* Mobile navbar */
    .mobile-nav-bar { margin: 0 6px 8px; padding: 8px 10px; }
    .user-name-dropdown { padding: 6px 8px; }
    .user-name-dropdown .user-name-text { font-size: 0.75rem; }

    /* Deposit / Withdraw buttons on mobile */
    .d-flex.justify-content-between.align-items-center.mb-4 { flex-direction: column; align-items: flex-start !important; gap: 12px; }
    .d-flex.justify-content-between.align-items-center.mb-4 .btn-add-deposit,
    .d-flex.justify-content-between.align-items-center.mb-4 .btn-add-withdrawal { width: 100%; justify-content: center; }

    /* Modals */
    .modal-wrapper-crm { padding: 0; align-items: flex-end; }
    .modal-dialog-crm { border-radius: 0; max-height: 90vh; }

    /* Internal transfer */
    .transfer-type-card { padding: 10px; }

    /* Form label */
    .form-label { font-size: 0.7rem; }

    /* Ticket tabs */
    .ticket-tabs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .ticket-tabs .nav-link { padding: 8px 10px; font-size: 12px; }

    /* News feed */
    .news-item { padding: 10px 12px; gap: 8px; }

    /* Filters row */
    form.row.g-3 .col-md-4 { width: 100%; }
    .btn-apply-filters { width: 100%; }

    /* KYC upload sections */
    .row.g-4 .col-lg-8 { width: 100%; }
    .row.g-4 .col-lg-4 { width: 100%; }
    .status-card-crm { padding: 16px; }

    /* Profile */
    .col-lg-4, .col-lg-8 { width: 100%; }
    .col-md-3.mb-3, .col-md-4.mb-3, .col-md-5.mb-3, .col-md-6.mb-3 { width: 100%; }

    /* Minimal gutters */
    .row.g-4 { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }

    /* TradingView widgets height reduction */
    .tradingview-widget-container { height: 280px !important; }
    .tradingview-widget-container > div { height: 280px !important; }

    /* Platform download cards */
    .card-body[style*="padding:60px 40px"],
    .card-body[style*="padding:50px 30px"] { padding: 32px 20px !important; }
    .card-body[style*="padding:60px 40px"] h3,
    .card-body[style*="padding:50px 30px"] h4 { font-size: 18px; }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fx-input-border); border-radius: 4px; }

/* ============================================================
   NEW ADMIN HEADER DESIGN (Reference: fortradedifc.ae)
   100% exact replication of header styles
   ============================================================ */
.admin-layout {
    background-color: #f3f3f3;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.admin-layout__main {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    flex: 1;
    background-color: #f3f3f3;
}

/* Header wrapper & top section */
.admin-layout .header-wrapper {
    width: 100%;
}
.admin-layout .top-section {
    align-items: flex-start;
    background-color: #f3f3f3;
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    position: relative;
}
.admin-layout .company-logo {
    height: 90px;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto;
}
.admin-layout .navbar-section {
    background-color: #f3f3f3;
    box-sizing: border-box;
    overflow: visible;
    padding: .35rem 24px .5rem;
    width: 100%;
}

/* Navbar (white card) */
.admin-layout .navbar-main {
    border-radius: .75rem;
    position: relative;
    z-index: 1;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border: 1px solid #e9ecef;
}
.admin-layout .navbar-compact {
    min-height: 42px;
}
.admin-layout .admin-navbar-inner {
    padding: .25rem .5rem;
}
.admin-layout .navbar-nav.flex-row {
    flex-direction: row !important;
}
.admin-layout .nav-link {
    cursor: pointer;
}

/* Desktop username */
.admin-layout .admin-navbar-desktop-name {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    max-width: 14rem;
}
.admin-layout .admin-navbar-desktop-name-wrap {
    max-width: min(14rem,24vw);
    padding-left: .35rem;
    flex-shrink: 1;
    min-width: 0;
}

/* Icon items */
.admin-layout .admin-icon-item {
    margin-left: 0;
}
.admin-layout .admin-nav-icon-btn {
    border-radius: .75rem;
    box-shadow: none !important;
    outline: none !important;
    padding: .35rem .3rem !important;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #212529;
    text-decoration: none;
    transition: none;
}
.admin-layout .admin-nav-icon-btn:hover,
.admin-layout .admin-nav-icon-btn:focus,
.admin-layout .admin-nav-icon-btn:active,
.admin-layout .admin-nav-icon-btn:focus-visible {
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    opacity: 1 !important;
}
.admin-layout .admin-nav-icon-btn:hover .admin-nav-icon-circle,
.admin-layout .admin-nav-icon-btn:focus .admin-nav-icon-circle,
.admin-layout .admin-nav-icon-btn:active .admin-nav-icon-circle,
.admin-layout .admin-nav-icon-btn:focus-visible .admin-nav-icon-circle {
    background-color: #fff;
    border-color: #d0d0d0;
    box-shadow: none !important;
}
.admin-layout .admin-nav-icon-btn:hover .admin-nav-icon-circle i,
.admin-layout .admin-nav-icon-btn:focus .admin-nav-icon-circle i,
.admin-layout .admin-nav-icon-btn:active .admin-nav-icon-circle i,
.admin-layout .admin-nav-icon-btn:focus-visible .admin-nav-icon-circle i {
    color: #6b7280 !important;
}
.admin-layout .admin-nav-icon-wrapper {
    align-items: center;
    display: flex;
    position: relative;
}

/* Icon circle (bell, user) */
.admin-layout .admin-nav-icon-circle {
    align-items: center;
    background-color: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 50%;
    box-shadow: none !important;
    display: flex;
    filter: none !important;
    flex-shrink: 0;
    height: clamp(34px, 4vw + 24px, 42px);
    justify-content: center;
    min-width: clamp(34px, 4vw + 24px, 42px);
    width: clamp(34px, 4vw + 24px, 42px);
    transition: none;
    position: relative;
}
.admin-layout .admin-nav-icon-circle i {
    color: #6b7280;
    font-size: clamp(1rem, 1.2vw + .5rem, 1.25rem) !important;
    transition: none;
}

/* Notification badge */
.admin-layout .admin-notification-badge {
    align-items: center;
    display: inline-flex;
    font-size: .7rem;
    font-weight: 700;
    height: 1.25rem;
    justify-content: center;
    line-height: 1;
    min-width: 1.25rem;
    padding: .2rem .35rem;
    position: absolute;
    top: 0;
    right: 0;
    background: #f5365c;
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
}

/* Nav menu (left side links) */
.admin-layout .admin-nav-menu {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}
.admin-layout .admin-nav-menu .navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    gap: .125rem;
    justify-content: flex-start;
}
.admin-layout .admin-nav-menu .nav-item {
    display: flex;
    align-items: center;
}
.admin-layout .admin-nav-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: .5rem;
    color: #212529 !important;
    padding: .35rem .45rem !important;
    transition: all .2s ease;
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    line-height: 1.4;
}
.admin-layout .admin-navbar-bg .admin-nav-menu .nav-link i,
.admin-layout .admin-nav-menu .nav-link i {
    color: #6b7280 !important;
    font-size: 18px;
    transition: color .2s ease;
}
.admin-layout .admin-nav-menu .nav-link:hover,
.admin-layout .admin-nav-menu .nav-link:focus {
    background-color: #000;
    color: #f1f5f9 !important;
}
.admin-layout .admin-nav-menu .nav-link:hover i,
.admin-layout .admin-nav-menu .nav-link:focus i {
    color: #cbd5e1 !important;
}
.admin-layout .admin-nav-menu .nav-link.active {
    background-color: #000;
    color: #f1f5f9 !important;
    font-weight: 700;
}
.admin-layout .admin-nav-menu .nav-link.active i {
    color: #f1f5f9 !important;
}
.admin-layout .admin-nav-menu .nav-link.active:hover {
    background-color: #000;
}

/* Dropdowns (bell + user) */
.admin-layout .dropdown-menu {
    position: absolute;
}
.admin-layout .admin-bell-dropdown,
.admin-layout .admin-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 300px;
    max-width: 360px;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
    border: 1px solid #e9ecef;
    padding: 0;
    z-index: 100;
    display: none;
    max-height: 420px;
    overflow-y: auto;
}
.admin-layout .admin-bell-dropdown.show,
.admin-layout .admin-user-dropdown.show {
    display: block;
}

/* Mobile sidebar */
.admin-layout .mobile-sidebar {
    background-color: #fff;
    box-shadow: 2px 0 10px rgba(0,0,0,.1);
    height: 100vh;
    left: -100%;
    max-width: 85vw;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transition: left .3s ease;
    width: 280px;
    z-index: 1050;
}
.admin-layout .mobile-sidebar.open {
    left: 0;
}
.admin-layout .mobile-sidebar-header {
    align-items: center;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem;
}
.admin-layout .mobile-sidebar-header button {
    color: #212529;
    font-size: 1.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all .15s ease;
}
.admin-layout .mobile-sidebar-header button:hover {
    background-color: #f1f5f9;
    opacity: 0.7;
}
.admin-layout .mobile-sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.admin-layout .mobile-sidebar-item {
    border-bottom: 1px solid #f0f0f0;
}
.admin-layout .mobile-sidebar-link {
    padding: 1rem 1.5rem;
    text-decoration: none;
    transition: all .2s ease;
    color: #212529;
    display: flex;
    align-items: center;
    font-size: .9375rem;
    font-weight: 500;
}
.admin-layout .mobile-sidebar-link i {
    text-align: center;
    width: 24px;
    color: #6b7280;
    font-size: 1.25rem;
}
.admin-layout .mobile-sidebar-link:hover {
    background-color: #000;
    color: #212529;
}
.admin-layout .app-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.admin-layout .app-modal-close__icon {
    width: 24px;
    height: 24px;
}

/* Admin hamburger button (mobile) */
.admin-layout .admin-hamburger-btn {
    display: none;
    background: none;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    color: #6b7280;
    font-size: 22px;
    border-radius: 0.75rem;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.admin-layout .admin-hamburger-btn:hover {
    background-color: rgba(0,0,0,.05);
    color: #344767;
}
@media (max-width: 991px) {
    .admin-layout .admin-hamburger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .admin-layout .admin-nav-menu .nav-link {
        font-size: .875rem;
        padding: .4rem .5rem !important;
    }
    .admin-layout .admin-navbar-desktop-name-wrap {
        display: none !important;
    }
    .admin-layout .navbar-section {
        padding: .35rem 12px .5rem;
    }
    .admin-layout .top-section {
        padding: .75rem 1rem;
    }
}
@media (max-width: 575px) {
    .admin-layout .navbar-nav .nav-item {
        padding-left: 8px;
        padding-right: 8px;
    }
    .admin-layout .navbar-section {
        padding: .25rem 8px .5rem;
    }
    .admin-layout .top-section {
        padding: .5rem .75rem;
    }
}
.admin-layout .page-content {
    padding: 0;
    background: #f3f3f3;
}

/* ============================================================
   DASHBOARD CARDS (Reference replication)
   ============================================================ */
.stats-card-figure {
    font-size: 1.25rem;
    line-height: 1.2;
}
.icon-shape {
    background-position: 50%;
    transition: transform .2s ease;
}
.icon-shape i {
    opacity: .8;
    position: relative;
    top: 14px;
}
.admin-layout .card {
    transition: transform .2s, box-shadow .2s;
    border: 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 22px rgba(15,23,42,.06), 0 0 0 1px rgba(59,130,246,.14), 0 0 24px rgba(59,130,246,.22), 0 0 42px rgba(56,189,248,.12) !important;
}
.admin-layout .card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 24px rgba(96,165,250,.2) !important;
    transform: translateY(-2px);
}
.admin-layout .card.border-green   { border-left: 4px solid rgb(130,214,22) !important; }
.admin-layout .card.border-red     { border-left: 4px solid rgb(234,6,6) !important; }
.admin-layout .card.border-pink    { border-left: 4px solid rgb(203,12,159) !important; }
.admin-layout .card.border-orange  { border-left: 4px solid rgb(255,167,38) !important; }
.admin-layout .card.border-cyan    { border-left: 4px solid rgb(23,193,232) !important; }
.admin-layout .card.border-red2    { border-left: 4px solid rgb(245,57,57) !important; }
.admin-layout .card:hover .icon-shape {
    transform: scale(1.1);
}
.admin-layout .card .card-body {
    padding: 1.5rem;
}
.admin-layout .card .card-header {
    background: transparent;
    border-bottom: 0;
}
.admin-layout .chart-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1rem 0;
}
.admin-layout .chart-title-section {
    flex: 1;
    min-width: 200px;
}
.admin-layout .chart-title-section h6 {
    color: #344767;
    font-size: 1rem;
    font-weight: 700;
}
.admin-layout .chart-title-section p {
    color: #67748e;
    font-size: .875rem;
    margin: 0;
}
.admin-layout .period-selector {
    flex-shrink: 0;
}
.admin-layout .period-selector .btn {
    border-radius: .375rem;
    font-size: .875rem;
    min-width: 45px;
    padding: .375rem .75rem;
}
.admin-layout .period-selector .btn:first-child {
    border-bottom-left-radius: .375rem;
    border-top-left-radius: .375rem;
}
.admin-layout .period-selector .btn:last-child {
    border-bottom-right-radius: .375rem;
    border-top-right-radius: .375rem;
}
.admin-layout .period-selector .btn-primary {
    background-color: #5e72e4;
    border-color: #5e72e4;
    color: #fff;
}
.admin-layout .period-selector .btn-outline-primary {
    background-color: transparent;
    border-color: #5e72e4;
    color: #5e72e4;
}
.admin-layout .period-selector .btn-outline-primary:hover {
    background-color: #5e72e4;
    color: #fff;
}
@media (max-width: 768px) {
    .admin-layout .chart-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .admin-layout .chart-title-section {
        margin-bottom: .5rem;
        width: 100%;
    }
    .admin-layout .period-selector {
        display: flex;
        width: 100%;
    }
    .admin-layout .period-selector .period-btn {
        flex: 1;
        font-size: .75rem;
        padding: .25rem .5rem;
    }
    .admin-layout .col-lg-6 {
        margin-bottom: 1.5rem;
    }
}
@media (max-width: 576px) {
    .admin-layout .period-selector .period-btn {
        font-size: .7rem;
        min-width: 40px;
        padding: .2rem .4rem;
    }
    .admin-layout .chart-title-section h6 {
        font-size: .9rem;
    }
    .admin-layout .chart-title-section p {
        font-size: .75rem;
    }
}

/* ============================================================
   APP FOOTER (Reference replication)
   ============================================================ */
.admin-layout .app-footer {
    background: #fff;
    border-radius: .75rem;
    box-sizing: border-box;
    margin: auto 24px 8px;
    padding: 12px 24px;
}
.admin-layout .app-footer__inner {
    color: #67748e;
    flex-direction: column;
    font-size: .875rem;
    gap: 6px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-layout .app-footer__main {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.admin-layout .app-footer__brand {
    color: #344767;
    font-weight: 700;
}
.admin-layout .app-footer__copy {
    color: #67748e;
}
.admin-layout .app-footer__sep {
    color: #67748e;
    font-size: .875rem;
}
.admin-layout .app-footer__logo {
    flex-shrink: 0;
    max-height: 28px;
    max-width: 140px;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto;
}
.admin-layout .app-footer__credit {
    color: #64748b;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.2;
    margin: 0;
}
.admin-layout .app-footer__credit-link {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}
.admin-layout .app-footer__credit-link:hover {
    text-decoration: underline;
}

/* ============================================================
   CLIENTS PAGE (Reference replication)
   ============================================================ */
.admin-layout .clients-page {
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
}
.admin-layout .clients-main-card {
    overflow: hidden;
}
.admin-layout .clients-page__header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(52,71,103,.12);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
}
.admin-layout .clients-page__title {
    align-items: center;
    color: #344767;
    display: flex;
    gap: .75rem;
    letter-spacing: -.02em;
    font-size: 1.25rem !important;
}
.admin-layout .clients-page__title-icon {
    align-items: center;
    background: linear-gradient(135deg,#5e72e4,#825ee4);
    border-radius: .75rem;
    box-shadow: 0 4px 14px rgba(94,114,228,.35);
    color: #fff;
    display: inline-flex;
    font-size: 1rem;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}
.admin-layout .clients-page__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.admin-layout .clients-page__stat {
    align-items: center;
    background: rgba(94,114,228,.1);
    border: 1px solid rgba(94,114,228,.22);
    border-radius: 999px;
    color: #5e72e4;
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 600;
    padding: .4rem .9rem;
    white-space: nowrap;
}
.admin-layout .clients-page__stat-label {
    font-weight: 500;
    margin-left: .2rem;
    opacity: .92;
}
.admin-layout .clients-page__email-btn {
    background: linear-gradient(310deg, #17adcc 0%, #0e7490 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(23,173,204,.25);
    transition: all .2s ease;
}
.admin-layout .clients-page__email-btn:hover {
    box-shadow: 0 4px 12px rgba(23,173,204,.4);
    transform: translateY(-1px);
}
.admin-layout .clients-toolbar {
    --clients-toolbar-ctrl-h: 3rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
    .admin-layout .clients-toolbar {
        align-items: end;
        grid-template-columns: minmax(200px,280px) minmax(0,1fr);
    }
}
.admin-layout .clients-toolbar__label {
    color: #64748b;
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}
.admin-layout .clients-toolbar__select {
    box-sizing: border-box;
    font-size: .95rem;
    height: var(--clients-toolbar-ctrl-h);
    line-height: 1.45;
    min-height: var(--clients-toolbar-ctrl-h);
    padding: 0 2.25rem 0 .875rem;
    border: 1px solid #cbd5e1 !important;
    border-radius: .75rem !important;
    background-color: #fff !important;
}
.admin-layout .clients-toolbar__select:focus {
    border-color: #5e72e4 !important;
    box-shadow: 0 0 0 .2rem rgba(94,114,228,.15) !important;
}
.admin-layout .search-input-group {
    align-items: stretch;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
    box-sizing: border-box;
    display: flex;
    height: var(--clients-toolbar-ctrl-h);
    min-height: var(--clients-toolbar-ctrl-h);
    overflow: hidden;
    transition: all .3s ease;
    border: 1px solid #cbd5e1 !important;
    border-radius: .75rem !important;
    background-color: #fff !important;
}
.admin-layout .search-input-group:focus-within {
    border-color: #5e72e4 !important;
    box-shadow: 0 4px 8px rgba(94,114,228,.15);
    transform: translateY(-1px);
}
.admin-layout .search-icon-wrapper {
    align-items: center !important;
    background-color: #f8f9fa !important;
    border: none !important;
    border-right: 1px solid #dee2e6 !important;
    display: flex !important;
    flex-shrink: 0;
    justify-content: center !important;
    min-width: 2.75rem;
    padding: 0 1rem !important;
}
.admin-layout .search-input-group:focus-within .search-icon-wrapper {
    border-right-color: #5e72e4 !important;
}
.admin-layout .search-input-field {
    background-color: #fff;
    flex: 1 1 auto;
    font-size: .95rem;
    line-height: 1.45;
    min-width: 0;
    padding: .5rem 1rem !important;
    border: none !important;
    box-shadow: none !important;
}
.admin-layout .search-input-field::placeholder {
    color: #adb5bd;
}
.admin-layout .clients-cell-email {
    display: inline-block;
    max-width: 260px;
}
@media (min-width: 1200px) {
    .admin-layout .clients-cell-email {
        max-width: 320px;
    }
}
.admin-layout .clients-kyc-badge {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .35em .65em;
}
.admin-layout .clients-kyc-cell {
    min-width: 140px;
}
.admin-layout .clients-referred-by-link:hover {
    text-decoration: underline;
}
.admin-layout .clients-table-card {
    animation: none !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.06) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
    border-radius: .75rem !important;
    overflow: hidden;
}
.admin-layout .clients-table-card:hover {
    border-color: rgba(0,0,0,.12) !important;
    box-shadow: 0 .35rem 1rem rgba(0,0,0,.08) !important;
}
.admin-layout .clients-table-card .table thead th {
    border-bottom-width: 1px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.admin-layout .clients-table-card .table tbody td {
    vertical-align: middle;
}
.admin-layout .clients-table-card .table {
    background: #fff !important;
    border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.admin-layout .clients-table-card .table thead,
.admin-layout .clients-table-card .table thead.table-light {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}
.admin-layout .clients-table-card .table thead th {
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
.admin-layout .clients-table-card .table tbody {
    background: #fff !important;
}
.admin-layout .clients-table-card .table tbody tr:nth-child(2n) {
    background-color: #f1f5f9 !important;
}
.admin-layout .clients-table-card .table tbody tr:hover {
    background-color: #e8ecf1 !important;
}
.admin-layout .clients-table-card .table tbody td {
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}
.admin-layout .btn.bg-gradient-dark {
    background-color: var(--color_dark,#000) !important;
    background-image: none !important;
    border-color: var(--color_dark,#000) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.1);
    color: #fff !important;
    transition: all .2s ease;
}
.admin-layout .btn.bg-gradient-dark:hover {
    background-color: var(--color_dark,#1a1a2e) !important;
    border-color: var(--color_dark,#1a1a2e) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transform: translateY(-1px);
}
.admin-layout .btn.bg-gradient-info {
    background: var(--grad_info,linear-gradient(310deg,#17adcc 0%,#0e7490 100%)) !important;
    color: #fff !important;
    border: none !important;
}
.admin-layout .btn.bg-gradient-success {
    background: var(--grad_success,linear-gradient(310deg,#10b981 0%,#059669 100%)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(16,185,129,.25);
}
.admin-layout .btn.bg-gradient-primary {
    background: var(--grad_primary,linear-gradient(310deg,#5e72e4 0%,#825ee4 100%)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(94,114,228,.25);
}
.admin-layout .btn.bg-gradient-warning {
    background: var(--grad_warning,linear-gradient(310deg,#fb6340 0%,#f5365c 100%)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(251,99,64,.25);
}
.admin-layout .btn.bg-gradient-danger {
    background: var(--grad_danger,linear-gradient(310deg,#f5365c 0%,#dc2626 100%)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(245,54,92,.25);
}
.admin-layout .btn.bg-gradient-info:hover,
.admin-layout .btn.bg-gradient-success:hover,
.admin-layout .btn.bg-gradient-primary:hover,
.admin-layout .btn.bg-gradient-warning:hover,
.admin-layout .btn.bg-gradient-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    filter: brightness(1.05);
}
.admin-layout .btn.bg-gradient-info i,
.admin-layout .btn.bg-gradient-success i,
.admin-layout .btn.bg-gradient-primary i,
.admin-layout .btn.bg-gradient-warning i,
.admin-layout .btn.bg-gradient-danger i {
    background: transparent !important;
    color: inherit !important;
}

/* ============================================================
   CLIENT PROFILE PAGE (cp-* Reference replication)
   ============================================================ */
.admin-layout .cp-shell {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1320px;
    min-width: 0;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
}
.admin-layout .cp-nav {
    margin-bottom: 1.25rem;
}
.admin-layout .cp-page-intro {
    margin-bottom: .25rem;
}
.admin-layout .cp {
    --cp-r: .75rem;
    --cp-r-sm: 10px;
    --cp-r-xs: 6px;
    --cp-section-r: .75rem;
    --cp-ease: .25s cubic-bezier(.4,0,.2,1);
    --cp-blue: #3b82f6;
    --cp-blue-s: rgba(59,130,246,.12);
    --cp-cyan: #06b6d4;
    --cp-cyan-s: rgba(6,182,212,.1);
    --cp-green: #10b981;
    --cp-green-s: rgba(16,185,129,.1);
    --cp-red: #ef4444;
    --cp-red-s: rgba(239,68,68,.1);
    --cp-amber: #f59e0b;
    --cp-amber-s: rgba(245,158,11,.1);
    --cp-violet: #8b5cf6;
    --cp-violet-s: rgba(139,92,246,.1);
    --cp-bg: #f8fafc;
    --cp-card: #fff;
    --cp-elevated: #f1f5f9;
    --cp-input: #fff;
    --cp-border: rgba(15,23,42,.08);
    --cp-text: #0f172a;
    --cp-text-2: #475569;
    --cp-text-3: #64748b;
    --cp-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 22px rgba(15,23,42,.06), 0 0 0 1px rgba(59,130,246,.14), 0 0 24px rgba(59,130,246,.22), 0 0 42px rgba(56,189,248,.12)
    --cp-ghost-bg: rgba(15,23,42,.05);
    color: var(--cp-text);
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}
.admin-layout .cp-container {
    margin: 0;
    max-width: none;
    min-width: 0;
    padding: 12px 0 16px;
    width: 100%;
}
.admin-layout .cp-hero-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1rem;
}
.admin-layout .cp-card {
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-r);
    box-shadow: var(--cp-shadow);
    overflow: hidden;
    transition: box-shadow var(--cp-ease);
}
.admin-layout .cp-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 24px rgba(96,165,250,.2) !important;
}
.admin-layout .cp-card__top {
    align-items: flex-start;
    background: linear-gradient(145deg,rgba(59,130,246,.07),rgba(139,92,246,.04) 45%,transparent);
    border-bottom: 1px solid var(--cp-border);
    display: flex;
    gap: 20px;
    padding: 28px;
}
.admin-layout .cp-avatar {
    align-items: center;
    background: linear-gradient(135deg,var(--cp-blue),var(--cp-violet));
    border-radius: .75rem;
    box-shadow: 0 4px 20px rgba(59,130,246,.35), 0 0 0 3px rgba(59,130,246,.12);
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 1.2rem;
    font-weight: 800;
    height: 68px;
    justify-content: center;
    letter-spacing: .02em;
    width: 68px;
}
.admin-layout .cp-client-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0 0 4px;
    color: var(--cp-text);
}
.admin-layout .cp-client-id {
    color: var(--cp-text-3);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: .75rem;
}
.admin-layout .cp-client-email {
    align-items: center;
    color: var(--cp-cyan);
    display: flex;
    font-size: .82rem;
    gap: 8px;
    margin-top: 4px;
}
.admin-layout .cp-copy-chip {
    background: var(--cp-cyan-s);
    border: none;
    border-radius: 4px;
    color: var(--cp-cyan);
    cursor: pointer;
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 8px;
    transition: all .15s;
}
.admin-layout .cp-copy-chip:hover {
    background: rgba(6,182,212,.2);
}
.admin-layout .cp-summary-details {
    padding: 4px 0 0;
}
.admin-layout .cp-summary-details__head {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 16px 20px 10px;
}
.admin-layout .cp-summary-details__head-icon {
    align-items: center;
    background: var(--cp-blue-s);
    border-radius: 10px;
    color: var(--cp-blue);
    display: flex;
    flex-shrink: 0;
    font-size: .85rem;
    height: 32px;
    justify-content: center;
    width: 32px;
}
.admin-layout .cp-summary-details__head-title {
    color: var(--cp-text-3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.admin-layout .cp-info-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2,minmax(0,1fr));
    padding: 0 20px 18px;
}
.admin-layout .cp-info-cell {
    background: var(--cp-elevated);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.admin-layout .cp-info-cell:hover {
    border-color: rgba(59,130,246,.28);
    box-shadow: 0 0 0 1px rgba(59,130,246,.12);
}
.admin-layout .cp-info-cell__label {
    align-items: center;
    color: var(--cp-text-3);
    display: flex;
    font-size: .62rem;
    font-weight: 700;
    gap: 7px;
    letter-spacing: .1em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.admin-layout .cp-info-cell__label i {
    color: var(--cp-text-2);
    opacity: .85;
}
.admin-layout .cp-info-cell__value {
    color: var(--cp-text);
    font-size: .9rem;
    font-weight: 650;
    letter-spacing: -.01em;
    line-height: 1.35;
    word-break: break-word;
}
.admin-layout .cp-info-cell__value--small {
    color: var(--cp-text-2);
    font-size: .8rem;
    font-weight: 600;
}
@media (max-width: 575.98px) {
    .admin-layout .cp-info-grid { grid-template-columns: 1fr; }
    .admin-layout .cp-info-grid,
    .admin-layout .cp-summary-details__head { padding-left: 16px; padding-right: 16px; }
}
.admin-layout .cp-kyc-row {
    align-items: center;
    border: 1px solid rgba(16,185,129,.22);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin: 0 20px 18px;
    padding: 14px 16px;
    background: linear-gradient(135deg,rgba(16,185,129,.12),rgba(59,130,246,.06));
}
.admin-layout .cp-kyc-row__left {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}
.admin-layout .cp-kyc-row__icon {
    align-items: center;
    border-radius: 12px;
    display: flex;
    flex-shrink: 0;
    font-size: 1rem;
    height: 40px;
    justify-content: center;
    width: 40px;
    background: rgba(16,185,129,.2);
    color: #059669;
}
.admin-layout .cp-kyc-row__label {
    color: var(--cp-text);
    display: block;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}
.admin-layout .cp-kyc-row__hint {
    color: var(--cp-text-3);
    display: block;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 2px;
}
.admin-layout .cp-kyc-row__btn {
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .admin-layout .cp-kyc-row {
        align-items: stretch;
        flex-direction: column;
        margin-left: 16px;
        margin-right: 16px;
    }
    .admin-layout .cp-kyc-row__btn { width: 100%; }
}
.admin-layout .cp-portal--standalone {
    background: linear-gradient(180deg,rgba(139,92,246,.07),rgba(59,130,246,.03) 45%,transparent);
    border-top: none;
    padding: 0;
}
.admin-layout .cp-portal__inner {
    max-width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 22px 24px 24px;
    box-shadow: none;
}
.admin-layout .cp-portal__head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}
.admin-layout .cp-portal__head-icon {
    align-items: center;
    background: linear-gradient(135deg,var(--cp-violet-s),var(--cp-blue-s));
    border-radius: var(--cp-r-sm);
    color: var(--cp-violet);
    display: flex;
    flex-shrink: 0;
    font-size: 1.15rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}
.admin-layout .cp-portal__head-text {
    flex: 1;
    min-width: 0;
}
.admin-layout .cp-portal__title {
    color: var(--cp-text);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin: 0 0 2px;
}
.admin-layout .cp-portal__field {
    margin-bottom: 16px;
}
.admin-layout .cp-portal__pw-label {
    color: var(--cp-text-3);
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.admin-layout .cp-portal__pw-row {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.admin-layout .cp-portal__pw-box {
    align-items: center;
    background: var(--cp-input);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-r-xs);
    display: flex;
    flex: 1 1 200px;
    min-height: 44px;
    min-width: 0;
    padding: 10px 14px;
}
.admin-layout .cp-portal__pw-value {
    font-size: .85rem;
    letter-spacing: .04em;
    word-break: break-all;
    color: var(--cp-text);
}
.admin-layout .cp-portal__pw-tools {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 8px;
}
.admin-layout .cp-portal__icon-btn,
.admin-layout .cp-portal__mini-btn {
    align-items: center;
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-r-xs);
    color: var(--cp-text-2);
    cursor: pointer;
    display: inline-flex;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.admin-layout .cp-portal__icon-btn {
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}
.admin-layout .cp-portal__icon-btn:hover,
.admin-layout .cp-portal__mini-btn:hover {
    background: var(--cp-violet-s);
    border-color: rgba(139,92,246,.35);
    color: var(--cp-text);
}
.admin-layout .cp-portal__mini-btn {
    font-size: .78rem;
    font-weight: 600;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    white-space: nowrap;
}
.admin-layout .cp-portal__actions {
    border-top: 1px solid var(--cp-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
    padding-top: 4px;
}
.admin-layout .cp-portal__actions-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.admin-layout .cp-portal__actions-row--primary { justify-content: space-between; }
.admin-layout .cp-portal__actions-row--secondary { justify-content: flex-start; }
.admin-layout .cp-portal__actions-row--wallet {
    align-items: flex-start;
    gap: 12px;
    justify-content: space-between;
}
.admin-layout .cp-portal__wallet-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.admin-layout .cp-portal__wallet-meta-label {
    color: var(--cp-text-3);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.admin-layout .cp-portal__wallet-meta-balance {
    color: var(--cp-text);
    font-size: .85rem;
    font-weight: 600;
}
.admin-layout .cp-portal__wallet-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-layout .cp-portal__outline-btn {
    align-items: center;
    background: transparent;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-r-xs);
    color: var(--cp-text-2);
    cursor: pointer;
    display: inline-flex;
    font-size: .8rem;
    font-weight: 600;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.admin-layout .cp-portal__outline-btn:hover {
    background: var(--cp-ghost-bg);
    border-color: var(--cp-text-3);
    color: var(--cp-text);
}
.admin-layout .cp-portal__action-btn {
    min-height: 36px;
}
.admin-layout .cp-internal-transfer-btn {
    /* same as action-btn */
}
@media (max-width: 575.98px) {
    .admin-layout .cp-portal__actions-row--primary {
        align-items: stretch;
        flex-direction: column;
    }
    .admin-layout .cp-portal__actions-row--primary .cp-portal__outline-btn {
        justify-content: center;
        width: 100%;
    }
    .admin-layout .cp-portal__pw-tools {
        justify-content: flex-start;
        width: 100%;
    }
    .admin-layout .cp-portal__actions-row--wallet {
        align-items: stretch;
        flex-direction: column;
    }
    .admin-layout .cp-portal__wallet-actions { width: 100%; }
    .admin-layout .cp-portal__wallet-actions .cp-btn { flex: 1; justify-content: center; }
}

/* Tabs */
.admin-layout .cp-tabs {
    background: var(--cp-elevated);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    box-shadow: inset 0 1px rgba(255,255,255,.04);
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    margin-top: .25rem;
    overflow-x: auto;
    padding: 0 4px;
    scrollbar-width: thin;
}
.admin-layout .cp-tab {
    align-items: center;
    border: none;
    border-radius: 0;
    color: var(--cp-text-2);
    cursor: pointer;
    display: flex;
    font-size: .78rem;
    font-weight: 650;
    gap: 6px;
    padding: 10px 14px 12px;
    position: relative;
    transition: color .2s ease;
    white-space: nowrap;
    background: transparent;
}
.admin-layout .cp-tab::after {
    background: transparent;
    border-radius: 1px;
    bottom: 6px;
    content: "";
    height: 2px;
    left: 12px;
    position: absolute;
    right: 12px;
    transition: background .2s ease;
}
.admin-layout .cp-tab:hover:not(.cp-tab--active) {
    background: transparent;
    color: var(--cp-text);
}
.admin-layout .cp-tab--active {
    color: #18181b;
}
.admin-layout .cp-tab--active::after {
    background: #18181b;
}
.admin-layout .cp-tab > i {
    opacity: .92;
}
.admin-layout .cp-tab__count {
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    min-width: 1.25rem;
    padding: 2px 6px;
    text-align: center;
    background: rgba(15,23,42,.06);
}
.admin-layout .cp-tab--active .cp-tab__count {
    background: rgba(24,24,27,.1);
    color: inherit;
}

/* Sections */
.admin-layout .cp-section {
    background: var(--cp-card);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-section-r);
    box-shadow: var(--cp-shadow);
    margin-bottom: 12px;
    overflow: hidden;
}
.admin-layout .cp-section__head {
    align-items: center;
    display: flex;
    gap: 12px;
    padding: 12px 18px;
}
.admin-layout .cp-section__head--trading {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 10px;
}
.admin-layout .cp-section__trading-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-layout .cp-section__head-main {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 12px;
    min-width: 0;
}
.admin-layout .cp-section__icon {
    align-items: center;
    border-radius: 9px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: .8rem;
    height: 32px;
    justify-content: center;
    width: 32px;
}
.admin-layout .ico-trading {
    background: linear-gradient(135deg,#3b82f6,#2563eb);
}
.admin-layout .cp-section__title {
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin: 0;
    color: var(--cp-text);
}
.admin-layout .cp-section__sub {
    color: var(--cp-text-3);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 2px 0 0;
}
.admin-layout .cp-open-trading-btn {
    border-radius: .5rem !important;
    box-shadow: 0 4px 14px rgba(59,130,246,.3);
    flex-shrink: 0;
    font-weight: 650 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.admin-layout .cp-add-existing-trading-btn {
    border-radius: .5rem !important;
    box-shadow: 0 4px 14px rgba(34,197,94,.28);
    flex-shrink: 0;
    font-weight: 650 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.admin-layout .cp-section__body {
    max-width: 100%;
    min-width: 0;
}
.admin-layout .cp-section--clients-style-table .cp-section__body {
    padding: 0 1rem 1rem;
}
.admin-layout .cp-section--clients-style-table .cp-section__head {
    background: var(--cp-card) !important;
    border-bottom: none !important;
}
.admin-layout .cp-section--clients-style-table .cp-section__body .table-card.cp-clients-style-table-card {
    background: var(--cp-card) !important;
    border: 1px solid rgba(52,71,103,.1) !important;
    border-radius: 0 0 var(--cp-section-r) var(--cp-section-r) !important;
    border-top: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.admin-layout .cp-section--clients-style-table .cp-section__body .table-card.cp-clients-style-table-card .table-responsive {
    border-radius: 0 0 var(--cp-section-r) var(--cp-section-r);
    overflow: hidden;
}
.admin-layout .cp-section--clients-style-table .cp-section__body .table-card.cp-clients-style-table-card thead.table-light {
    background: var(--cp-card) !important;
    color: #64748b !important;
}
.admin-layout .cp-section--clients-style-table .cp-section__body .table-card.cp-clients-style-table-card thead th {
    border-bottom: 1px solid rgba(52,71,103,.1);
}
.admin-layout .cp-section--clients-style-table .cp-section__body .table-card.cp-clients-style-table-card tbody tr {
    background-color: var(--cp-card) !important;
}
.admin-layout .cp-section--clients-style-table .cp-section__body .table-card.cp-clients-style-table-card tbody tr:hover {
    background-color: rgba(15,23,42,.04) !important;
}
.admin-layout .cp-section--clients-style-table .cp-section__body .table-card .table {
    --bs-table-cell-padding-x: .65rem;
    --bs-table-cell-padding-y: .35rem;
}
.admin-layout .cp-section--clients-style-table .cp-section__body .table-card .table td,
.admin-layout .cp-section--clients-style-table .cp-section__body .table-card .table th {
    padding: 6px 12px;
    vertical-align: middle;
}
.admin-layout .cp-section--clients-style-table .cp-section__body .table-card thead.table-light th {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding-bottom: 8px;
    padding-top: 8px;
    text-transform: uppercase;
}
.admin-layout .cp-section--clients-style-table .cp-section__body .table-card tbody td {
    font-size: .8125rem;
    line-height: 1.35;
}

/* Badges */
.admin-layout .cp-badge {
    align-items: center;
    border-radius: 5px;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 650;
    gap: 4px;
    padding: 3px 10px;
}
.admin-layout .cp-badge--amber { background: var(--cp-amber-s); color: var(--cp-amber); }
.admin-layout .cp-badge--violet { background: var(--cp-violet-s); color: var(--cp-violet); }
.admin-layout .cp-badge--green { background: var(--cp-green-s); color: var(--cp-green); }
.admin-layout .cp-badge--red { background: var(--cp-red-s); color: var(--cp-red); }

.admin-layout .cp-btn {
    border-radius: var(--cp-r-sm) !important;
    font-weight: 600 !important;
    transition: var(--cp-ease) !important;
}
.admin-layout .cp-btn:hover {
    transform: translateY(-1px);
}

/* Back link */
.admin-layout .back-link {
    --bl-text: #52525b;
    --bl-text-hover: #18181b;
    --bl-arrow-bg: rgba(0,0,0,.05);
    --bl-arrow-bg-hover: rgba(0,0,0,.1);
    --bl-arrow-color: #18181b;
    --bl-underline: #18181b;
    align-items: center;
    background: none;
    border: none;
    color: var(--bl-text);
    cursor: pointer;
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 600;
    gap: 10px;
    letter-spacing: -.01em;
    line-height: 1.3;
    padding: 4px 2px 6px 0;
    position: relative;
    text-decoration: none;
    transition: color .22s ease;
}
.admin-layout .back-link::after {
    background: var(--bl-underline);
    border-radius: 1px;
    bottom: 0;
    content: "";
    height: 1.5px;
    left: 34px;
    position: absolute;
    right: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.admin-layout .back-link:hover {
    color: var(--bl-text-hover);
    text-decoration: none;
}
.admin-layout .back-link:hover::after {
    transform: scaleX(1);
}
.admin-layout .back-link__arrow {
    align-items: center;
    background: var(--bl-arrow-bg);
    border-radius: 6px;
    color: var(--bl-arrow-color);
    display: flex;
    flex-shrink: 0;
    height: 24px;
    justify-content: center;
    transition: background .22s ease, color .22s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
    width: 24px;
}
.admin-layout .back-link:hover .back-link__arrow {
    background: var(--bl-arrow-bg-hover);
    transform: translate(-3px);
}
.admin-layout .back-link__text {
    transition: opacity .2s ease;
}

/* Page hero (Client Profile) */
.admin-layout .page-hero {
    --page-hero-min-height: 96px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 22px rgba(15,23,42,.06), 0 0 0 1px rgba(59,130,246,.14), 0 0 24px rgba(59,130,246,.22), 0 0 42px rgba(56,189,248,.12);
    box-sizing: border-box;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    min-height: var(--page-hero-min-height);
    padding: 20px 24px;
    width: 100%;
    align-items: center;
    display: flex;
    gap: 16px;
}
.admin-layout .page-hero__left {
    align-items: center;
    display: flex;
    gap: 16px;
    min-width: 0;
}
.admin-layout .page-hero__icon {
    align-items: center;
    border-radius: 14px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 1.1rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}
.admin-layout .page-hero__icon--primary {
    background: linear-gradient(135deg,#3b82f6,#2563eb) !important;
    box-shadow: 0 4px 14px rgba(59,130,246,.25) !important;
}
.admin-layout .page-hero__icon--success {
    background: linear-gradient(135deg,#10b981,#059669) !important;
    box-shadow: 0 4px 14px rgba(16,185,129,.25) !important;
}
.admin-layout .page-hero__icon--danger {
    background: linear-gradient(135deg,#ef4444,#dc2626) !important;
    box-shadow: 0 4px 14px rgba(239,68,68,.25) !important;
}
.admin-layout .page-hero__icon--warning {
    background: linear-gradient(135deg,#f59e0b,#d97706) !important;
    box-shadow: 0 4px 14px rgba(245,158,11,.25) !important;
}
.admin-layout .page-hero__title {
    color: #1a1a2e;
    font-size: 1.25rem !important;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    margin: 0 0 4px;
}
.admin-layout .page-hero__badge {
    background: rgba(16,185,129,.08);
    border: 1px solid rgba(16,185,129,.15);
    border-radius: 8px;
    color: #059669;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 6px 14px;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .admin-layout .page-hero {
        align-items: stretch;
        flex-direction: column;
        min-height: auto;
    }
}

/* Anim rise */
.admin-layout .anim-rise {
    animation: cpRise .45s cubic-bezier(.16,1,.3,1) both;
    animation-delay: var(--d,0s);
}
@keyframes cpRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 575.98px) {
    .admin-layout .cp-shell { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 767.98px) {
    .admin-layout .cp-container { padding: 16px 0; }
    .admin-layout .cp-card__top { padding-left: 16px; padding-right: 16px; }
    .admin-layout .cp-portal--standalone .cp-portal__inner { padding: 16px 16px 18px; }
    .admin-layout .cp-tabs { gap: 2px; }
    .admin-layout .cp-tab { font-size: .75rem; padding: 8px 10px 10px; }
    .admin-layout .cp-tab::after { bottom: 5px; left: 8px; right: 8px; }
}

/* ============================================================
   MAIL CENTER (Reference replication from mail.htm)
   ============================================================ */
.admin-layout .mail-center .crm-page-hero {
    margin-bottom: .5rem;
}
.admin-layout .mail-center .nav-tabs {
    border-bottom: 1px solid #e2e8f0;
    gap: 0;
}
.admin-layout .mail-center .nav-tabs .nav-link {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748b;
    cursor: pointer;
    padding: .6rem 1rem;
    font-size: .875rem;
    transition: all .2s ease;
    border-radius: 0;
}
.admin-layout .mail-center .nav-tabs .nav-link:hover {
    color: #344767;
    border-bottom-color: #cbd5e1;
}
.admin-layout .mail-center .nav-tabs .nav-link.active {
    border-bottom-color: #5e72e4;
    color: #5e72e4;
    font-weight: 600;
}
.admin-layout .mail-center .list-group {
    border-radius: .5rem;
    overflow: hidden;
}
.admin-layout .mail-center .list-group-item {
    border: none;
    border-bottom: 1px solid #f1f5f9;
    padding: 14px 18px;
    transition: background .15s ease;
    color: #334155;
}
.admin-layout .mail-center .list-group-item:last-child {
    border-bottom: none;
}
.admin-layout .mail-center .list-group-item:hover {
    background: #f8fafc;
}
.admin-layout .mail-center .list-group-item.fw-semibold {
    color: #1e293b;
}
    .admin-layout .mail-center .list-group-item.bg-light {
        background-color: rgba(94,114,228,.04) !important;
    }

/* ============================================================
   SETTINGS HUB (Reference replication from settings.htm)
   ============================================================ */
.admin-layout .settings-hub .crm-page-title {
    font-size: 1.5rem;
    color: #344767;
    letter-spacing: -.02em;
}
.admin-layout .settings-card {
    transition: transform .2s ease, box-shadow .2s ease;
    border-radius: .75rem;
    background: #fff;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 22px rgba(15,23,42,.06), 0 0 0 1px rgba(59,130,246,.14), 0 0 24px rgba(59,130,246,.22), 0 0 42px rgba(56,189,248,.12);
}
.admin-layout .settings-card-link {
    color: inherit;
    display: block;
}
.admin-layout .settings-card-link:hover {
    color: inherit;
    text-decoration: none;
}
.admin-layout .settings-card-link:hover .settings-card {
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 24px rgba(96,165,250,.2) !important;
    transform: translateY(-2px);
}
.admin-layout .settings-card .card-body {
    padding: 1.5rem;
}
.admin-layout .settings-card-icon {
    height: 48px;
    width: 48px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    color: #fff;
}
.admin-layout .settings-card-icon.bg-primary { background-color: #3b82f6 !important; }
.admin-layout .settings-card-icon.bg-info    { background-color: #0ea5e9 !important; }
.admin-layout .settings-card-icon.bg-success { background-color: #10b981 !important; }
.admin-layout .settings-card-icon.bg-secondary { background-color: #64748b !important; }
.admin-layout .settings-card-icon.bg-warning { background-color: #f59e0b !important; }
.admin-layout .settings-card-icon.bg-danger  { background-color: #ef4444 !important; }
.admin-layout .settings-card-icon.bg-dark    { background-color: #1e293b !important; }
.admin-layout .settings-card .card-title {
    font-size: 1rem;
    color: #212529;
    margin: 0 0 .5rem;
    letter-spacing: -.01em;
}
.admin-layout .settings-card .card-text {
    color: #6c757d;
    font-size: .8125rem;
    line-height: 1.45;
    margin: 0;
}
.admin-layout .settings-card .text-primary {
    color: #5e72e4 !important;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .01em;
    margin-top: .5rem;
    display: inline-flex;
    align-items: center;
    transition: gap .15s ease;
}
.admin-layout .settings-card-link:hover .text-primary {
    gap: 4px;
}
.admin-layout .settings-card-link:hover .text-primary i {
    transform: translateX(2px);
}
.admin-layout .settings-card .text-primary i {
    font-size: .7rem;
    transition: transform .2s ease;
}

/* ============================================================
   DEPOSIT/WITHDRAWAL MANAGEMENT (Reference replication)
   ============================================================ */
.admin-layout .table-card {
    max-width: 100%;
    min-width: 0;
    border-radius: .75rem;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 22px rgba(15,23,42,.06), 0 0 0 1px rgba(59,130,246,.14), 0 0 24px rgba(59,130,246,.22), 0 0 42px rgba(56,189,248,.12);
}
.admin-layout .table-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 24px rgba(96,165,250,.2) !important;
    transform: translateY(-2px);
}
.admin-layout .table-card .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    overscroll-behavior-x: contain;
    width: 100%;
}
.admin-layout .table-card .table {
    border-collapse: collapse;
    min-width: var(--v50262c3e, 800px);
    width: 100%;
    background: #fff;
}
.admin-layout .table-card .table th {
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    background: #f8fafc;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
    padding: 12px 24px;
}
.admin-layout .table-card .table td {
    font-size: .875rem;
    vertical-align: middle;
    padding: 12px 24px;
    border-color: #e2e8f0;
    color: #334155;
}
.admin-layout .table-card .table tbody tr {
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}
.admin-layout .table-card .table tbody tr:hover {
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(96,165,250,.15) inset;
}

/* ============================================================
   KYC REQUESTS PAGE (Reference replication from kycrequest.htm)
   ============================================================ */
.admin-layout .kyc-requests-page {
    max-width: 100%;
    min-width: 0;
}
.admin-layout .kyc-main-card {
    overflow: hidden;
}
.admin-layout .kyc-card-body {
    padding: 1.5rem;
}
.admin-layout .kyc-search-wrap {
    max-width: 100%;
    position: relative;
    width: min(360px, 100%);
}
.admin-layout .kyc-search-icon {
    color: #64748b;
    font-size: .875rem;
    left: 1rem;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.admin-layout .kyc-search-input {
    padding-left: 3rem !important;
    padding-right: 2.25rem;
}
.admin-layout .kyc-table-horizontal-scroll {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
}
.admin-layout .kyc-table-wrap {
    border: 1px solid #e9ecef;
    box-sizing: border-box;
    max-width: none;
    min-width: 100%;
    width: max-content;
    border-radius: .5rem;
}
.admin-layout .kyc-documents-table {
    width: max-content;
    min-width: max(100%,920px);
    table-layout: auto;
    background: #fff;
    margin-bottom: 0;
}
.admin-layout .kyc-documents-table thead th.kyc-th {
    text-align: center !important;
    vertical-align: middle !important;
    text-transform: uppercase;
    color: #64748b;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .75rem;
    border-bottom: 1px solid #e9ecef;
    background: #f8fafc;
}
.admin-layout .kyc-td {
    font-size: .875rem;
    vertical-align: middle;
    padding: .75rem;
    text-align: center;
    color: #334155;
    border-bottom: 1px solid #f0f0f0;
}
.admin-layout .kyc-documents-table tbody tr:last-child .kyc-td {
    border-bottom: none;
}
.admin-layout .kyc-documents-table tbody tr:hover {
    background-color: rgba(0,0,0,.02);
}
.admin-layout .kyc-action-cell {
    position: relative;
    white-space: nowrap;
    z-index: 2;
}
.admin-layout .kyc-view-all-btn {
    position: relative;
    z-index: 3;
    border-radius: .75rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.admin-layout .kyc-pillar-summary {
    max-width: 220px;
}
.admin-layout .kyc-pillar-line {
    line-height: 1.4;
    margin-bottom: 2px;
}
.admin-layout .kyc-pillar-name {
    color: #344767;
}
.admin-layout .kyc-pagination-bar .btn {
    border-radius: .75rem;
}
.admin-layout .kyc-card-body .btn-link {
    transition: color .2s ease;
}
.admin-layout .kyc-card-body .btn-link:hover {
    color: #344767 !important;
}

/* ============================================================
   TICKETS PAGE (Reference replication from admintickets.htm)
   ============================================================ */
.admin-layout .ticket-row:hover {
    background-color: rgba(0,0,0,.02);
}
.admin-layout .ticket-cell {
    font-size: .875rem;
    color: #334155;
    padding: .75rem;
    vertical-align: middle;
}
.admin-layout .status-badge {
    white-space: nowrap;
    font-weight: 700;
    font-size: .75rem;
    padding: 6px 16px;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: .3s;
    min-width: 120px;
    justify-content: center;
    user-select: none;
    box-shadow: rgba(0,0,0,.1) 0 2px 4px;
    border: 2px solid;
    background-color: #fff;
    color: #212529;
}
.admin-layout .status-badge:hover:not([style*="cursor: not-allowed"]) {
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
    transform: translateY(-2px);
}
.admin-layout .status-badge:active:not([style*="cursor: not-allowed"]) {
    transform: translateY(0);
}
.admin-layout .status-text {
    font-weight: 700;
    letter-spacing: .5px;
}
.admin-layout .dropdown-arrow {
    margin-left: .25rem;
    transition: transform .3s ease;
    font-size: .7rem;
}

/* ============================================================
   IB HUB CARDS (Reference replication from affiliate.htm)
   ============================================================ */
.admin-layout .ib-hub-card-link {
    display: block;
    color: inherit;
}
.admin-layout .ib-hub-card-link:hover {
    color: inherit;
    text-decoration: none;
}
.admin-layout .ib-hub-card {
    background: #fff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 22px rgba(15,23,42,.06), 0 0 0 1px rgba(59,130,246,.14), 0 0 24px rgba(59,130,246,.22), 0 0 42px rgba(56,189,248,.12);
    height: 100%;
    min-height: 160px;
    overflow: hidden;
    padding: 1.5rem;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.admin-layout .ib-hub-card-link:hover .ib-hub-card {
    border-color: #60a5fa !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 24px rgba(96,165,250,.2) !important;
    transform: translateY(-2px);
}
.admin-layout .ib-hub-card-icon {
    align-items: center;
    border-radius: 12px;
    color: #fff;
    display: flex;
    font-size: 1.25rem;
    height: 48px;
    justify-content: center;
    margin-bottom: 1rem;
    width: 48px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.admin-layout .ib-hub-card-icon--primary  { background: linear-gradient(135deg,#5e72e4,#825ee4); }
.admin-layout .ib-hub-card-icon--info     { background: linear-gradient(135deg,#11cdef,#1171ef); }
.admin-layout .ib-hub-card-icon--success  { background: linear-gradient(135deg,#2dce89,#2dcecc); }
.admin-layout .ib-hub-card-icon--warning  { background: linear-gradient(135deg,#fb6340,#fbb140); }
.admin-layout .ib-hub-card-icon--secondary{ background: linear-gradient(135deg,#8898aa,#6c757d); }
.admin-layout .ib-hub-card-icon--danger   { background: linear-gradient(135deg,#f5365c,#f56036); }
.admin-layout .ib-hub-card-title {
    font-weight: 700;
    margin-bottom: .5rem;
    color: #344767;
    font-size: 1.1rem;
}
.admin-layout .ib-hub-card-arrow {
    opacity: .5;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    transition: all .25s ease;
    color: #64748b;
}
.admin-layout .ib-hub-card-link:hover .ib-hub-card-arrow {
    opacity: 1;
    right: 1rem;
    color: #5e72e4;
}

/* ============================================================
   IB PORTAL TABLE PAGES (Reference replication)
   ============================================================ */
.admin-layout .ib-portal-tbl-page {
    max-width: 100%;
    min-width: 0;
}
.admin-layout .ib-portal-tbl-card {
    background: #fff;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 22px rgba(15,23,42,.06), 0 0 0 1px rgba(59,130,246,.14), 0 0 24px rgba(59,130,246,.22), 0 0 42px rgba(56,189,248,.12);
    transition: transform .2s ease, box-shadow .2s ease;
}
.admin-layout .ib-portal-tbl-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 24px rgba(96,165,250,.2) !important;
    transform: translateY(-2px);
}
.admin-layout .ib-portal-tbl-card__hdr {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
    color: #344767;
    padding: .75rem 1rem;
    font-size: .875rem;
}
.admin-layout .ib-portal-tbl-shell {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}
.admin-layout .ib-portal-tbl-hscroll--scrollbar-hidden::-webkit-scrollbar {
    display: none;
}
.admin-layout .ib-portal-tbl {
    background: #fff;
    margin-bottom: 0;
    vertical-align: middle;
    color: #334155;
    font-size: .875rem;
    width: 100%;
}
.admin-layout .ib-portal-tbl--auto-layout {
    min-width: max(100%, 700px);
    table-layout: auto;
}
.admin-layout .ib-portal-tbl thead th {
    background: #f8fafc !important;
    color: #1e293b !important;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .75rem;
    border-bottom: 1px solid #e9ecef;
    border-top: 0;
}
.admin-layout .ib-portal-tbl tbody td {
    padding: .75rem;
    vertical-align: middle;
    border-color: #f0f0f0;
    color: #334155;
}
.admin-layout .ib-portal-tbl tbody tr {
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}
.admin-layout .ib-portal-tbl tbody tr:last-child {
    border-bottom: none;
}
.admin-layout .ib-portal-tbl tbody tr:hover {
    background: #f8fafc;
}
.admin-layout .ib-portal-tbl__empty {
    text-align: center;
    color: #64748b !important;
    padding: 3rem .75rem !important;
    font-size: .875rem;
}
.admin-layout .ib-status-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: .35em .65em;
    border-radius: .25rem;
    display: inline-block;
}
.admin-layout .ib-portal-tbl__col-id           { width: 6%; }
.admin-layout .ib-portal-tbl__col-name         { width: 16%; }
.admin-layout .ib-portal-tbl__col-account-type{ width: 26%; }
.admin-layout .ib-portal-tbl__col-active       { width: 14%; }
.admin-layout .ib-portal-tbl__col-symbols      { width: 12%; }
.admin-layout .ib-portal-tbl__col-actions      { width: 16%; }
.admin-layout .ib-portal-tbl__col-email        { width: 26%; }
.admin-layout .ib-portal-tbl__col-tier         { width: 14%; }
.admin-layout .ib-portal-tbl__col-wallet       { width: 12%; }
.admin-layout .ib-portal-tbl__col-referral     { width: 10%; }
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups { table-layout: fixed; width: 100%; }
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups tbody td:first-child,
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups thead th:first-child { padding-left: 1.25rem; }
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups .ib-portal-tbl__col-id { width: 4%; }
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups .ib-portal-tbl__col-name { width: 16%; }
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups .ib-portal-tbl__col-account-type { width: 18%; }
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups .ib-portal-tbl__col-active { width: 8%; }
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups .ib-portal-tbl__col-symbols { width: 34%; }
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups .ib-portal-tbl__col-actions { width: 20%; }
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups .ib-portal-tbl__symbols-cell,
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups .ib-portal-tbl__symbols-col { max-width: 0; overflow: hidden; text-align: left !important; text-overflow: ellipsis; white-space: nowrap; }
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups .ib-portal-tbl__actions-cell,
.admin-layout .ib-portal-tbl.ib-portal-tbl--groups .ib-portal-tbl__actions-col { white-space: normal; }
.admin-layout .ib-portal-tbl__symbols-cell {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-layout .ib-portal-tbl__actions-cell {
    white-space: nowrap;
}
.admin-layout .affiliate-symbol-label {
    cursor: help;
}

/* IB Users - avatar & referral count */
.admin-layout .ib-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59,130,246,.25);
}
.admin-layout .ib-referral-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 700;
    background-color: #f1f5f9;
    color: #64748b;
}
.admin-layout .ib-referral-count.has-refs {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 2px 6px rgba(16,185,129,.25);
}
.admin-layout .page-hero__subtitle {
    color: #67748e;
    font-size: .8125rem;
    margin: 0;
    line-height: 1.4;
}
body.dark-version .admin-layout .ib-user-avatar { box-shadow: 0 2px 6px rgba(59,130,246,.4); }
body.dark-version .admin-layout .ib-referral-count { background-color: #334155; color: #94a3b8; }
body.dark-version .admin-layout .ib-referral-count.has-refs { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
body.dark-version .admin-layout .page-hero__subtitle { color: #94a3b8; }

/* IB Profile page */
.admin-layout .ib-profile-tabs { border-bottom-color: rgba(0,0,0,.08); }
.admin-layout .ib-profile-tabs .nav-link {
    border-radius: .5rem;
    margin-right: .25rem;
    color: #67748e;
    border: none;
    padding: .5rem .85rem;
    font-size: .875rem;
    font-weight: 600;
    transition: all .2s ease;
}
.admin-layout .ib-profile-tabs .nav-link:hover { color: #344767; background: rgba(59,130,246,.06); }
.admin-layout .ib-profile-tabs .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 2px 8px rgba(59,130,246,.25);
}
.admin-layout .ib-profile-page .card {
    position: relative;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.admin-layout .ib-profile-page .card:hover {
    border-color: rgba(96,165,250,.35) !important;
    box-shadow: 0 0 18px rgba(96,165,250,.18), 0 10px 26px rgba(15,23,42,.08) !important;
    transform: translateY(-2px);
}
.admin-layout .ib-profile-page .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(15,23,42,.08);
    font-weight: 700;
    font-size: .9375rem;
    color: #1a1a2e;
    padding: .85rem 1rem;
}
.admin-layout .ib-profile-page .card-body { padding: 1rem; }
.admin-layout .ib-profile-page dl { margin-bottom: 0; }
.admin-layout .ib-profile-page dt {
    font-weight: 600;
    color: #67748e;
    padding: .35rem 0;
}
.admin-layout .ib-profile-page dd {
    color: #1a1a2e;
    padding: .35rem 0;
    margin-bottom: 0;
}
.admin-layout .ib-metrics {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-layout .ib-metric {
    background: rgba(2,6,23,.02);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: .9rem;
    padding: .75rem .85rem;
}
.admin-layout .ib-metric__label {
    color: rgba(15,23,42,.65);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: .2rem;
    text-transform: uppercase;
}
.admin-layout .ib-metric__value {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    word-break: break-word;
}
@media (max-width: 992px) {
    .admin-layout .ib-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
    .admin-layout .ib-metrics { grid-template-columns: 1fr; }
}
.admin-layout .ib-profile-hero-link {
    font-weight: 600;
    text-decoration: none;
    color: #3b82f6;
}
.admin-layout .ib-profile-hero-link:hover { text-decoration: underline; }
body.dark-version .admin-layout .ib-profile-tabs .nav-link { color: #94a3b8; }
body.dark-version .admin-layout .ib-profile-tabs .nav-link:hover { color: #e2e8f0; background: rgba(255,255,255,.05); }
body.dark-version .admin-layout .ib-profile-page .card-header { color: #f1f5f9; border-bottom-color: #334155; }
body.dark-version .admin-layout .ib-profile-page dt { color: #94a3b8; }
body.dark-version .admin-layout .ib-profile-page dd { color: #e2e8f0; }
body.dark-version .admin-layout .ib-metric { background: rgba(255,255,255,.03); border-color: #334155; }
body.dark-version .admin-layout .ib-metric__label { color: #94a3b8; }
body.dark-version .admin-layout .ib-metric__value { color: #f1f5f9; }
body.dark-version .admin-layout .ib-profile-hero-link { color: #60a5fa; }

/* Commission grid (Forex Groups) */
.admin-layout .commission-grid-page {
    --cg-border: #d1d5db;
    --cg-border-soft: #e5e7eb;
    --cg-surface: #fff;
    --cg-head-bg: #f3f4f6;
    --cg-text: #111827;
    --cg-muted: #64748b;
    --cg-symbol-line: #e5e7eb;
    padding: 1.25rem 0 2rem;
}
.admin-layout .commission-grid-page__inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem 1rem;
}
.admin-layout .cg-tier-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.admin-layout .cg-tier-section {
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: .25rem;
    overflow: hidden;
}
.admin-layout .cg-tier-section__head {
    width: 100%;
    background: #4f46e5;
    color: #fff;
    border: none;
    padding: .55rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    transition: filter .15s ease;
}
.admin-layout .cg-tier-section__head:hover {
    filter: brightness(.97);
}
.admin-layout .cg-tier-section__head--default {
    background: #4f46e5;
    color: #fff;
}
.admin-layout .cg-tier-section__body {
    padding: .75rem;
}
.admin-layout .cg-tier-section__title {
    font-weight: 700;
}
.admin-layout .cg-tier-section__toggle {
    opacity: .9;
    color: inherit;
    transition: transform .2s ease;
}

/* ============================================================
   DARK MODE � Global overrides for all admin pages
   ============================================================ */
body.dark-version {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* --- Layout & wrapper --- */
body.dark-version .admin-layout { background-color: #0f172a; }
body.dark-version .admin-layout .page-content { background-color: #0f172a; }
body.dark-version .admin-layout__main,
body.dark-version .main-content { background-color: #0f172a; }

/* --- Top section & navbar section --- */
body.dark-version .admin-layout .top-section { background-color: #1e293b; }
body.dark-version .admin-layout .navbar-section { background-color: #1e293b; }
body.dark-version .admin-layout .navbar-main { background-color: #1e293b !important; border-color: #334155; }
body.dark-version .admin-layout .header-wrapper { background-color: #1e293b; }

/* --- Navbar links --- */
body.dark-version .admin-layout .admin-nav-menu .nav-link { color: #cbd5e1 !important; }
body.dark-version .admin-layout .admin-nav-menu .nav-link i { color: #94a3b8 !important; }
body.dark-version .admin-layout .admin-nav-menu .nav-link:hover,
body.dark-version .admin-layout .admin-nav-menu .nav-link:focus { background-color: #000; color: #f1f5f9 !important; }
body.dark-version .admin-layout .admin-nav-menu .nav-link:hover i,
body.dark-version .admin-layout .admin-nav-menu .nav-link:focus i { color: #cbd5e1 !important; }
body.dark-version .admin-layout .admin-nav-menu .nav-link.active { color: #f1f5f9 !important; }
body.dark-version .admin-layout .admin-nav-menu .nav-link.active i { color: #f1f5f9 !important; }
body.dark-version .admin-layout .admin-navbar-bg .admin-nav-menu .nav-link i { color: #94a3b8 !important; }

/* --- Navbar icon circle --- */
body.dark-version .admin-layout .admin-nav-icon-circle { background-color: #334155; border-color: #475569; }
body.dark-version .admin-layout .admin-nav-icon-circle i { color: #cbd5e1 !important; }
body.dark-version .admin-layout .admin-nav-icon-btn:hover .admin-nav-icon-circle,
body.dark-version .admin-layout .admin-nav-icon-btn:focus .admin-nav-icon-circle { background-color: #475569; border-color: #64748b; }
body.dark-version .admin-layout .admin-nav-icon-btn:hover .admin-nav-icon-circle i,
body.dark-version .admin-layout .admin-nav-icon-btn:focus .admin-nav-icon-circle i { color: #f1f5f9 !important; }
body.dark-version .admin-layout .admin-nav-icon-btn { color: #cbd5e1 !important; }

/* --- Desktop username --- */
body.dark-version .admin-layout .admin-navbar-desktop-name { color: #e2e8f0; }

/* --- Cards --- */
body.dark-version .admin-layout .card { background-color: #1e293b !important; border-color: #334155; }
body.dark-version .admin-layout .card .card-body { background-color: #1e293b; }
body.dark-version .admin-layout .card .card-header { background-color: #1e293b; border-color: #334155; }
body.dark-version .admin-layout .card .card-footer { background-color: #1e293b; border-color: #334155; }
body.dark-version .card-crm { background-color: #1e293b !important; }

/* --- Card titles & text --- */
body.dark-version .admin-layout .text-dark { color: #e2e8f0 !important; }
body.dark-version .admin-layout h1,
body.dark-version .admin-layout h2,
body.dark-version .admin-layout h3,
body.dark-version .admin-layout h4,
body.dark-version .admin-layout h5,
body.dark-version .admin-layout h6 { color: #f1f5f9; }
body.dark-version .admin-layout .crm-page-title { color: #f1f5f9; }
body.dark-version .admin-layout .text-muted { color: #94a3b8 !important; }
body.dark-version .admin-layout .text-secondary { color: #94a3b8 !important; }
body.dark-version .admin-layout .text-sm { color: #cbd5e1; }
body.dark-version .admin-layout .stats-card-figure { color: #f1f5f9 !important; }

/* --- Table card --- */
body.dark-version .admin-layout .table-card { background-color: #1e293b !important; }
body.dark-version .admin-layout .table-card .table { background-color: #1e293b; }
body.dark-version .admin-layout .table-card .table th { background-color: #0f172a; color: #e2e8f0; border-color: #334155; }
body.dark-version .admin-layout .table-card .table td { color: #cbd5e1; border-color: #334155; background-color: #1e293b; }
body.dark-version .admin-layout .table-card .table tbody tr { background-color: #1e293b; }
body.dark-version .admin-layout .table-card .table tbody tr:last-child td { border-bottom: none; }
body.dark-version .admin-layout .table-card .table tbody tr:hover { background-color: #334155 !important; }
body.dark-version .admin-layout .table thead.table-light th { background-color: #0f172a !important; color: #e2e8f0; border-color: #334155; }

/* --- Generic table --- */
body.dark-version .admin-layout .table { color: #cbd5e1; }
body.dark-version .admin-layout .table th { color: #e2e8f0; border-color: #334155; }
body.dark-version .admin-layout .table td { border-color: #334155; }

/* --- Form elements --- */
body.dark-version .admin-layout .form-control,
body.dark-version .admin-layout .form-select { background-color: #0f172a; color: #e2e8f0; border-color: #334155; }
body.dark-version .admin-layout .form-control::placeholder { color: #94a3b8; }
body.dark-version .admin-layout .form-control:focus,
body.dark-version .admin-layout .form-select:focus { background-color: #0f172a; color: #f1f5f9; border-color: #5e72e4; box-shadow: 0 0 0 0.2rem rgba(94,114,228,.25); }
body.dark-version .admin-layout .form-label { color: #cbd5e1; }
body.dark-version .admin-layout .form-check-label { color: #cbd5e1; }
body.dark-version .admin-layout textarea.form-control { background-color: #0f172a; color: #e2e8f0; }

/* --- Buttons (keep gradients, they work on both) --- */
body.dark-version .admin-layout .btn-outline-secondary { color: #94a3b8; border-color: #475569; }
body.dark-version .admin-layout .btn-outline-secondary:hover { background-color: #334155; color: #f1f5f9; border-color: #64748b; }

/* --- Settings card --- */
body.dark-version .admin-layout .settings-card { background-color: #1e293b; }
body.dark-version .admin-layout .settings-card .card-title { color: #f1f5f9; }
body.dark-version .admin-layout .settings-card .card-text { color: #94a3b8; }

/* --- IB hub card --- */
body.dark-version .admin-layout .ib-hub-card { background-color: #1e293b; border-color: #334155 !important; }
body.dark-version .admin-layout .ib-hub-card-title { color: #f1f5f9; }
body.dark-version .admin-layout .ib-hub-card-arrow { color: #94a3b8; }

/* --- CP card --- */
body.dark-version .admin-layout .cp-card { background-color: #1e293b; border-color: #334155; }
body.dark-version .admin-layout .cp-card__top { background: linear-gradient(145deg, rgba(59,130,246,.12), rgba(139,92,246,.06) 45%, transparent); border-color: #334155; }
body.dark-version .admin-layout .cp-section--clients-style-table .cp-section__body .table-card.cp-clients-style-table-card { background-color: #1e293b; }

/* --- IB portal table card --- */
body.dark-version .admin-layout .ib-portal-tbl-card { background-color: #1e293b; }
body.dark-version .admin-layout .ib-portal-tbl-shell { background-color: #1e293b; }
body.dark-version .admin-layout .ib-portal-tbl.ib-portal-tbl--groups .ib-portal-tbl__symbols-cell { color: #94a3b8; }

/* --- Dropdowns --- */
body.dark-version .admin-layout .admin-bell-dropdown,
body.dark-version .admin-layout .admin-user-dropdown { background-color: #1e293b; border-color: #334155; box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04); }
body.dark-version .admin-layout .dropdown-crm-header { color: #f1f5f9; border-color: #334155; }
body.dark-version .admin-layout .dropdown-crm-item { color: #cbd5e1; }
body.dark-version .admin-layout .dropdown-crm-item:hover { background-color: #334155; color: #f1f5f9; }
body.dark-version .admin-layout .dropdown-crm-item i { color: #94a3b8; }
body.dark-version .admin-layout .dropdown-crm-divider { background-color: #334155; }

/* --- Footer --- */
body.dark-version .app-footer { background-color: #1e293b; border-color: #334155; }
body.dark-version .app-footer__brand,
body.dark-version .app-footer__name,
body.dark-version .app-footer__copy,
body.dark-version .app-footer__credit,
body.dark-version .app-footer__sep { color: #94a3b8; }

/* --- IB Hub Cards --- */
.ib-hub-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  transition: all 0.25s ease;
  position: relative;
  min-height: 80px;
}
.ib-hub-card:hover {
  border-color: #5e72e4;
  box-shadow: 0 8px 24px rgba(94,114,228,.12);
  transform: translateY(-2px);
}
.ib-hub-card-link { text-decoration: none; color: inherit; display: flex; }
.ib-hub-card-icon {
  width: 48px; height: 48px;
  border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}
.ib-hub-card-icon--primary  { background: linear-gradient(310deg,#7928ca,#ff0080); color: #fff }
.ib-hub-card-icon--info     { background: linear-gradient(310deg,#17c1e8,#0d8ba8); color: #fff }
.ib-hub-card-icon--warning  { background: linear-gradient(310deg,#fb6340,#f56036); color: #fff }
.ib-hub-card-icon--success  { background: linear-gradient(310deg,#82d616,#6ab213); color: #fff }
.ib-hub-card-icon--secondary { background: linear-gradient(310deg,#6c757d,#495057); color: #fff }
.ib-hub-card-icon--danger   { background: linear-gradient(310deg,#f53939,#c41e1e); color: #fff }
.ib-hub-card-title {
  font-size: 1rem; font-weight: 700; color: #1a1a2e;
  margin: 0; flex: 1;
}
.ib-hub-card-arrow {
  color: #adb5bd;
  font-size: 0.8rem;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.ib-hub-card:hover .ib-hub-card-arrow {
  transform: translateX(4px);
  color: #5e72e4;
}
body.dark-version .ib-hub-card {
  background: #1e293b;
  border-color: #334155;
}
body.dark-version .ib-hub-card:hover {
  border-color: #5e72e4;
  box-shadow: 0 8px 24px rgba(94,114,228,.2);
}
body.dark-version .ib-hub-card-title { color: #e2e8f0; }
body.dark-version .ib-hub-card-arrow { color: #94a3b8; }
body.dark-version .ib-hub-card:hover .ib-hub-card-arrow { color: #5e72e4; }

/* --- Misc --- */
body.dark-version .admin-layout hr { border-color: #334155; }
body.dark-version .admin-layout .border,
body.dark-version .admin-layout .border-top,
body.dark-version .admin-layout .border-bottom,
body.dark-version .admin-layout .border-start,
body.dark-version .admin-layout .border-end { border-color: #334155 !important; }
body.dark-version .admin-layout .table-responsive { background-color: #1e293b; }
body.dark-version .admin-layout .alert-secondary { background-color: #334155; color: #cbd5e1; border-color: #475569; }
body.dark-version .admin-layout .modal-content { background-color: #1e293b; color: #e2e8f0; }
body.dark-version .admin-layout .modal-header { border-color: #334155; }
body.dark-version .admin-layout .modal-footer { border-color: #334155; }
body.dark-version .admin-layout .modal-title { color: #f1f5f9; }
body.dark-version .admin-layout .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* --- Tabs (tickets page) --- */
body.dark-version .admin-layout .btn-link { color: #94a3b8; }
body.dark-version .admin-layout .btn-link.text-dark { color: #f1f5f9 !important; }
body.dark-version .admin-layout .btn-link.text-muted { color: #94a3b8 !important; }

/* --- Pagination --- */
body.dark-version .admin-layout .pagination .page-link { background-color: #1e293b; color: #cbd5e1; border-color: #334155; }
body.dark-version .admin-layout .pagination .page-item.active .page-link { background-color: #5e72e4; color: #fff; border-color: #5e72e4; }
body.dark-version .admin-layout .pagination .page-item.disabled .page-link { background-color: #0f172a; color: #475569; }

/* --- Chart card --- */
body.dark-version .admin-layout .chart-header h6 { color: #f1f5f9; }

/* --- Commission grid dark mode --- */
body.dark-version .admin-layout .commission-grid-page { --cg-border: #334155; --cg-border-soft: #334155; --cg-surface: #1e293b; --cg-head-bg: #0f172a; --cg-text: #f1f5f9; --cg-muted: #64748b; --cg-symbol-line: #334155; }
body.dark-version .admin-layout .cg-tier-section { background: var(--cg-surface); border-color: var(--cg-border); }
body.dark-version .admin-layout .cg-tier-section__head { background: #4338ca; color: #fff; }
body.dark-version .admin-layout .cg-tier-section__head:hover { filter: brightness(1.1); }
body.dark-version .admin-layout .chart-header p { color: #94a3b8; }

/* --- Commission grid --- */
body.dark-version .admin-layout .commission-grid-page { background-color: #1e293b; border-color: #334155; }
body.dark-version .admin-layout .cg-tier-section { background-color: #1e293b; border-color: #334155; }
body.dark-version .admin-layout .cg-tier-section__head { background-color: #0f172a; border-color: #334155; color: #e2e8f0; }
body.dark-version .admin-layout .cg-tier-section__head:hover { background-color: #334155; }
body.dark-version .admin-layout .cg-tier-section__title { color: #e2e8f0; }
body.dark-version .admin-layout .cg-tier-section__toggle { color: #94a3b8; }

/* --- Scrollbar (Webkit) --- */
body.dark-version ::-webkit-scrollbar { width: 8px; height: 8px; }
body.dark-version ::-webkit-scrollbar-track { background: #0f172a; }
body.dark-version ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
body.dark-version ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* --- Stat card icon text --- */
body.dark-version .admin-layout .card h6.text-muted { color: #94a3b8 !important; }

/* --- Status badge (tickets) - keep colored backgrounds, adjust text if needed --- */
body.dark-version .admin-layout .status-badge { box-shadow: 0 2px 4px rgba(0,0,0,.3) !important; }

/* --- Dark mode toggle button (override text-dark class) --- */
body.dark-version .admin-layout .admin-nav-icon-btn[aria-label="Toggle dark mode"] { color: #cbd5e1 !important; }
body.dark-version .admin-layout .admin-nav-icon-btn[aria-label="Toggle dark mode"]:hover { color: #f1f5f9 !important; }
body.dark-version .admin-layout .admin-nav-icon-btn[aria-label="Toggle dark mode"]:hover .admin-nav-icon-circle { background-color: #475569; border-color: #64748b; }
body.dark-version .admin-layout .admin-nav-icon-btn[aria-label="Toggle dark mode"]:hover .admin-nav-icon-circle i { color: #f1f5f9 !important; }

body.dark-version .admin-layout .admin-nav-icon-btn[aria-label="Toggle dark mode"] .admin-nav-icon-circle { background-color: #334155; border-color: #475569; }
body.dark-version .admin-layout .admin-nav-icon-btn[aria-label="Toggle dark mode"] .admin-nav-icon-circle i { color: #cbd5e1 !important; }

/* ============================================================
   PORTAL ALERT BAR � KYC notice marquee (client header)
   ============================================================ */
.portal-alert-bar-section { padding: 0 16px 8px }
.portal-alert-bar { background: linear-gradient(135deg,rgba(245,158,11,.08),rgba(234,179,8,.05)); border:1px solid rgba(245,158,11,.2); border-radius:.75rem; overflow:hidden; position:relative }
.portal-alert-bar__inner { align-items:center; display:flex; gap:12px; padding:8px 16px }
.portal-alert-bar__icon { align-items:center; color:#d97706; display:flex; flex-shrink:0; font-size:.95rem }
.portal-alert-bar__marquee { flex:1; min-width:0; overflow:hidden; position:relative }
.portal-alert-bar__track { animation:portalAlertScroll 20s linear infinite; display:flex; gap:2rem; white-space:nowrap }
.portal-alert-bar__chunk { color:#92400e; font-size:.8125rem; font-weight:600; white-space:nowrap }
.portal-alert-bar__chunk--dup { opacity:0 }
@keyframes portalAlertScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media (max-width:767px) { .portal-alert-bar-section { padding:0 10px 6px } .portal-alert-bar__inner { padding:6px 12px; gap:8px } .portal-alert-bar__chunk { font-size:.75rem } }

/* ============================================================
   USER NAVBAR � Reference replication (client header)
   ============================================================ */
.user-navbar-root { background-color: var(--color_body_bg,#f3f3f3); box-sizing: border-box; overflow: visible; padding: .35rem 24px .5rem; width: 100% }
.user-navbar-bg { background: #fff !important }
.user-navbar-inner { padding: .25rem .5rem }
.user-navbar-inner-bg { background: #fff }
.user-navbar-username-rail { display: flex; align-items: center; min-width: 0 }
.user-navbar-desktop-name-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.user-navbar-desktop-name { color: #111827; font-size: 1rem; font-weight: 700; max-width: 14rem }
.navbar-inner { padding: .25rem .5rem; background: #fff }
@media (max-width: 991px) {
    .user-navbar-root { padding: .35rem 12px .5rem }
    .user-navbar-desktop-name-wrap { display: none !important }
}
@media (max-width: 575px) {
    .user-navbar-root { padding: .25rem 8px .5rem }
    .button-group { gap: .5rem }
}

/* ============================================================
   LOGIN/REGISTER PAGE � Original design (from reference)
   ============================================================ */
.bg-gradient-primary{background-image:var(--grad_primary,linear-gradient(310deg,#5e72e4,#825ee4))}
.bg-gradient-success{background-image:var(--grad_success,linear-gradient(310deg,#474747,#2d2416))}
.btn.bg-gradient-success{display:flex;align-items:center;justify-content:center;text-align:center;background:#000!important;background-image:none!important;color:#fff!important;border:0!important}
.btn.bg-gradient-success:hover,.btn.bg-gradient-success:active,.btn.bg-gradient-success:focus{background:#1a1a1a!important;background-image:none!important;color:#fff!important}
.btn.bg-gradient-dark:hover,.btn.bg-gradient-dark:active,.btn.bg-gradient-dark:focus{background-image:var(--grad_dark,linear-gradient(310deg,#42424a,#191919))!important;color:#fff!important}
.btn.bg-gradient-primary:hover{background-color:var(--color_primary,#5e72e4);border-color:var(--color_primary,#5e72e4)}
.text-gradient{background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative;z-index:1}
.text-gradient.text-success{background-image:linear-gradient(310deg,#474747,#2d2416)}
.mask{position:absolute;background-position:50%;top:0;left:0;width:100%;height:100%;background-size:cover}
.blur{backdrop-filter:saturate(200%) blur(30px);background-color:hsla(0,0%,100%,.8)!important}
.form-control{display:block;width:100%;font-weight:400;line-height:1.4rem;color:var(--color_body_text,#495057);background-color:var(--color_card_bg,var(--fx-white,#fff));background-clip:padding-box;border:1px solid var(--color_border,#d2d6da);-moz-appearance:none;appearance:none;border-radius:.5rem;transition:box-shadow .15s ease,border-color .15s ease;font-size:.875rem;padding:.5rem .75rem;box-shadow:0 1px 2px transparent;box-shadow:0 0 0 1px transparent}
.form-control:focus{box-shadow:0 0 0 2px var(--color_border,#e9ecef);border-color:var(--color_primary,#d2d6da);outline:0}
.form-control-lg{font-size:.875rem;padding:.75rem .75rem}
.form-check-input:checked[type=checkbox]{background-image:linear-gradient(310deg,#474747,#2d2416)!important}
.form-check-input:focus{border-color:transparent!important;outline:0;box-shadow:none!important}
.input-group>.form-control{border-radius:.5rem!important}

/* ============================================================
   GLOBAL DESIGN OVERRIDES � Bigger fonts, darker colors, refined cards
   ============================================================ */

/* ----- Darker background colors for financial/professional look ----- */
body.bg-gray-100 { background: linear-gradient(135deg,var(--color_body_bg,#e8eaf0) 0%,var(--color_surface2,#f0f2f7) 50%,var(--color_body_bg,#e8eaf0) 100%)!important }

/* ----- Global typography improvements ----- */
body { font-size: .95rem; font-weight: 400; line-height: 1.6; color: var(--color_body_text,#2d3142) }

/* All headings bolder and bigger */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: #1a1a2e }
h1, .h1 { font-size: 1.875rem }
h2, .h2 { font-size: 1.5rem }
h3, .h3 { font-size: 1.25rem }
h4, .h4 { font-size: 1.125rem }
h5, .h5 { font-size: .9375rem }
h6, .h6 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em }

/* ----- Darker color overrides (replace light grays with richer tones) ----- */
.text-muted { color: #5a6378 !important }
.text-dark { color: #1a1a2e !important }
.bg-light { background-color: #f1f3f8 !important }
body, .bg-gray-100 { color: var(--color_body_text,#2d3142) }

/* ----- Bigger, bolder card designs ----- */
.card { border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(15,23,42,.04); border: 0; transition: transform .2s ease, box-shadow .2s ease }
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px) }
.card .card-header { padding: 1.25rem 1.5rem; background: linear-gradient(135deg,#ffffff 0%,#f8f9fc 100%); border-bottom: 1px solid #e8eaf0; font-weight: 700; font-size: 1rem; color: #1a1a2e }
.card .card-body { padding: 1.5rem }
.card .card-footer { padding: 1.25rem 1.5rem; background: #f8f9fc; border-top: 1px solid #e8eaf0 }

/* ----- Stat card improvements (bigger, bolder) ----- */
.stat-card { padding: 1.5rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); background: #fff }
.stat-label { font-size: .75rem; font-weight: 700; color: #5a6378; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem }
.stat-value { font-size: 1.75rem; font-weight: 800; color: #1a1a2e; line-height: 1.1 }
.stat-icon { width: 56px; height: 56px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15) }

/* ----- Better form controls ----- */
.form-control { font-size: .9375rem; padding: .625rem .875rem; border-radius: .625rem; border: 1.5px solid #d8dce5; transition: all .2s ease }
.form-control:focus { border-color: #1a1a2e; box-shadow: 0 0 0 3px rgba(26,26,46,.08); outline: 0 }
.form-control-lg { font-size: 1rem; padding: .75rem 1rem }
.form-label { font-size: .8125rem; font-weight: 700; color: #1a1a2e; margin-bottom: .5rem; letter-spacing: .01em }
.form-select { font-size: .9375rem; padding: .625rem 2.25rem .625rem .875rem; border-radius: .625rem; border: 1.5px solid #d8dce5 }
.form-select:focus { border-color: #1a1a2e; box-shadow: 0 0 0 3px rgba(26,26,46,.08) }

/* ----- Bolder, larger buttons ----- */
.btn { font-size: .9375rem; font-weight: 700; border-radius: .625rem; padding: .625rem 1.25rem; transition: all .2s ease; letter-spacing: .01em }
.btn-lg { font-size: 1rem; padding: .75rem 1.5rem }
.btn-sm { font-size: .8125rem; padding: .4rem .8rem; border-radius: .5rem }

/* Darker button variants */
.btn-dark, .btn.bg-gradient-dark { background: var(--grad_dark, linear-gradient(135deg,#1a1a2e 0%,#0f0f1f 100%))!important; border-color: var(--color_dark,#1a1a2e)!important; color: #fff!important; box-shadow: 0 4px 12px rgba(26,26,46,.25)!important }
.btn-dark:hover, .btn.bg-gradient-dark:hover { background: var(--grad_dark, linear-gradient(135deg,#2d2d4a 0%,#1a1a2e 100%))!important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26,26,46,.35)!important }
.btn-success, .btn.bg-gradient-success { background: var(--grad_success, linear-gradient(135deg,#047857 0%,#065f46 100%))!important; border-color: var(--color_success,#047857)!important; color: #fff!important; box-shadow: 0 4px 12px rgba(4,120,87,.25) }
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(4,120,87,.35)!important }
.btn-primary, .btn.bg-gradient-primary { background: var(--grad_primary, linear-gradient(135deg,#1e40af 0%,#1e3a8a 100%))!important; border-color: var(--color_primary,#1e40af)!important; color: #fff!important; box-shadow: 0 4px 12px rgba(30,64,175,.25) }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30,64,175,.35)!important }
.btn-danger, .btn.bg-gradient-danger { background: var(--grad_danger, linear-gradient(135deg,#b91c1c 0%,#991b1b 100%))!important; border-color: var(--color_danger,#b91c1c)!important; color: #fff!important }
.btn-warning, .btn.bg-gradient-warning { background: var(--grad_warning, linear-gradient(135deg,#c2410c 0%,#9a3412 100%))!important; border-color: var(--color_warning,#c2410c)!important; color: #fff!important }
.btn-info, .btn.bg-gradient-info { background: var(--grad_info, linear-gradient(135deg,#0e7490 0%,#155e75 100%))!important; border-color: var(--color_info,#0e7490)!important; color: #fff!important }
.btn-outline-secondary { color: var(--color_dark,#1a1a2e); border-color: var(--color_border,#d8dce5); font-weight: 600 }
.btn-outline-secondary:hover { background: var(--color_dark,#1a1a2e); border-color: var(--color_dark,#1a1a2e); color: #fff }
.btn-outline-primary { color: var(--color_primary,#1e40af); border-color: var(--color_primary,#1e40af); font-weight: 600 }
.btn-outline-primary:hover { background: var(--color_primary,#1e40af); color: #fff; transform: translateY(-1px) }
.btn-outline-info { color: var(--color_info,#0e7490); border-color: var(--color_info,#0e7490); font-weight: 600 }
.btn-outline-info:hover { background: var(--color_info,#0e7490); color: #fff; transform: translateY(-1px) }
.btn-outline-danger { color: var(--color_danger,#b91c1c); border-color: var(--color_danger,#b91c1c); font-weight: 600 }
.btn-outline-danger:hover { background: var(--color_danger,#b91c1c); color: #fff; transform: translateY(-1px) }

/* ----- Bigger, bolder badges ----- */
.badge { font-size: .75rem; font-weight: 700; padding: .4em .7em; border-radius: .5rem; letter-spacing: .02em }
.badge-crm { font-size: .75rem; font-weight: 700; padding: .4rem .7rem; border-radius: .5rem; letter-spacing: .02em }

/* ----- Bolder table headers and rows ----- */
.table { font-size: .9375rem; color: var(--color_body_text,#2d3142) }
.table thead th { font-size: .75rem; font-weight: 600; color: var(--color_heading,#1a1a2e); text-transform: uppercase; letter-spacing: .04em; padding: 1rem 1.25rem; background: linear-gradient(135deg,var(--color_surface2,#f8f9fc) 0%,var(--color_body_bg,#f1f3f8) 100%); border-bottom: 2px solid var(--color_heading,#1a1a2e) }
.table tbody td { padding: 1rem 1.25rem; font-size: .9375rem; color: var(--color_body_text,#2d3142); border-color: var(--color_border,#e8eaf0); font-weight: 400 }
.table tbody tr:hover { background: var(--color_surface2,#f1f3f8) }

/* ----- Page hero (taller, bolder) ----- */
.crm-page-hero, .page-hero { min-height: 110px; padding: 24px 28px; margin-bottom: 28px; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(15,23,42,.06); background: linear-gradient(135deg,#ffffff 0%,#f8f9fc 100%); border: 1px solid #e8eaf0; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.crm-page-hero .page-hero__title, .page-hero__title { font-size: 1.5rem!important; font-weight: 800; color: #1a1a2e; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 6px }
.crm-page-hero .page-hero__subtitle, .page-hero__subtitle { font-size: .9375rem; font-weight: 500; color: #5a6378 }
.page-hero__icon { width: 56px!important; height: 56px!important; font-size: 1.25rem!important; border-radius: 14px!important; box-shadow: 0 6px 16px rgba(0,0,0,.18)!important; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.page-hero__left { display: flex; align-items: center; gap: 16px; min-width: 0 }
.page-hero__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0 }
.page-hero__text { min-width: 0 }
.crm-page-hero .page-hero__badge, .page-hero__badge { font-size: .75rem!important; font-weight: 700; padding: 8px 16px!important; border-radius: 8px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap }

/* ----- Page title improvements ----- */
.crm-page-title { font-size: 1.5rem; font-weight: 800; color: #1a1a2e; letter-spacing: -.02em; line-height: 1.2 }
.text-uppercase.text-xxs, .text-xxs { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: #5a6378 }

/* ----- Settings card improvements ----- */
.settings-card { border: 1px solid #e9ecef; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(15,23,42,.04); background: #fff; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease }
.settings-card-link:hover .settings-card { border-color: #5e72e4; }
.settings-card .card-body { padding: 1.5rem }
.settings-card-icon { width: 56px; height: 56px; border-radius: .875rem; box-shadow: 0 6px 16px rgba(0,0,0,.18) }
.settings-card .card-title { font-size: 1.0625rem; font-weight: 700; color: #1a1a2e; margin-bottom: .5rem; letter-spacing: -.01em }
.settings-card .card-text { color: #5a6378; font-size: .875rem; line-height: 1.5; font-weight: 500 }
.settings-card-link:hover .settings-card { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 8px 24px rgba(96,165,250,.15) }

/* ----- Icon shapes (bigger, more refined) ----- */
.icon-shape { width: 56px!important; height: 56px!important; border-radius: 1rem!important; box-shadow: 0 6px 16px rgba(0,0,0,.15) }
.icon-shape i { font-size: 1.375rem!important; opacity: .9 }

/* ----- Back link improvements ----- */
.back-link { font-size: .875rem; font-weight: 600; color: #5a6378 }
.back-link:hover { color: #1a1a2e }
.back-link__arrow { width: 28px; height: 28px; font-size: 14px }

/* ----- Login/Register page improvements ----- */
.card-plain { border-radius: 1.25rem; box-shadow: 0 8px 32px rgba(0,0,0,.1); border: 0 }
.card-plain .card-header { padding: 2rem 2rem 0; background: transparent; border: 0 }
.card-plain .card-header h4 { font-size: 1.75rem; font-weight: 800; color: var(--color_heading,#1a1a2e); letter-spacing: -.02em; margin-bottom: .5rem }
.card-plain .card-header p { font-size: .9375rem; color: var(--color_muted,#5a6378); font-weight: 500 }
.card-plain .card-body { padding: 2rem }
.card-plain .card-footer { padding: 0 2rem 2rem; background: transparent; border: 0; text-align: center }
.card-plain .card-footer p { font-size: .9375rem; color: #5a6378; font-weight: 500 }

/* Navbar in login pages */
.navbar .nav-link { font-size: .875rem; font-weight: 600; color: #1a1a2e }
.navbar .nav-link:hover { color: #1a1a2e }
.navbar-brand { font-weight: 700; color: #1a1a2e }

/* ----- Alert improvements ----- */
.alert { font-size: .9375rem; font-weight: 600; border-radius: .75rem; padding: 1rem 1.25rem; border: 0 }
.alert-success { background: #d1fae5; color: #065f46; border-left: 4px solid #047857 }
.alert-danger { background: #fee2e2; color: #991b1b; border-left: 4px solid #b91c1c }
.alert-warning { background: #fef3c7; color: #92400e; border-left: 4px solid #d97706 }
.alert-info { background: #dbeafe; color: #1e40af; border-left: 4px solid #1d4ed8 }
.alert-danger-crm, .alert-success-crm, .alert-info-crm, .alert-warning-crm { font-size: .9375rem; font-weight: 600; border-radius: .75rem; padding: 1rem 1.25rem; border-left: 4px solid }

/* ----- Table responsive improvements ----- */
.table-responsive { border-radius: 1rem; overflow: hidden }
.table thead.table-light th { background: linear-gradient(135deg,#f8f9fc 0%,#e8eaf0 100%); color: #1a1a2e; font-weight: 600; border-bottom: 2px solid #1a1a2e }

/* ----- Page content area padding ----- */
.page-content { padding: 1.5rem 1.5rem 2rem }
.container-fluid.py-4 { padding-top: 1.5rem!important; padding-bottom: 2rem!important }

/* ----- Text dark for headings on light backgrounds ----- */
h1.text-dark, h2.text-dark, h3.text-dark, h4.text-dark, h5.text-dark, h6.text-dark { color: #1a1a2e!important }

/* ----- Footer improvements ----- */
.app-footer { background: #fff; border-top: 1px solid #e8eaf0; padding: 1rem 1.5rem; margin: 0 1.5rem 1rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.04) }
.app-footer__inner { color: #5a6378; font-size: .875rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center }
.app-footer__brand { color: #1a1a2e; font-weight: 700; display: flex; align-items: center; gap: 10px }
.app-footer__logo { height: 28px; width: auto; object-fit: contain }
.app-footer__name { font-size: .875rem; font-weight: 700; color: #1a1a2e }
.app-footer__copy { font-size: .8125rem; color: #5a6378; margin: 0 auto; text-align: center }

/* ----- Form switches ----- */
.form-switch .form-check-input { width: 2.5rem; height: 1.4rem; cursor: pointer; background-color: #e8eaf0; border: 0; transition: all .2s ease }
.form-switch .form-check-input:checked { background-color: #047857; border-color: #047857 }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px rgba(4,120,87,.15); border-color: #047857 }

/* ----- Navbar admin menu links ----- */
.admin-nav-menu .nav-link { font-size: .875rem; font-weight: 600; color: #2d3142; padding: .5rem .75rem; border-radius: .5rem; transition: all .2s ease }
.admin-nav-menu .nav-link:hover { background: #000; color: #fff; transform: translateY(-1px) }
.admin-nav-menu .nav-link.active { background: #1a1a2e; color: #fff; font-weight: 700 }
.admin-navbar { background: #fff; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.06) }

/* ----- Mobile sidebar link improvements ----- */
.mobile-sidebar-link { font-size: .9375rem; font-weight: 600; padding: 1rem 1.5rem; color: #2d3142; border-left: 3px solid transparent; transition: all .15s ease }
.mobile-sidebar-link:hover { background: #000; color: #1a1a2e; border-left-color: #1a1a2e }
.mobile-sidebar-link.active { background: linear-gradient(135deg,#1a1a2e 0%,#0f0f1f 100%); color: #fff; font-weight: 700; border-left-color: #1a1a2e }
.mobile-sidebar-link i { color: #5a6378; font-size: 1.25rem; width: 24px }
.mobile-sidebar-link.active i { color: #fff }
.mobile-sidebar-heading { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #5a6378; padding: 1rem 1.5rem .35rem; margin-top: .5rem }
.mobile-sidebar-brand { font-weight: 700; font-size: 1.125rem; color: #1a1a2e }

/* ----- Topbar wallet display improvements ----- */
.wallet-display { padding: 8px 14px; background: #fff; border-radius: .75rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); border: 1px solid #e8eaf0 }
.wallet-display:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1) }
.balance-text { font-weight: 600; font-size: 1rem; color: #1a1a2e }
.deposit-button { padding: 10px 24px; font-size: .875rem; font-weight: 700; border-radius: .75rem; background: #1a1a2e; color: #fff; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(26,26,46,.25) }
.deposit-button:hover { background: #0f0f1f; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26,26,46,.35) }

/* ----- Time bar improvements ----- */
.time-bar-section { background: linear-gradient(135deg,#ffffff 0%,#f8f9fc 100%); border-radius: 1rem; margin: 12px 16px 0; padding: 10px 20px; box-shadow: 0 2px 8px rgba(0,0,0,.04); border: 1px solid #e8eaf0 }
.platform-text { font-weight: 600; color: #1a1a2e; font-size: .875rem; letter-spacing: .01em }
.time-date { color: #5a6378; font-size: .875rem; font-weight: 500 }
.timezone-item { font-size: .8125rem; color: #5a6378; font-weight: 500 }
.tz-time { color: #1a1a2e; font-weight: 600 }

/* ----- Settings hub card improvements ----- */
.settings-hub .crm-page-title { font-size: 1.75rem; color: #1a1a2e; font-weight: 800; letter-spacing: -.02em }

/* ----- Sidebar nav link improvements ----- */
.sidenav-nav-link { padding: .75rem 1rem; font-size: .9375rem; font-weight: 500; color: #2d3142; border-radius: .5rem; margin: 0 .5rem; transition: all .15s ease }
.sidenav-nav-link:hover { background: #f1f3f8; color: #1a1a2e }
.sidenav-nav-link.active { background: linear-gradient(135deg,#1a1a2e 0%,#0f0f1f 100%); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(26,26,46,.2) }
.sidenav-nav-link.active i { color: #fff }
.sidenav-heading { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #5a6378; padding: .75rem 1.5rem .35rem; margin-top: .5rem }

/* ----- Stat card top bar gradient ----- */
.stat-card::before { background: linear-gradient(135deg,#1a1a2e 0%,#0f0f1f 100%)!important; height: 4px!important }

/* ----- Custom dropdown ----- */
.custom-dropdown { font-size: .9375rem; padding: .625rem 2.25rem .625rem .875rem; border: 1.5px solid #d8dce5; border-radius: .625rem; background-color: #fff; transition: all .2s ease }
.custom-dropdown:hover { border-color: #1a1a2e }
.custom-dropdown-options { position: absolute; background: #fff; border: 1px solid #e8eaf0; border-radius: .75rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 9999; max-height: 250px; overflow-y: auto; margin-top: 4px; min-width: 100% }
.custom-dropdown-option { padding: .625rem 1rem; font-size: .875rem; font-weight: 500; color: #2d3142; cursor: pointer; transition: background .15s ease }
.custom-dropdown-option:hover { background: #f1f3f8 }
.custom-dropdown-option.active { background: #1a1a2e; color: #fff; font-weight: 700 }

/* ----- Navbar (admin/agent) ----- */
.admin-navbar-bg { background: #fff!important; border: 1px solid #e8eaf0; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.06) }
.admin-navbar { padding: 6px 12px; min-height: 50px }

/* ----- Table card (outer wrapper) ----- */
.table-card { border-radius: 1rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(15,23,42,.04); background: #fff; transition: all .25s ease }
.table-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1) }

/* ----- Logo responsive ----- */
.logo-responsive { max-height: 120px; width: auto }

/* ----- KYC upload box improvements ----- */
.upload-box, .upload-box-large { border: 2px dashed #cbd5e1; border-radius: 1rem; padding: 2rem; text-align: center; background: #f8f9fc; transition: all .2s ease; cursor: pointer }
.upload-box:hover, .upload-box-large:hover { border-color: #1a1a2e; background: #f1f3f8 }

/* ----- Action buttons in tables ----- */
.btn.btn-outline-info { color: #0e7490; border-color: #0e7490; font-weight: 700 }
.btn.btn-outline-info:hover { background: #0e7490; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14,116,144,.25) }
.btn.btn-outline-danger { color: #b91c1c; border-color: #b91c1c; font-weight: 700 }
.btn.btn-outline-danger:hover { background: #b91c1c; color: #fff; transform: translateY(-1px) }

/* ----- Status badge (tickets page) ----- */
.status-badge { font-size: .75rem; font-weight: 700; padding: 6px 16px; border-radius: 25px; letter-spacing: .02em }

/* ----- Custom checkbox ----- */
.custom-checkbox { width: 18px; height: 18px; border: 2px solid #cbd5e1; border-radius: 4px; cursor: pointer; transition: all .15s ease }
.custom-checkbox:checked { background-color: #047857; border-color: #047857 }

/* ----- Page links ----- */
a { color: #1e40af; font-weight: 500 }
a:hover { color: #1e3a8a }

/* ----- Empty state ----- */
.empty-state, .loading-state, .error-state { padding: 3rem 1.5rem; text-align: center }
.empty-state i, .loading-state i, .error-state i { font-size: 56px; color: #cbd5e1; margin-bottom: 1rem }
.empty-state p, .loading-state p, .error-state p { font-size: 1rem; color: #5a6378; font-weight: 400 }

/* ----- Margin and padding improvements ----- */
.mb-0 { margin-bottom: 0!important }
.mb-1 { margin-bottom: .25rem!important }
.mb-2 { margin-bottom: .5rem!important }
.mb-3 { margin-bottom: 1rem!important }
.mb-4 { margin-bottom: 1.5rem!important }
.mb-5 { margin-bottom: 2rem!important }

/* ============================================================
   USER NAVBAR (Reference header design � replicated exactly)
   ============================================================ */
.user-navbar-root { background-color: var(--color_body_bg,#f3f3f3); box-sizing: border-box; overflow: visible; padding: .35rem 24px .5rem; width: 100% }
.user-navbar-bg { background: #fff !important; border: 1px solid #e9ecef; border-radius: .75rem }
.user-navbar-inner { padding: .25rem .5rem; background: #fff }
.user-navbar-inner-bg { background: #fff }
.user-navbar-username-rail { display: flex; align-items: center; min-width: 0 }
.user-navbar-desktop-name-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.user-navbar-desktop-name { color: #111827; font-size: 1rem; font-weight: 700; max-width: 14rem }

/* Balance toolbar wrapper (wallet + deposit button row) */
.balance-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap }
.wallet-deposit-btn { font-size: .75rem; font-weight: 600; padding: .35rem .75rem; border-radius: .5rem; background-color: #000; color: #fff !important; border: 0; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; transition: opacity .15s ease }
.wallet-deposit-btn:hover { opacity: .85; color: #fff !important }

/* User profile/avatar circle buttons (dark mode, bell, user) */
.user-profile-wrapper { display: inline-flex; position: relative; align-items: center; justify-content: center }
.user-avatar-circle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; border-radius: 50%; background-color: #fff; border: 1px solid #d0d0d0; color: #6b7280; font-size: 1rem; transition: all .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.04) }
.user-avatar-circle i { font-size: 1.1rem; line-height: 1 }
.user-avatar-circle:hover { background-color: #000; border-color: #000; color: #fff }
.user-avatar-circle.kyc-pending { background-color: #fffbeb; border-color: #f59e0b; color: #f59e0b }
.user-avatar-circle.kyc-verified { background-color: #ecfdf5; border-color: #10b981; color: #10b981 }
.user-avatar-circle.kyc-rejected { background-color: #fef2f2; border-color: #ef4444; color: #ef4444 }
.user-menu-button { padding: .35rem .45rem !important; display: flex; align-items: center; background: transparent; border: 0; color: #212529; cursor: pointer; text-decoration: none; transition: opacity .15s ease }
.user-menu-button:hover { opacity: .75 }
.user-menu-button:focus { outline: none }

/* Time bar (reference design with crm-neon-chrome) */
.time-bar-section { padding: 12px 16px 0 }
.time-bar { background: #fff; border-radius: 16px; margin-bottom: 8px; padding: 10px 20px; box-shadow: 0 2px 8px rgba(0,0,0,.04) }
.time-bar-bg { background: #fff !important }
.time-bar-inner { padding: 0; background: #fff }
.time-bar-inner-bg { background: #fff }
.time-bar-left { display: flex; align-items: center; gap: 12px }
.time-bar-right { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap }
.platform-text { font-weight: 600; color: #344767; font-size: .8125rem }
.time-date { color: #64748b; font-size: .8125rem; font-weight: 500 }
.timezone-item { font-size: .8125rem; color: #64748b; font-weight: 500; display: inline-flex; align-items: center; gap: .25rem }
.tz-time { color: #344767; font-weight: 600 }

/* Top section logo */
.top-section { background: transparent; padding: 16px 0 12px }
.logo-container .company-logo { height: 90px; width: auto; object-fit: contain }
.button-group { display: flex; align-items: center; gap: 12px }

/* Navbar (reference structure) */
.navbar-section { background-color: var(--color_body_bg,#f3f3f3); box-sizing: border-box; overflow: visible; padding: 0; width: 100% }
.navbar-main { border-radius: .75rem; position: relative; z-index: 1; background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) }
.navbar-compact { min-height: 42px }
.navbar-inner { padding: .25rem .5rem }
.crm-neon-chrome { transition: box-shadow .22s ease, border-color .22s ease }
.crm-neon-chrome:hover { box-shadow: 0 0 0 1px rgba(94,114,228,.18), 0 0 8px rgba(94,114,228,.1), 0 0 24px rgba(94,114,228,.15) !important }

/* Admin nav menu (left side desktop nav) */
.admin-nav-menu { flex: 1; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none }
.admin-nav-menu::-webkit-scrollbar { display: none }
.admin-nav-menu .navbar-nav { list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; gap: .125rem; justify-content: flex-start }
.admin-nav-menu .nav-item { display: flex; align-items: center }
.admin-nav-menu .nav-link { display: flex; align-items: center; gap: 4px; border-radius: .5rem; color: #111827 !important; padding: .35rem .45rem !important; transition: all .2s ease; white-space: nowrap; font-size: .9375rem; font-weight: 600; text-decoration: none; background: transparent; line-height: 1.4 }
.admin-nav-menu .nav-link i { color: #6b7280 !important; font-size: 18px; transition: color .2s ease }
.admin-nav-menu .nav-link span { font-size: .875rem }
.admin-nav-menu .nav-link:hover, .admin-nav-menu .nav-link:focus { background-color: #000; color: #f1f5f9 !important }
.admin-nav-menu .nav-link:hover i, .admin-nav-menu .nav-link:focus i { color: #cbd5e1 !important }
.admin-nav-menu .nav-link.active { background-color: #000; color: #f1f5f9 !important; font-weight: 700 }
.admin-nav-menu .nav-link.active i { color: #f1f5f9 !important }
.admin-nav-menu .nav-link.active:hover { background-color: #000 }

/* Icon nav list (right side) */
.icon-nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap }
.icon-nav-list .nav-item { display: flex; align-items: center }
.icon-nav-list .user-menu-item { flex-shrink: 0; display: flex; align-items: center }

/* Hamburger button (mobile) */
.admin-hamburger-btn { display: none; background: none; border: none; padding: 10px 14px; cursor: pointer; color: #6b7280; font-size: 22px; border-radius: .75rem; transition: all .15s ease; flex-shrink: 0; align-items: center; justify-content: center }
.admin-hamburger-btn:hover { background-color: rgba(0,0,0,.05); color: #344767 }
@media (max-width: 991px) { .admin-hamburger-btn { display: flex } }

/* Mobile sidebar (reference design) */
.mobile-sidebar { background-color: #fff; box-shadow: 2px 0 10px rgba(0,0,0,.1); height: 100vh; left: -100%; max-width: 85vw; overflow-y: auto; position: fixed; top: 0; transition: left .3s ease; width: 280px; z-index: 1050 }
.mobile-sidebar.open { left: 0 }
.mobile-sidebar-header { align-items: center; border-bottom: 1px solid #e9ecef; display: flex; justify-content: flex-end; padding: 1.25rem 1.5rem }
.mobile-sidebar-nav { list-style: none; margin: 0; padding: 0 }
.mobile-sidebar-item { border-bottom: 1px solid #f0f0f0 }
.mobile-sidebar-link { padding: 1rem 1.5rem; text-decoration: none; transition: all .2s ease; color: #111827; display: flex; align-items: center; font-size: 1rem; font-weight: 600 }
.mobile-sidebar-link i { text-align: center; width: 24px; color: #6b7280; margin-right: 0; font-size: 1.25rem }
.mobile-sidebar-link:hover { background-color: #000; color: #212529 }
.mobile-sidebar-link.router-link-active, .mobile-sidebar-link.active { background-color: #000; color: #f1f5f9 !important; font-weight: 700 }
.mobile-sidebar-link.router-link-active i, .mobile-sidebar-link.active i { color: #f1f5f9 }
.mobile-sidebar-link.text-danger { color: #ef4444 }
.mobile-sidebar-link.text-danger:hover { background-color: rgba(239,68,68,.08); color: #ef4444 }

/* App modal close (used in mobile sidebar) */
.app-modal-close { align-items: center; background: transparent; border: 2px solid #ef4444; border-radius: 50%; box-sizing: border-box; cursor: pointer; display: inline-flex; flex-shrink: 0; justify-content: center; margin: 0; padding: 0; transition: background-color .2s ease, transform .15s ease, opacity .2s ease; -webkit-tap-highlight-color: transparent; line-height: 0 }
.app-modal-close:hover:not(:disabled) { background-color: rgba(239,68,68,.12) }
.app-modal-close:active:not(:disabled) { transform: scale(.96) }
.app-modal-close:focus-visible { outline: 2px solid rgba(239,68,68,.45); outline-offset: 2px }
.app-modal-close:disabled { cursor: not-allowed; opacity: .45 }
.app-modal-close--sm { height: 2rem; width: 2rem }
.app-modal-close--sm .app-modal-close__icon { height: 12px; width: 12px }
.app-modal-close--inline { position: static }
.app-modal-close__icon { display: block; flex-shrink: 0 }

/* Wallet display (reused in balance toolbar) */
.wallet-display { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff; border-radius: 12px; cursor: pointer; transition: box-shadow .15s; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.06); border: 1px solid #e9ecef }
.wallet-display:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1) }
.wallet-icon-wrapper { display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 16px }
.wallet-icon { width: 20px; height: 20px }
.balance-text { font-weight: 600; font-size: .9375rem; color: var(--fx-heading, #1a1a2e) }

/* Responsive */
@media (max-width: 991.98px) {
    .user-navbar-root { padding: .35rem 12px .5rem }
    .user-navbar-desktop-name-wrap { display: none !important }
    .navbar-section { padding: .35rem 12px .5rem }
    .navbar-main .user-navbar-inner { flex-wrap: wrap }
}
@media (max-width: 575.98px) {
    .user-navbar-root { padding: .25rem 8px .5rem }
    .button-group { gap: .5rem }
    .user-avatar-circle { height: clamp(30px,8vw,36px); min-width: clamp(30px,8vw,36px); width: clamp(30px,8vw,36px) }
    .user-avatar-circle i, .user-menu-button i { font-size: clamp(.85rem,2.5vw + .5rem,1rem) !important }
    .user-menu-button { padding: .35rem .4rem !important }
}
@media (max-width: 400px) {
    .user-menu-button { padding: .35rem .4rem !important }
}

/* Dark mode overrides for new components */
body.dark-version .user-avatar-circle { background-color: #334155; border-color: #475569; color: #cbd5e1 }
body.dark-version .user-avatar-circle:hover { background-color: #475569; border-color: #64748b; color: #f1f5f9 }
body.dark-version .user-avatar-circle.kyc-pending { background-color: rgba(251,191,36,.12); border-color: rgba(251,191,36,.5); color: #fbbf24 }
body.dark-version .user-avatar-circle.kyc-verified { background-color: rgba(52,211,153,.12); border-color: rgba(52,211,153,.5); color: #22c55e }
body.dark-version .user-avatar-circle.kyc-rejected { background-color: rgba(248,113,113,.12); border-color: rgba(248,113,113,.5); color: #f87171 }
body.dark-version .admin-nav-menu .nav-link { color: #cbd5e1 !important }
body.dark-version .admin-nav-menu .nav-link i { color: #94a3b8 !important }
body.dark-version .admin-nav-menu .nav-link:hover { background-color: #000; color: #f1f5f9 !important }
body.dark-version .admin-nav-menu .nav-link:hover i { color: #cbd5e1 !important }
body.dark-version .admin-nav-menu .nav-link.active { background-color: #000; color: #f1f5f9 !important }
body.dark-version .user-navbar-bg { background-color: #1e293b !important; border-color: #334155 }
body.dark-version .navbar-main { background-color: #1e293b !important }
body.dark-version .wallet-display { background-color: #1e293b; border-color: #334155 }
body.dark-version .balance-text { color: #e2e8f0 }
body.dark-version .wallet-deposit-btn { background-color: #fff; color: #000 !important }
body.dark-version .wallet-deposit-btn:hover { background-color: #f1f5f9; color: #000 !important }
body.dark-version .time-bar, body.dark-version .time-bar-inner { background-color: #1e293b }
body.dark-version .platform-text, body.dark-version .time-date, body.dark-version .tz-time, body.dark-version .timezone-item { color: #cbd5e1 }
body.dark-version .mobile-sidebar { background-color: #1e293b }
body.dark-version .mobile-sidebar-link { color: #cbd5e1 }
body.dark-version .mobile-sidebar-link:hover { background-color: #000; color: #f1f5f9 }
body.dark-version .mobile-sidebar-link.router-link-active, body.dark-version .mobile-sidebar-link.active { background-color: #000; color: #f1f5f9 }

/* ============================================================
   WALLET PAGE (Reference design � wallet cards)
   ============================================================ */

/* Wallet action cards grid */
.wallet-cards-grid { row-gap: 1.5rem !important; column-gap: 1.5rem !important }

/* Wallet action card */
.wallet-card-link { display: block; color: inherit }
.wallet-card-link:hover { color: inherit; text-decoration: none }
.wallet-card { background: #fff; border-radius: 1rem; height: 100%; min-height: 180px; padding: 1.75rem 1.5rem; position: relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,.04); display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem }
.wallet-card:hover { transform: translateY(-3px); border-color: #3b82f6; box-shadow: 0 12px 28px rgba(59,130,246,.18) }
.wallet-card-icon { align-items: center; border-radius: 14px; color: #fff; display: inline-flex; font-size: 1.35rem; height: 52px; justify-content: center; margin-bottom: 0.5rem; width: 52px; box-shadow: 0 6px 16px rgba(0,0,0,.12); transition: transform .25s ease }
.wallet-card:hover .wallet-card-icon { transform: scale(1.08) }
.wallet-card-icon--primary { background: linear-gradient(135deg,#3b82f6,#2563eb) }
.wallet-card-icon--danger { background: linear-gradient(135deg,#ef4444,#dc2626) }
.wallet-card-icon--success { background: linear-gradient(135deg,#10b981,#059669) }
.wallet-card-icon--info { background: linear-gradient(135deg,#0ea5e9,#0284c7) }
.wallet-card-icon--warning { background: linear-gradient(135deg,#f59e0b,#d97706) }
.wallet-card-icon--secondary { background: linear-gradient(135deg,#64748b,#475569) }
.wallet-card-title { color: #1a1a2e; font-size: 1.125rem; font-weight: 700; margin: 0; letter-spacing: -.01em; line-height: 1.3 }
.wallet-card-desc { color: #5a6378; font-size: .8125rem; font-weight: 500; margin: 0; line-height: 1.4; flex-grow: 1 }
.wallet-card-arrow { color: #6b7280; font-size: .875rem; position: absolute; right: 1.5rem; top: 1.75rem; transition: transform .2s ease, color .2s ease }
.wallet-card-link:hover .wallet-card-arrow { color: #3b82f6; transform: translate(4px) }

/* Wallet summary cards (balance, deposits, etc.) */
.wallet-summary-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 2px 8px rgba(0,0,0,.04) }
.wallet-summary-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08) }
.wallet-summary-card__icon { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.15rem; box-shadow: 0 4px 12px rgba(0,0,0,.12) }
.wallet-summary-card--primary .wallet-summary-card__icon { background: linear-gradient(135deg,#3b82f6,#2563eb) }
.wallet-summary-card--success .wallet-summary-card__icon { background: linear-gradient(135deg,#10b981,#059669) }
.wallet-summary-card--danger .wallet-summary-card__icon { background: linear-gradient(135deg,#ef4444,#dc2626) }
.wallet-summary-card--warning .wallet-summary-card__icon { background: linear-gradient(135deg,#f59e0b,#d97706) }
.wallet-summary-card__body { display: flex; flex-direction: column; min-width: 0; flex: 1 }
.wallet-summary-card__label { color: #5a6378; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.2 }
.wallet-summary-card__value { color: #1a1a2e; font-size: 1.375rem; font-weight: 800; line-height: 1.2; margin-top: 4px; word-break: break-word }

/* Dark mode wallet cards */
body.dark-version .wallet-card { background-color: #1e293b; border-color: #334155 }
body.dark-version .wallet-card:hover { border-color: #3b82f6; box-shadow: 0 12px 28px rgba(59,130,246,.25) }
body.dark-version .wallet-card-title { color: #f1f5f9 }
body.dark-version .wallet-card-desc { color: #94a3b8 }
body.dark-version .wallet-card-arrow { color: #94a3b8 }
body.dark-version .wallet-card-link:hover .wallet-card-arrow { color: #60a5fa }
body.dark-version .wallet-summary-card { background-color: #1e293b; border-color: #334155 }
body.dark-version .wallet-summary-card__label { color: #94a3b8 }
body.dark-version .wallet-summary-card__value { color: #f1f5f9 }

/* Dark mode wallet cards */
body.dark-version .wallet-card { background-color: #1e293b; border-color: #334155 }
body.dark-version .wallet-card:hover { border-color: #3b82f6; box-shadow: 0 8px 24px rgba(59,130,246,.2) }
body.dark-version .wallet-card-title { color: #f1f5f9 }
body.dark-version .wallet-card-arrow { color: #94a3b8 }
body.dark-version .wallet-card-link:hover .wallet-card-arrow { color: #60a5fa }

/* ============================================================
   PAGE-HERO ICON VARIANTS (secondary, warning, info)
   ============================================================ */
.page-hero__icon--secondary { background: linear-gradient(135deg, #344767 0%, #2d3a55 100%)!important; color: #fff!important }
.page-hero__icon--warning { background: linear-gradient(135deg, #fb6340 0%, #f56036 100%)!important; color: #fff!important }
.page-hero__icon--info { background: linear-gradient(135deg, #11cdef 0%, #38bdf8 100%)!important; color: #fff!important }

/* ============================================================
   TRADING-SECTION-CARD � Information & Tools landing cards
   ============================================================ */
.trading-section-card {
    position: relative; display: flex; align-items: center; gap: 16px;
    background: #fff; border: 1px solid #e9ecef; border-radius: 16px;
    padding: 24px 20px; transition: all 0.3s ease; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.trading-section-card:hover {
    transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    border-color: #5e72e4;
}
.trading-section-card-link { color: inherit; }
.trading-section-card-link:hover { color: inherit; }

.trading-section-card-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.375rem; color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}
.trading-section-card:hover .trading-section-card-icon { transform: scale(1.08) rotate(-5deg); }
.trading-section-card-icon--primary { background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%) }
.trading-section-card-icon--success { background: linear-gradient(135deg, #10b981 0%, #059669 100%) }
.trading-section-card-icon--secondary { background: linear-gradient(135deg, #344767 0%, #2d3a55 100%) }
.trading-section-card-icon--info { background: linear-gradient(135deg, #11cdef 0%, #38bdf8 100%) }
.trading-section-card-icon--warning { background: linear-gradient(135deg, #fb6340 0%, #f56036 100%) }
.trading-section-card-icon--danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) }

.trading-section-card-title {
    font-size: 1rem; font-weight: 800; color: #1a1a2e; margin: 0;
    line-height: 1.3; flex: 1; letter-spacing: -0.01em;
}
.trading-section-card-arrow {
    color: #64748b; font-size: 0.875rem; transition: all 0.3s ease;
    display: flex; align-items: center;
}
.trading-section-card:hover .trading-section-card-arrow {
    color: #5e72e4; transform: translateX(4px);
}

/* Dark mode */
body.dark-version .trading-section-card { background-color: #1e293b; border-color: #334155 }
body.dark-version .trading-section-card:hover { border-color: #3b82f6; box-shadow: 0 12px 32px rgba(59,130,246,.2) }
body.dark-version .trading-section-card-title { color: #f1f5f9 }
body.dark-version .trading-section-card-arrow { color: #94a3b8 }
body.dark-version .trading-section-card:hover .trading-section-card-arrow { color: #60a5fa }

/* ============================================================
   DARK MODE � CSS Variable Overrides (applies to all var(--fx-*) consumers)
   ============================================================ */
body.dark-version {
    --fx-dark: #f1f5f9;
    --fx-dark-rgb: 241,245,249;
    --fx-body-bg: #0f172a;
    --fx-white: #1e293b;
    --fx-body-color: #67748e;
    --fx-muted: #64748b;
    --fx-border: #334155;
    --fx-heading: #f1f5f9;
}
body.dark-version .header-wrapper { background: #0f172a; }
body.dark-version .bg-gray-100 { background-color: #0f172a !important; }
body.dark-version .container-fluid { background: transparent; }

/* Dashboard cards */
body.dark-version .dashboard-card { background-color: #1e293b; border-color: #334155; }
body.dark-version .dashboard-card:hover { border-color: #3b82f6; }
body.dark-version .dashboard-card .card-body { background: transparent; }
body.dark-version .dashboard-card table { background: transparent; }
body.dark-version .dashboard-card table thead th { background: transparent; color: #e2e8f0; border-color: #334155; }
body.dark-version .dashboard-card table tbody td { color: #cbd5e1; border-color: #334155; background: transparent; }
body.dark-version .dashboard-card table tbody tr:hover { background-color: #334155 !important; }

/* Fund card action items */
body.dark-version .fund-card .action-item { background: rgba(255,255,255,.1) !important; }
body.dark-version .fund-card .action-icon-circle { background-color: #1e293b !important; }
body.dark-version .fund-card .action-text { color: #e2e8f0 !important; }

/* News feed */
body.dark-version .news-item { background-color: #1e293b; }
body.dark-version .news-item:hover { background-color: #334155; }
body.dark-version .news-icon { background-color: #475569; }
body.dark-version .news-date { color: #94a3b8; }
body.dark-version .news-title { color: #e2e8f0; }

/* KYC banner */
body.dark-version .kyc-banner { background: linear-gradient(135deg, rgba(180,83,9,.15), rgba(245,158,11,.1)) !important; border-color: #92400e !important; }

/* Popup menus */
body.dark-version #desktopNav .popup-submenu { background: #1e293b; border-color: #334155; }
body.dark-version #desktopNav .popup-submenu .popup-link { color: #94a3b8; }
body.dark-version #desktopNav .popup-submenu .popup-link:hover { background: #334155; color: #f1f5f9; }
body.dark-version .wallet-popup { background: #1e293b; border-color: #334155; }
body.dark-version .wallet-popup .popup-link { color: #94a3b8; }
body.dark-version .wallet-popup .popup-link:hover { background: #334155; color: #f1f5f9; }
body.dark-version .information-tools-popup { background: #1e293b; border-color: #334155; }
body.dark-version .information-tools-popup .popup-link { color: #94a3b8; }
body.dark-version .information-tools-popup .popup-link:hover { background: #334155; color: #f1f5f9; }

/* Mobile sidebar */
body.dark-version .mobile-sidebar { background: #0f172a; }
body.dark-version .mobile-sidebar-link { color: #94a3b8; }
body.dark-version .mobile-sidebar-link:hover { background: #000; color: #f1f5f9; }
body.dark-version .mobile-sidebar-footer { border-color: #334155; }
body.dark-version .mobile-sidebar-close { color: #94a3b8; }

/* Mobile bottom nav (dark) */
body.dark-version .mobile-bottom-nav { background: rgba(15, 23, 42, 0.92); border-top-color: #334155; }
body.dark-version .mobile-bottom-nav-item { color: #94a3b8; }
body.dark-version .mobile-bottom-nav-item:hover,
body.dark-version .mobile-bottom-nav-item.active { color: #818cf8; }
body.dark-version .mobile-bottom-nav-item:active { background: rgba(129,140,248,.12); }
body.dark-version .mobile-bottom-nav-fab { border-color: #0f172a; }
body.dark-version .mobile-bottom-nav-item .badge { border-color: #0f172a; }

/* Desktop tabs */
body.dark-version .desktop-tabs { border-color: #334155; }
body.dark-version .desktop-tabs .nav-link { color: #94a3b8; }
body.dark-version .desktop-tabs .nav-link:hover { color: #f1f5f9; }
body.dark-version .desktop-tabs .nav-link.active { color: #f1f5f9; border-bottom-color: #f1f5f9; }

/* Stat icons */
body.dark-version .stat-icon { background: #334155; }

/* Market watch rows */
body.dark-version .market-row td { color: #cbd5e1; }
body.dark-version .market-row td strong { color: #f1f5f9 !important; }

/* KYC banner inline hardcoded colors */
body.dark-version .kyc-banner-amber { color: #fbbf24 !important; }
body.dark-version .kyc-banner-brown { color: #f59e0b !important; }

/* Balance text card */
body.dark-version .wallet-icon-wrapper { color: #94a3b8; }

/* Page hero client */
body.dark-version .crm-page-hero, body.dark-version .page-hero { background: linear-gradient(135deg,#1e293b 0%,#0f172a 100%); border-color: #334155; }
body.dark-version .crm-page-hero .page-hero__title, body.dark-version .page-hero__title { color: #f1f5f9; }
body.dark-version .crm-page-hero .page-hero__subtitle, body.dark-version .page-hero__subtitle { color: #94a3b8; }
body.dark-version .page-hero__badge { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.2); color: #34d399; }

/* ============================================================
   ADMIN-STYLE GLOW & HOVER � applied to non-admin pages
   ============================================================ */
/* Page hero glow */
.crm-page-hero, .page-hero { box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 22px rgba(15,23,42,.06), 0 0 0 1px rgba(59,130,246,.14), 0 0 24px rgba(59,130,246,.22), 0 0 42px rgba(56,189,248,.12) }

/* Dashboard card glow & hover (client layout only) */
.user-layout .dashboard-card { transition: transform .2s ease, box-shadow .2s ease }
.user-layout .dashboard-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 8px 24px rgba(96,165,250,.2) !important }

/* ============================================================
   MOBILE APP-LIKE POLISH (additive — does not modify existing rules)
   - Touch targets (44x44 minimum)
   - Form inputs (16px font to prevent iOS zoom, 44px min-height)
   - Tables (sticky first col, momentum scroll)
   - Modals (bottom-sheet drag handle, safe-area)
   - Bottom nav visibility + body padding
   - Card tap feedback
   - Typography
   ============================================================ */

/* Show bottom nav only on mobile */
@media (max-width: 767px) {
    .mobile-bottom-nav { display: flex; }

    /* Add bottom padding so content is not hidden under the bottom nav */
    .page-content,
    .container-fluid.py-4,
    .user-layout > .container-fluid,
    .user-layout .page-content,
    body.user-layout .page-content,
    .admin-layout .page-content,
    .admin-layout__main > .container-fluid,
    .admin-layout__main .page-content {
        padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }

    /* Hide on desktop explicit override (just in case) */
    .mobile-bottom-nav.desktop-only { display: none !important; }
}

/* ===== TOUCH TARGETS (44x44) ===== */
@media (max-width: 767px) {
    .btn,
    .btn-sm,
    .btn-lg,
    .btn-primary-crm,
    .btn-secondary-crm,
    .btn-add-deposit,
    .btn-add-withdrawal,
    .btn-apply-filters,
    .btn-action-circle,
    .nav-circle-btn,
    .admin-nav-icon-btn,
    .wallet-display,
    .wallet-nav-item,
    .wallet-nav-arrow,
    .user-name-dropdown,
    .mobile-nav-bar .icon-nav-list > li > a,
    .admin-nav-link,
    .doc-type-card,
    .upload-box,
    .leverage-btn,
    .transfer-type-card,
    .ticket-tabs .nav-link,
    .form-check-input,
    .form-switch .form-check-input,
    .nav-pills .nav-link,
    .nav-tabs .nav-link,
    .pagination .page-link,
    .dropdown-toggle,
    .navbar-toggler,
    .close,
    .modal-header-crm .btn-close,
    .icon-btn,
    .action-icon-circle {
        min-height: 44px;
    }
    .btn,
    .btn-sm,
    .btn-lg,
    .btn-primary-crm,
    .btn-secondary-crm,
    .btn-add-deposit,
    .btn-add-withdrawal,
    .btn-apply-filters,
    .nav-circle-btn,
    .admin-nav-icon-btn,
    .wallet-nav-arrow,
    .form-switch .form-check-input,
    .icon-btn,
    .action-icon-circle {
        min-width: 44px;
    }

    /* Form inputs - 16px font to prevent iOS zoom, 44px min-height */
    .form-control,
    .form-select,
    .form-control-crm,
    .form-select-crm,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px !important;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 10px;
        -webkit-appearance: none;
        appearance: none;
    }
    textarea { min-height: 88px; }

    /* Table rows - tappable, with momentum scroll and sticky first column */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    .table-crm tbody tr,
    .table-card .table tbody tr,
    .market-row {
        min-height: 48px;
    }
    .table-crm tbody td,
    .table-card .table tbody td {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Sticky first column in data tables */
    .table-crm thead th:first-child,
    .table-crm tbody td:first-child,
    .table-card .table thead th:first-child,
    .table-card .table tbody td:first-child {
        position: sticky;
        left: 0;
        background: inherit;
        z-index: 1;
        box-shadow: 1px 0 0 var(--fx-border);
    }
    body.dark-version .table-crm thead th:first-child,
    body.dark-version .table-crm tbody td:first-child,
    body.dark-version .table-card .table thead th:first-child,
    body.dark-version .table-card .table tbody td:first-child {
        background: #1e293b;
    }

    /* Modals - bottom sheet drag handle + safe area */
    .modal-wrapper-crm {
        padding: 0 !important;
        align-items: flex-end;
    }
    .modal-dialog-crm {
        border-radius: 18px 18px 0 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        max-height: 92vh;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -8px 30px rgba(0,0,0,.18);
        animation: crmModalSlideUp .3s cubic-bezier(.4,0,.2,1);
    }
    .modal-header-crm {
        position: relative;
        padding-top: 22px !important;
    }
    .modal-header-crm::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: #d1d5db;
    }
    .modal-body-crm {
        max-height: calc(92vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-footer-crm {
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }

    /* Card tap feedback (subtle active state) */
    .card,
    .card-crm,
    .dashboard-card {
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .card:active,
    .card-crm:active,
    .dashboard-card:active {
        transform: scale(.99);
    }
    .stat-card {
        -webkit-tap-highlight-color: transparent;
        transition: transform .15s ease;
    }
    .stat-card:active { transform: scale(.98); }

    /* Typography - body text minimum 14px, better line-height */
    body { font-size: 14px; line-height: 1.55; }
    .text-sm, small, .small { line-height: 1.5; }
    p, li, td, th, label, .form-label { letter-spacing: 0; }

    /* Header - compact hamburger and larger logo area */
    .top-section { padding: 10px 0 6px; }
    .navbar-toggler,
    .mobile-sidebar-toggle,
    .hamburger-btn,
    [data-bs-toggle="offcanvas"] {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        border-radius: 10px;
        -webkit-tap-highlight-color: transparent;
    }
    .brand-logo-img { max-width: 160px; }

    /* Tap feedback for any clickable element */
    a, button, .btn, [role="button"] {
        -webkit-tap-highlight-color: rgba(94,114,228,.12);
    }

    /* Prevent text-size adjust on orientation change (iOS) */
    html { -webkit-text-size-adjust: 100%; }

    /* Scroll behavior - momentum everywhere */
    .modal-body-crm,
    .mobile-sidebar,
    .page-content,
    .ticket-tabs,
    .table-responsive,
    .msg-thread,
    .dashboard-card,
    .card-body {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent horizontal overscroll on iOS */
    body, html { overscroll-behavior-x: none; }

    /* Action button feedback */
    .btn:active,
    .btn-primary-crm:active,
    .btn-secondary-crm:active,
    .btn-add-deposit:active,
    .btn-add-withdrawal:active,
    .btn-apply-filters:active {
        transform: scale(.97);
        transition: transform .1s ease;
    }
}

@keyframes crmModalSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Small phones - tighten bottom nav padding body offset */
@media (max-width: 575px) {
    .mobile-bottom-nav-item { min-width: 48px; font-size: 10px; }
    .mobile-bottom-nav-item i { font-size: 19px; }
    .modal-dialog-crm { max-height: 95vh; }
    .card .card-body { padding: 14px; }
    .card .card-header { padding: 14px; }
}

/* Desktop: ensure bottom nav is hidden even if markup is present */
@media (min-width: 768px) {
    .mobile-bottom-nav { display: none !important; }
    .page-content,
    .container-fluid.py-4 { padding-bottom: 1.5rem !important; }
}

/* Dark mode support for new components */
body.dark-version .form-control,
body.dark-version .form-select,
body.dark-version input,
body.dark-version textarea,
body.dark-version select {
    background-color: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}
body.dark-version .form-control::placeholder,
body.dark-version textarea::placeholder { color: #94a3b8; }
body.dark-version .form-control:focus,
body.dark-version .form-select:focus {
    background-color: #0f172a;
    color: #f1f5f9;
    border-color: #5e72e4;
}
body.dark-version .table-crm thead th:first-child,
body.dark-version .table-crm tbody td:first-child { background: #1e293b; }
body.dark-version .modal-header-crm::before { background: #475569; }

/* ===== WALLET QUICK ACTIONS - 3 PER ROW ===== */
.wallet-cards-grid > [class*="col-"] {
    flex: 0 0 auto;
}
@media (min-width: 768px) {
    .wallet-cards-grid > .col-12,
    .wallet-cards-grid > .col-sm-6,
    .wallet-cards-grid > .col-md-4,
    .wallet-cards-grid > .col-md-6,
    .wallet-cards-grid > .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}
@media (max-width: 767.98px) {
    .wallet-cards-grid > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


.stat-card-mini {
    background: var(--fx-white);
    border: 0;
    border-radius: 12px;
    box-shadow: var(--fx-shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
    height: 100%;
}
.stat-card-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.stat-card-mini__row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.stat-card-mini__icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}
.stat-card-mini__icon--primary { background: linear-gradient(135deg,#5e72e4,#825ee4); }
.stat-card-mini__icon--success { background: linear-gradient(135deg,#2dce89,#2dcecc); }
.stat-card-mini__icon--warning { background: linear-gradient(135deg,#fb6340,#fbb140); }
.stat-card-mini__icon--danger  { background: linear-gradient(135deg,#f5365c,#f56036); }
.stat-card-mini__copy { flex: 1; min-width: 0; }
.stat-card-mini__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8392ab;
    font-weight: 700;
    margin-bottom: 2px;
}
.stat-card-mini__value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--fx-dark, #252f40);
    line-height: 1.1;
}
@media (max-width: 575.98px) {
    .stat-card-mini__icon { width: 38px; height: 38px; font-size: 1rem; }
    .stat-card-mini__value { font-size: 1.15rem; }
    .stat-card-mini__label { font-size: 0.65rem; }
}
body.dark-version .stat-card-mini { background: #1e293b; }
body.dark-version .stat-card-mini__value { color: #f1f5f9; }
body.dark-version .stat-card-mini__label { color: #94a3b8; }