body {
    background: var(--background-primary);
    color: var(--text-primary);
}

.navbar-collapse {
    top: 56px;
    box-shadow: 0px 5px 5px 0 rgba(0, 0, 0, 0.2);
    z-index: 2;
    background: var(--surface);
}

.customer-nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.1);
    background: var(--surface);
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-toggler {
    height: 100%;
}

.dropdown-item {
    height: 40px;
    cursor: pointer;
    color: var(--text-primary);
}

.dropdown-item:hover {
    background: var(--surface-soft);
    color: var(--secondary);
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background: var(--primary);
    z-index: 10;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.sidebar .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar .dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

.sidebar.sidebar-static {
    position: absolute;
}

.sidebar .sidebar-logo {
    margin-right: 0;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
}

.sidebar-logo>img {
    width: 100px;
    cursor: pointer;
}

.sidebar i {
    margin-right: 15px;
    width: 25px;
    font-size: 18px;
}

.sidebar ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
}

.sidebar .nav-item {
    margin-right: 0;
    height: auto;
    justify-content: start;
    width: 100%;
}

.sidebar .nano-content {
    margin-top: 5px;
}

.sidebar .nano-content>ul {
    width: 200px;
    transition: width 300ms ease-in-out;
}

.sidebar .nano-content>ul li.label {
    font-size: 1rem;
    font-weight: bold;
    height: 30px;
    line-height: 40px;
    color: white;
    text-transform: uppercase;
}

.sidebar .nano-content>ul li.content {
    padding: 10px;
    color: #D8D8D8;
}

.sidebar .nano-content>ul li.content .progress {
    margin-top: 0.7em;
}

.dropdown-menu.show {
    display: block !important;
    margin-top: 5px !important;
    background: var(--surface);
    border: 1px solid var(--border-color);
}

.sidebar .nano-content>ul li>ul {
    display: none;
}

.sidebar .nano-content>ul li.open>ul {
    display: block;
}

.sidebar .nano-content>ul li>a {
    display: flex;
    cursor: pointer;
    color: white;
    padding: 1rem;
    line-height: 20px;
    border-bottom: none;
    background: none;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    font-weight: bold;
    width: 100%;
    font-size: 1rem;
    align-items: center;
}

.sidebar .nano-content>ul>li.nav-item.dropdown {
    display: block;
    height: auto;
}

.sidebar .nano-content>ul>li.nav-item.dropdown>.dropdown-toggle {
    display: flex;
    width: auto;
}

.sidebar .nano-content>ul li>a>.sidebar-collapse-icon {
    float: right;
    margin-right: 5px;
    margin-top: 5px;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}

.sidebar .nano-content>ul li>a>.badge {
    font-weight: normal;
    position: absolute;
    right: 45px;
}

.sidebar .nano-content>ul li:hover>a,
.sidebar .nano-content>ul li.active>a,
.sidebar .nano-content>ul li.open>a {
    background-color: var(--primary-darker);
    position: relative;
    color: white;
}

.sidebar .nano-content>ul li.open>a>.sidebar-collapse-icon {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}


html.rtl .sidebar .nano-content>ul>li.label,
html.rtl .sidebar .nano-content>ul>li.content,
html.rtl .sidebar .nano-content>ul>li>a {
    padding-left: 1rem;
    padding-right: 1rem;
}

.sidebar .nano-content>ul>li>ul>li.label,
.sidebar .nano-content>ul>li>ul>li.content,
.sidebar .nano-content>ul>li>ul>li>a {
    padding-left: 50px;
    padding-right: 15px;
    color: white !important;
}

.sidebar .nano-content>ul>li>ul>li.label,
.sidebar .nano-content>ul>li>ul>li.content,
.sidebar .nano-content>ul>li>ul>li>a:hover {
    color: white;
}

html.rtl .sidebar .nano-content>ul>li>ul>li.label,
html.rtl .sidebar .nano-content>ul>li>ul>li.content,
html.rtl .sidebar .nano-content>ul>li>ul>li>a {
    padding-left: 15px;
    padding-right: 45px;
}

.sidebar .nano-content>ul>li>ul>li.active>a,
.sidebar .nano-content>ul>li>ul>li.open>a,
.sidebar .nano-content>ul>li>ul>li>ul {
    background-color: var(--primary-darker);
    color: white;
}

.sidebar .nano-content>ul>li>ul>li>ul>li.label,
.sidebar .nano-content>ul>li>ul>li>ul>li.content,
.sidebar .nano-content>ul>li>ul>li>ul>li>a {
    padding-left: 67.5px;
    padding-right: 15px;
}

html.rtl .sidebar .nano-content>ul>li>ul>li>ul>li.label,
html.rtl .sidebar .nano-content>ul>li>ul>li>ul>li.content,
html.rtl .sidebar .nano-content>ul>li>ul>li>ul>li>a {
    padding-left: 15px;
    padding-right: 67.5px;
}

.sidebar .nano-content>ul>li>ul>li>ul>li.active>a,
.sidebar .nano-content>ul>li>ul>li>ul>li.open>a,
.sidebar .nano-content>ul>li>ul>li>ul>li>ul {
    background: var(--surface-soft);
}

.sidebar .nano-content>ul>li>ul>li>ul>li>ul>li.label,
.sidebar .nano-content>ul>li>ul>li>ul>li>ul>li.content,
.sidebar .nano-content>ul>li>ul>li>ul>li>ul>li>a {
    padding-left: 90px;
    padding-right: 15px;
}

html.rtl .sidebar .nano-content>ul>li>ul>li>ul>li>ul>li.label,
html.rtl .sidebar .nano-content>ul>li>ul>li>ul>li>ul>li.content,
html.rtl .sidebar .nano-content>ul>li>ul>li>ul>li>ul>li>a {
    padding-left: 15px;
    padding-right: 90px;
}

.navbar-nav {
    padding: 5px 0;
}

.nav-item {
    display: flex;
    cursor: pointer;
    font-size: 1rem;
    line-height: 20px;
    border-bottom: none;
    background: none;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    font-weight: bold;
    width: 100%;
    align-items: center;
    height: 100%;
    height: 48px;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}

.nav-link {
    font-size: 1rem !important;
    color: var(--text-primary);
}

.nav-item>i,
.nav-link>i {
    margin-right: 0.5rem;
    font-size: 1rem !important;
}

.dropdown-menu {
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    width: 100%;
    background: var(--surface);
}

.dropdown-menu>li {
    margin-right: 0;
}

.customer-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
    background: var(--background-primary);
}

.customer-content {
    padding: 1rem;
}

.customer-body .form-control,
.customer-body .form-select {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.customer-body .form-control:focus,
.customer-body .form-select:focus {
    border-color: var(--secondary);
    box-shadow: none;
    background: var(--surface);
    color: var(--text-primary);
}

.customer-body .modal-container,
.customer-body .modal-container>.card,
.customer-body .modal-container>.card>.card-header,
.customer-body .modal-container>.card>.card-body,
.customer-body .modal-container>.card>.card-footer {
    background: var(--surface);
    color: var(--text-primary);
}

.customer-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    padding: 5px 1rem;
}

.customers-loader-holder {
    display: none;
    flex-direction: column;
    position: fixed;
    z-index: 5 !important;
    height: 100%;
    width: 100%;
    background: var(--background-grey);
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    top: 0;
}

.customers-loader-holder>img {
    height: 70px;
    width: auto;
    object-position: center;
    object-fit: contain;
    margin-bottom: 1rem;
    margin-top: -50px;
}

.yellow-status {
    background-color: var(--secondary);
    color: var(--black) !important;
}

@media (min-width: 768px) {
    .customer-body {
        margin-left: 200px;
        justify-content: space-between;
        min-height: 100vh;
    }
}

.footer {
    background-color: var(--surface);
    color: var(--text-primary);
}

.footer .nav-link {
    color: var(--text-muted);
}

.footer .nav-link:hover {
    color: var(--secondary);
}

/* Customer redesign - clean customer app direction */
body {
    background: #f5f8fb;
    font-family: Inter, Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.customer-body {
    background: #f5f8fb;
    color: #111827;
}

.customer-content {
    max-width: 1360px;
    padding: 1.25rem 1rem 2rem;
}

.customer-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.customer-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.customer-page-header h1 {
    margin: 0;
    color: #101827;
    font-size: 2rem;
    line-height: 2.4rem;
    font-weight: 800;
}

.eyebrow,
.section-kicker {
    display: block;
    color: #64748b;
    font-weight: 700;
    font-size: 0.86rem;
    margin-bottom: 0.25rem;
}

.customer-header-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #475569;
    font-weight: 600;
}

.customer-nav-bar {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.customer-nav-bar .navbar-brand img {
    height: 36px;
}

.customer-nav-bar .nav-item a,
.customer-nav-bar .nav-link {
    color: #111827;
    font-weight: 700;
}

.customer-nav-bar .navbar-collapse {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
}

.customer-nav-bar .navbar-collapse ul {
    list-style: none;
}

.customer-nav-bar .navbar-collapse .nav-item {
    min-height: 46px;
    height: auto;
}

.customer-nav-bar .navbar-collapse .nav-item>a,
.customer-nav-bar .navbar-collapse .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.78rem 0.35rem;
    color: #111827 !important;
    text-decoration: none;
}

.customer-nav-bar .navbar-collapse .nav-item>a:hover,
.customer-nav-bar .navbar-collapse .nav-link:hover {
    color: #0f8b6d !important;
}

.sidebar {
    width: 212px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #102033 0%, #111c2b 62%, #0b1420 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 14px 0 40px rgba(15, 23, 42, 0.16);
}

.sidebar .sidebar-logo {
    justify-content: flex-start;
    padding: 1.4rem 1rem 1.2rem;
}

.sidebar-logo>img {
    width: 132px;
}

.sidebar .nano {
    height: 100%;
}

.sidebar .nano-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar .nano-content>ul {
    width: 212px;
}

.sidebar .nano-content>ul li>a {
    position: relative;
    min-height: 46px;
    padding: 0.85rem 1rem;
    margin: 0.18rem 0.7rem;
    border-radius: 8px;
    color: #e5edf7;
    font-size: 0.96rem;
    letter-spacing: 0;
    font-weight: 700;
}

.sidebar .nano-content>ul li:hover>a,
.sidebar .nano-content>ul li.active>a,
.sidebar .nano-content>ul li.open>a,
.sidebar .nano-content>ul li>a.active {
    background: linear-gradient(135deg, #0f8b6d, #076650);
    color: #ffffff;
    box-shadow: 0 12px 25px rgba(17, 148, 111, 0.24);
}

.sidebar .dropdown-menu,
.sidebar .dropdown-menu.show {
    position: static !important;
    transform: none !important;
    width: calc(100% - 1.4rem) !important;
    min-width: 0;
    margin: 0.2rem 0.7rem 0.45rem !important;
    padding: 0.35rem;
    max-height: 292px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(8, 18, 32, 0.98);
    border: 1px solid rgba(45, 212, 191, 0.18);
    border-radius: 8px;
    box-shadow: none;
}

.sidebar .dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0.58rem 0.75rem;
    border-radius: 6px;
    color: #f8fafc !important;
    font-weight: 850;
}

.sidebar .dropdown-item:hover,
.sidebar .dropdown-item:focus,
.sidebar .dropdown-item.active {
    background: linear-gradient(135deg, #0f8b6d, #076650);
    color: #ffffff !important;
}

.sidebar .dropdown-toggle.active,
.sidebar .dropdown-toggle.show {
    background: linear-gradient(135deg, #0f8b6d, #076650);
    color: #ffffff !important;
    box-shadow: 0 12px 25px rgba(17, 148, 111, 0.24);
}

.customer-nav-bar .dropdown-menu.show {
    background: #071522;
    border: 1px solid rgba(45, 212, 191, 0.2);
    box-shadow: 0 18px 35px rgba(8, 21, 34, 0.26);
}

.customer-nav-bar .dropdown-item {
    color: #f8fafc !important;
    font-weight: 850;
}

.customer-nav-bar .dropdown-item:hover,
.customer-nav-bar .dropdown-item:focus,
.customer-nav-bar .dropdown-item.active {
    background: #0f8b6d;
    color: #ffffff !important;
}

.customer-sidebar-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: auto 0.7rem 0.5rem;
    padding: 0.85rem;
    border: 1px solid rgba(226, 232, 240, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.customer-avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #11946f;
    color: #ffffff;
    font-weight: 800;
}

.customer-sidebar-profile-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.customer-sidebar-profile-copy span {
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.customer-sidebar-profile-copy small {
    color: #a9b7c7;
    font-size: 0.78rem;
}

.customer-sidebar-status {
    margin-left: auto;
    color: #94a3b8;
}

.customer-sidebar-status.is-active {
    color: #2dd4bf;
}

.bottom-nav {
    position: static;
    width: auto;
    margin: 0 0.7rem 0.85rem !important;
}

.sidebar .bottom-nav a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    color: #e5edf7;
    text-decoration: none;
    font-weight: 800;
}

.sidebar .bottom-nav a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.footer {
    background: transparent;
    border-top: 1px solid #e5e7eb;
    color: #64748b;
}

.footer img {
    max-height: 34px;
}

.footer .nav-link {
    color: #64748b;
    font-weight: 700;
}

.customer-body .button {
    min-width: 0;
    height: 48px;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    letter-spacing: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.customer-body .primary-button {
    background: linear-gradient(135deg, #11946f, #08795f) !important;
    color: #ffffff !important;
}

.customer-body .primary-button:hover {
    background: linear-gradient(135deg, #0d8062, #076650) !important;
    color: #ffffff !important;
}

.customer-body .outline-button {
    background: #ffffff;
    border: 1px solid #f59e0b;
    color: #d97706;
}

.customer-body .ghost-button {
    background: #ffffff;
    border: 1px solid #dbe3ee;
    color: #233046;
}

.customer-panel,
.customer-details-card,
.dashboard-info-holder,
.investment-holder,
.transactions-holder,
.investment-card,
.dashboard-quick-stats {
    background: #ffffff !important;
    border: 1px solid #e5e7eb;
    border-radius: 8px !important;
    color: #111827 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.customer-panel {
    padding: 1rem;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel-header h2 {
    margin: 0;
    color: #111827;
    font-size: 1.1rem;
    line-height: 1.4rem;
    font-weight: 800;
}

.panel-header a {
    color: #0f8b6d;
    font-weight: 800;
}

.account-status-holder {
    border-radius: 999px !important;
    padding: 0.3rem 0.8rem !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
}

.green-status {
    background: #dff7ec !important;
    color: #08795f !important;
}

.red-status {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.yellow-status {
    background: #fff3d5 !important;
    color: #b45309 !important;
}

.green-text {
    color: #0f8b6d !important;
}

.red-text {
    color: #dc2626 !important;
}

.customer-body .form-control,
.customer-body .form-select {
    height: 46px;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    border: 1px solid #dbe3ee;
}

.customer-body .form-control:focus,
.customer-body .form-select:focus {
    border-color: #11946f;
    box-shadow: 0 0 0 3px rgba(17, 148, 111, 0.12);
    background: #ffffff;
    color: #111827;
}

.customer-body .modal-container,
.customer-body .modal-container>.card,
.customer-body .modal-container>.card>.card-header,
.customer-body .modal-container>.card>.card-body,
.customer-body .modal-container>.card>.card-footer {
    background: #ffffff;
    color: #111827;
}

.customer-body .card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .customer-body {
        margin-left: 212px;
    }
}

@media (max-width: 767.98px) {
    .customer-content {
        padding: 1rem 0.75rem 1.25rem;
    }

    .customer-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .customer-page-header h1 {
        font-size: 1.55rem;
        line-height: 1.9rem;
    }

    .footer .nav {
        float: none !important;
    }
}

/* Direction 1 terminal redesign */
body {
    background: #030811;
    color: #e5f4ff;
}

.customer-body {
    background:
        radial-gradient(circle at 14% 4%, rgba(20, 184, 166, 0.14), transparent 28rem),
        radial-gradient(circle at 88% 0%, rgba(14, 165, 233, 0.1), transparent 34rem),
        linear-gradient(180deg, #050c16 0%, #071321 52%, #030811 100%);
    color: #e5f4ff;
}

.customer-content {
    max-width: 1480px;
    padding: 1.35rem 1.2rem 2rem;
}

.customer-page-header {
    padding: 0.5rem 0 0.75rem;
}

.customer-page-header h1 {
    color: #ffffff;
    font-size: clamp(2rem, 3vw, 3.5rem);
    line-height: 1.02;
    font-weight: 950;
}

.eyebrow,
.section-kicker,
.customer-header-meta {
    color: #8faac0;
}

.customer-header-meta {
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(9, 23, 38, 0.72);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.customer-nav-bar {
    background: rgba(3, 8, 17, 0.96);
    border-bottom: 1px solid rgba(94, 234, 212, 0.15);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}

.customer-nav-bar .container {
    min-height: 70px;
}

.customer-nav-bar .navbar-brand img {
    height: 40px;
}

.customer-nav-bar .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-height: 48px;
    border: 1px solid rgba(94, 234, 212, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.customer-nav-bar .navbar-toggler img {
    filter: invert(1);
    width: 22px;
}

.customer-nav-bar .navbar-collapse {
    background: #06101d;
    border-top: 1px solid rgba(94, 234, 212, 0.15);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
}

.customer-nav-bar .navbar-collapse .nav-item>a,
.customer-nav-bar .navbar-collapse .nav-link,
.customer-nav-bar .nav-item a,
.customer-nav-bar .nav-link {
    color: #e5f4ff !important;
}

.customer-nav-bar .navbar-collapse .nav-item>a:hover,
.customer-nav-bar .navbar-collapse .nav-link:hover {
    background: rgba(20, 184, 166, 0.12);
    color: #5eead4 !important;
}

.sidebar {
    width: 236px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.16), transparent 16rem),
        linear-gradient(180deg, #071321 0%, #081625 58%, #030811 100%);
    border-right: 1px solid rgba(94, 234, 212, 0.14);
    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.24);
}

.sidebar .sidebar-logo {
    padding: 1.55rem 1.25rem 1.15rem;
}

.sidebar-logo>img {
    width: 142px;
}

.sidebar .nano-content>ul {
    width: 236px;
    padding: 0 0.75rem;
}

.sidebar .nano-content>ul li>a,
.sidebar .nano-content>ul>li.nav-item.dropdown>.dropdown-toggle {
    min-height: 50px;
    margin-bottom: 0.35rem;
    padding: 0.78rem 0.85rem;
    border-radius: 8px;
    color: #c8d9e8;
    font-size: 0.94rem;
    font-weight: 850;
}

.sidebar .nano-content>ul li:hover>a,
.sidebar .nano-content>ul li.active>a,
.sidebar .nano-content>ul li.open>a,
.sidebar .nano-content>ul li>a.active {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(15, 118, 110, 0.42));
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.18), 0 14px 28px rgba(0, 0, 0, 0.18);
}

.sidebar i {
    color: inherit;
}

.dropdown-menu.show,
.sidebar .dropdown-menu.show {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid rgba(94, 234, 212, 0.18);
    background: #06101d;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.dropdown-item,
.dropdown-menu-item {
    color: #dcecff !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(20, 184, 166, 0.13);
    color: #5eead4 !important;
}

.customer-sidebar-profile {
    margin: 1rem 0.75rem 0;
    padding: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.customer-sidebar-profile-copy span {
    color: #ffffff;
}

.customer-sidebar-profile-copy small {
    color: #8faac0;
}

.customer-avatar {
    background: linear-gradient(135deg, #12b981, #0f766e);
    color: #ffffff;
}

.customer-sidebar-status {
    color: #5eead4;
}

.bottom-nav {
    margin-top: auto !important;
}

.footer {
    border-top: 1px solid rgba(94, 234, 212, 0.12);
    background: #030811;
}

.footer span,
.footer .nav-link {
    color: #8faac0 !important;
}

.footer .nav-link:hover {
    color: #5eead4 !important;
}

.customer-panel,
.investment-card,
.dashboard-quick-stats,
.customer-body .card {
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    background: rgba(9, 23, 38, 0.76) !important;
    color: #e5f4ff !important;
    border-radius: 8px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(18px);
}

.panel-header h2 {
    color: #ffffff;
    font-weight: 950;
}

.panel-header a,
.timeline-row a {
    color: #5eead4;
}

.green-status {
    background: rgba(20, 184, 166, 0.16) !important;
    color: #5eead4 !important;
}

.red-status {
    background: rgba(251, 113, 133, 0.16) !important;
    color: #fb7185 !important;
}

.yellow-status {
    background: rgba(251, 191, 36, 0.16) !important;
    color: #fbbf24 !important;
}

.green-text {
    color: #45e0bf !important;
}

.red-text {
    color: #fb7185 !important;
}

.customer-body .form-control,
.customer-body .form-select {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.customer-body .form-control:focus,
.customer-body .form-select:focus {
    border-color: rgba(94, 234, 212, 0.55);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.customer-body .form-control::placeholder {
    color: #8faac0;
}

.customer-body .modal-container,
.customer-body .modal-container>.card,
.customer-body .modal-container>.card>.card-header,
.customer-body .modal-container>.card>.card-body,
.customer-body .modal-container>.card>.card-footer {
    background: #071321 !important;
    color: #e5f4ff !important;
}

.customer-body .card-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

@media (min-width: 768px) {
    .customer-body {
        margin-left: 236px;
    }
}

@media (max-width: 767.98px) {
    .customer-content {
        padding: 1rem 0.75rem 1.5rem;
    }

    .customer-header-meta {
        width: 100%;
    }
}

/* Dark customer UI contrast fixes.
   Page-specific customer CSS is loaded after this file, so these selectors use
   higher specificity and !important to keep text readable on the dark theme. */
.customer-body .wallet-hero-main h2,
.customer-body .dashboard-quick-stats-value,
.customer-body .investment-card-header strong,
.customer-body .investment-details-holder strong,
.customer-body .investment-detail-heading strong,
.customer-body .investment-detail-grid strong,
.customer-body .investment-modal-summary strong,
.customer-body .order-info-holder strong,
.customer-body .wallet-transaction-main strong,
.customer-body .wallet-transaction-amount,
.customer-body .wallet-stat strong,
.customer-body .row-main strong,
.customer-body .timeline-row strong,
.customer-body .market-row strong,
.customer-body .market-row span,
.customer-body .row-metric strong,
.customer-body .panel-header h2 {
    color: #f8fbff !important;
}

.customer-body .wallet-hero-main p,
.customer-body .dashboard-quick-stats > span:not(.dashboard-quick-stats-value),
.customer-body .investment-card-header small,
.customer-body .investment-details-holder span,
.customer-body .investment-detail-grid span,
.customer-body .investment-modal-summary span,
.customer-body .secondary-text,
.customer-body .wallet-transaction-main small,
.customer-body .wallet-stat span:not(.wallet-stat-icon),
.customer-body .row-main small,
.customer-body .timeline-row small,
.customer-body .market-row small,
.customer-body .row-metric,
.customer-body .account-status-block,
.customer-body .withdraw-limit-text {
    color: #9fb6c8 !important;
}

.customer-body .investment-details-holder > div,
.customer-body .investment-detail-grid > div,
.customer-body .investment-modal-summary > div,
.customer-body .order-info-holder,
.customer-body .wallet-remarks,
.customer-body .empty-state {
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    color: #dcecff !important;
}

.customer-body .wallet-filter-tabs {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

.customer-body .wallet-filter-tabs button {
    color: #9fb6c8 !important;
}

.customer-body .wallet-filter-tabs button.active {
    background: rgba(94, 234, 212, 0.14) !important;
    color: #5eead4 !important;
    box-shadow: none !important;
}

.customer-body .wallet-transaction-list {
    gap: 0.7rem;
}

.customer-body .wallet-transaction-row {
    padding: 0.9rem !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055) !important;
    color: #f8fbff !important;
}

.customer-body .wallet-transaction-row:hover {
    background: rgba(94, 234, 212, 0.09) !important;
}

.customer-body .wallet-transaction-row:last-child {
    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
}

.customer-body .wallet-remarks {
    margin-top: 0.5rem;
}

.customer-body .wallet-balance-toggle {
    color: #9fb6c8 !important;
}

.customer-body .wallet-balance-toggle:hover,
.customer-body .wallet-balance-toggle:focus {
    background: rgba(94, 234, 212, 0.12) !important;
    color: #5eead4 !important;
}

.customer-body .customer-list-row,
.customer-body .timeline-row,
.customer-body .market-row {
    border-bottom-color: rgba(148, 163, 184, 0.12) !important;
}

.customer-body .customer-list-row:hover {
    background: rgba(94, 234, 212, 0.08) !important;
}

/* Doo mobile customer menu loads after brand CSS, so keep the final color rules here. */
body.brand-dooinvestment .doo-ledger-menu-dropdown {
    background: #ffffff !important;
    border: 1px solid #dfe3e8 !important;
    box-shadow: 0 18px 40px rgba(18, 24, 33, 0.14) !important;
}

body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item,
body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item span {
    color: #171a21 !important;
    -webkit-text-fill-color: #171a21 !important;
}

body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item i {
    color: #87909d !important;
    -webkit-text-fill-color: #87909d !important;
}

body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item:hover,
body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item:focus,
body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item.active {
    background: #fff1f1 !important;
    color: #e51616 !important;
    -webkit-text-fill-color: #e51616 !important;
}

body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item:hover span,
body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item:focus span,
body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item.active span,
body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item:hover i,
body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item:focus i,
body.brand-dooinvestment .doo-ledger-menu-dropdown .dropdown-item.active i {
    color: #e51616 !important;
    -webkit-text-fill-color: #e51616 !important;
}

/* Final Doo light-theme contrast repairs. Legacy dark customer rules use
   !important, so these keep Doo pages readable on white cards. */
body.brand-dooinvestment .customer-body,
body.brand-dooinvestment .customer-page-header h1,
body.brand-dooinvestment .panel-header h2,
body.brand-dooinvestment .featured-investment-header h2,
body.brand-dooinvestment .market-terminal-header h2,
body.brand-dooinvestment .investment-card-header strong,
body.brand-dooinvestment .investment-details-holder strong,
body.brand-dooinvestment .investment-detail-heading strong,
body.brand-dooinvestment .investment-detail-grid strong,
body.brand-dooinvestment .investment-modal-summary strong,
body.brand-dooinvestment .order-info-holder strong,
body.brand-dooinvestment .wallet-transaction-main strong,
body.brand-dooinvestment .wallet-transaction-amount,
body.brand-dooinvestment .wallet-stat strong,
body.brand-dooinvestment .row-main strong,
body.brand-dooinvestment .timeline-row strong,
body.brand-dooinvestment .market-row strong,
body.brand-dooinvestment .market-row span,
body.brand-dooinvestment .row-metric strong,
body.brand-dooinvestment .doo-ledger-panel h2,
body.brand-dooinvestment .doo-ledger-panel h3,
body.brand-dooinvestment .doo-ledger-panel strong,
body.brand-dooinvestment .doo-panel-header h2,
body.brand-dooinvestment .doo-snapshot-metrics strong,
body.brand-dooinvestment .doo-detail-item strong,
body.brand-dooinvestment .doo-performance-summary strong,
body.brand-dooinvestment .doo-performance-stat-row strong,
body.brand-dooinvestment .doo-request-row strong,
body.brand-dooinvestment .doo-withdraw-table-row strong,
body.brand-dooinvestment .doo-withdraw-table-row > span,
body.brand-dooinvestment .doo-withdraw-record-heading h3,
body.brand-dooinvestment .doo-dashboard-market-panel .market-terminal-header h2,
body.brand-dooinvestment .doo-dashboard-market-panel .market-quote-name strong {
    color: #171a21 !important;
    -webkit-text-fill-color: #171a21 !important;
}

body.brand-dooinvestment .eyebrow,
body.brand-dooinvestment .section-kicker,
body.brand-dooinvestment .customer-header-meta,
body.brand-dooinvestment .wallet-hero-main p,
body.brand-dooinvestment .dashboard-quick-stats > span:not(.dashboard-quick-stats-value),
body.brand-dooinvestment .investment-card-header small,
body.brand-dooinvestment .investment-details-holder span,
body.brand-dooinvestment .investment-detail-grid span,
body.brand-dooinvestment .investment-modal-summary span,
body.brand-dooinvestment .secondary-text,
body.brand-dooinvestment .wallet-transaction-main small,
body.brand-dooinvestment .wallet-stat span:not(.wallet-stat-icon),
body.brand-dooinvestment .row-main small,
body.brand-dooinvestment .timeline-row small,
body.brand-dooinvestment .market-row small,
body.brand-dooinvestment .row-metric,
body.brand-dooinvestment .account-status-block,
body.brand-dooinvestment .withdraw-limit-text,
body.brand-dooinvestment .doo-panel-header span,
body.brand-dooinvestment .doo-snapshot-metrics span,
body.brand-dooinvestment .doo-detail-item span,
body.brand-dooinvestment .doo-performance-summary span,
body.brand-dooinvestment .doo-performance-stat-row span,
body.brand-dooinvestment .doo-request-row small,
body.brand-dooinvestment .doo-withdraw-record-heading span,
body.brand-dooinvestment .doo-withdraw-table-head span,
body.brand-dooinvestment .doo-withdraw-table-row em,
body.brand-dooinvestment .doo-dashboard-market-panel .market-terminal-header span,
body.brand-dooinvestment .doo-dashboard-market-panel .market-live-strip,
body.brand-dooinvestment .doo-dashboard-market-panel .market-empty-state,
body.brand-dooinvestment .doo-dashboard-market-panel .market-quote-name small {
    color: #666f7f !important;
    -webkit-text-fill-color: #666f7f !important;
}

body.brand-dooinvestment .customer-panel,
body.brand-dooinvestment .investment-card,
body.brand-dooinvestment .dashboard-quick-stats,
body.brand-dooinvestment .customer-body .card,
body.brand-dooinvestment .investment-details-holder > div,
body.brand-dooinvestment .investment-detail-grid > div,
body.brand-dooinvestment .investment-modal-summary > div,
body.brand-dooinvestment .order-info-holder,
body.brand-dooinvestment .wallet-remarks,
body.brand-dooinvestment .empty-state,
body.brand-dooinvestment .wallet-transaction-row,
body.brand-dooinvestment .customer-header-meta,
body.brand-dooinvestment .doo-ledger-panel,
body.brand-dooinvestment .doo-performance-summary > div,
body.brand-dooinvestment .doo-performance-stat-row > div,
body.brand-dooinvestment .doo-detail-item,
body.brand-dooinvestment .doo-dashboard-market-panel .market-quote-row,
body.brand-dooinvestment .doo-dashboard-market-panel .market-empty-state {
    border-color: #dfe3e8 !important;
    background: #ffffff !important;
    color: #171a21 !important;
}

body.brand-dooinvestment .customer-header-meta {
    box-shadow: none !important;
}

body.brand-dooinvestment .customer-header-meta i {
    color: #e51616 !important;
    -webkit-text-fill-color: #e51616 !important;
}

body.brand-dooinvestment .doo-dashboard-market-panel .market-quote-price strong.tick-up,
body.brand-dooinvestment .doo-dashboard-market-panel .market-quote-price .positive,
body.brand-dooinvestment .green-text {
    color: #16b99f !important;
    -webkit-text-fill-color: #16b99f !important;
}

body.brand-dooinvestment .doo-dashboard-market-panel .market-quote-price strong.tick-down,
body.brand-dooinvestment .doo-dashboard-market-panel .market-quote-price .negative,
body.brand-dooinvestment .red-text {
    color: #e51616 !important;
    -webkit-text-fill-color: #e51616 !important;
}

body.brand-dooinvestment .doo-dashboard-market-panel .market-quote-price strong:not(.tick-up):not(.tick-down) {
    color: #171a21 !important;
    -webkit-text-fill-color: #171a21 !important;
}

body.brand-dooinvestment .green-status {
    background: #ecfdf3 !important;
    color: #087f3f !important;
    -webkit-text-fill-color: #087f3f !important;
}

body.brand-dooinvestment .yellow-status {
    background: #fff7df !important;
    color: #ad6a00 !important;
    -webkit-text-fill-color: #ad6a00 !important;
}

body.brand-dooinvestment .red-status {
    background: #fff2f2 !important;
    color: #e51616 !important;
    -webkit-text-fill-color: #e51616 !important;
}