@import url("fonts-poppins.css");

:root {
    --font-sans: 'Poppins';

    /* Dynasty Marketers — only these three brand colors */
    --brand-white: #FBF8F3; /* Chalk White */
    --brand-gold: #EA9F26;  /* Honey Brown */
    --brand-black: #181B1B; /* Obsidian Black */

    --brand-white-rgb: 251, 248, 243;
    --brand-gold-rgb: 234, 159, 38;
    --brand-black-rgb: 24, 27, 27;

    --brand-gold-light: var(--brand-gold);
    --brand-gold-dark: var(--brand-gold);
    --brand-dark: var(--brand-black);
    --brand-surface: var(--brand-black);
    --brand-on-gold: var(--brand-black);
    --brand-on-black: var(--brand-white);
    --brand-gradient: linear-gradient(135deg, var(--brand-black) 0%, var(--brand-gold) 100%);
    --brand-gradient-hover: var(--brand-gold);
    --brand-gradient-horizontal: linear-gradient(90deg, var(--brand-black) 0%, var(--brand-gold) 100%);

    /* Back-compat aliases used by older brand CSS */
    --brand-teal: var(--brand-gold);
    --brand-teal-light: var(--brand-gold);
    --brand-blue: var(--brand-gold);

    /* Light mode (default) */
    --app-bg: var(--brand-white);
    --app-surface: var(--brand-white);
    --app-surface-2: rgba(var(--brand-black-rgb), .04);
    --app-text: var(--brand-black);
    --app-text-2: var(--brand-black);
    --app-muted: rgba(var(--brand-black-rgb), .55);
    --app-border: rgba(var(--brand-black-rgb), .12);
    --app-accent: var(--brand-gold);
    --app-on-accent: var(--brand-black);
    --app-success: var(--brand-gold);
    --app-success-bg: rgba(var(--brand-gold-rgb), .12);
    --app-danger: var(--brand-black);
    --app-danger-bg: rgba(var(--brand-black-rgb), .08);
    --app-warning: var(--brand-gold);
    --app-warning-bg: rgba(var(--brand-gold-rgb), .12);
    --app-info: var(--brand-gold);
    --app-info-bg: rgba(var(--brand-gold-rgb), .12);
}

/* Auth screens stay on the dark trio */
body.auth-login-page,
body.client-login-page {
    --app-bg: var(--brand-black);
    --app-surface: var(--brand-black);
    --app-surface-2: rgba(var(--brand-white-rgb), .06);
    --app-text: var(--brand-white);
    --app-text-2: var(--brand-white);
    --app-muted: rgba(var(--brand-white-rgb), .62);
    --app-border: rgba(var(--brand-gold-rgb), .22);
    --app-accent: var(--brand-gold);
    --app-on-accent: var(--brand-black);
    --app-success: var(--brand-gold);
    --app-success-bg: rgba(var(--brand-gold-rgb), .16);
    --app-danger: var(--brand-white);
    --app-danger-bg: rgba(var(--brand-white-rgb), .10);
    --app-warning: var(--brand-gold);
    --app-warning-bg: rgba(var(--brand-gold-rgb), .16);
    --app-info: var(--brand-gold);
    --app-info-bg: rgba(var(--brand-gold-rgb), .16);
}

/* Dark mode — same three colors, inverted surfaces */
body.lightmode,
body.theme-1,
[data-theme="dark"] {
    --app-bg: var(--brand-black);
    --app-surface: var(--brand-black);
    --app-surface-2: rgba(var(--brand-white-rgb), .06);
    --app-text: var(--brand-white);
    --app-text-2: var(--brand-white);
    --app-muted: rgba(var(--brand-white-rgb), .62);
    --app-border: rgba(var(--brand-gold-rgb), .22);
    --app-accent: var(--brand-gold);
    --app-on-accent: var(--brand-black);
    --app-success: var(--brand-gold);
    --app-success-bg: rgba(var(--brand-gold-rgb), .16);
    --app-danger: var(--brand-white);
    --app-danger-bg: rgba(var(--brand-white-rgb), .10);
    --app-warning: var(--brand-gold);
    --app-warning-bg: rgba(var(--brand-gold-rgb), .16);
    --app-info: var(--brand-gold);
    --app-info-bg: rgba(var(--brand-gold-rgb), .16);
}

html,
body,
body.admin-ui,
body.client-portal,
#main-wrapper,
.page-wrapper {
    font-family: var(--font-sans) !important;
}

h1, h2, h3, h4, h5, h6,
p, label, small {
    font-family: var(--font-sans);
}

.btn,
button,
input,
select,
textarea {
    font-family: inherit;
}

/* Primary accents */
.color-primary,
.text-primary {
    color: var(--brand-gold) !important;
}

.bg-primary {
    background-color: var(--brand-gold) !important;
    fill: var(--brand-gold) !important;
}

.progress-bar-primary,
.progress-bar {
    background-color: var(--brand-gold) !important;
}

.btn-primary,
.card-title a.btn-primary,
.bank_tabpanel .btn-primary,
.btn-info {
    background: var(--brand-gold) !important;
    border: 1px solid var(--brand-gold) !important;
    color: var(--brand-on-gold) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
    color: var(--brand-on-gold) !important;
    filter: brightness(1.06);
}

.btn-outline-primary {
    color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
}

.btn-outline-primary:hover {
    background: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
    color: var(--brand-on-gold) !important;
}

.badge-primary {
    background-color: var(--brand-gold) !important;
    color: var(--brand-on-gold) !important;
}

a.link:hover,
a.text-info,
.text-info {
    color: var(--brand-gold) !important;
}

/* Sidebar & header */
.left-sidebar .scroll-sidebar .sidebar-nav>ul>li.active>a {
    background: var(--brand-gradient-horizontal) !important;
    color: var(--brand-white) !important;
}

.light_themesidebar .sidebar-nav>ul>li.active>a,
.light_themesidebar .sidebar-nav>ul>li.active>a i,
.light_themesidebar .sidebar-nav ul li a:hover,
.light_themesidebar .sidebar-nav ul li a:hover i {
    color: var(--brand-gold) !important;
}

.left-sidebar,
.sidebar-nav ul li a.active,
.sidebar-nav ul li a:hover {
    border-color: var(--brand-gold);
}

.topbar .navbar-light,
.header .top-navbar {
    border-bottom-color: rgba(var(--brand-gold-rgb), 0.22);
}

.row.page-titles h3.text-primary {
    color: var(--brand-gold) !important;
}

.form-control:focus,
select:focus,
input:focus,
textarea:focus {
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--brand-gold-rgb), 0.25) !important;
}

body.lightmode .wallet-cardd,
body.theme-1 .wallet-cardd,
[data-theme="dark"] .wallet-cardd {
    border-left-color: var(--brand-gold) !important;
}

body.lightmode .wallet-icon-wrap,
body.theme-1 .wallet-icon-wrap,
[data-theme="dark"] .wallet-icon-wrap {
    background: var(--brand-gradient) !important;
}

body.lightmode .wallet-commission-amount,
body.theme-1 .wallet-commission-amount,
[data-theme="dark"] .wallet-commission-amount,
body.lightmode .stat-digit.color-primary,
body.theme-1 .stat-digit.color-primary {
    color: var(--brand-gold) !important;
}

/* Dashboard / partner / account-type tokens */
.dash-ui,
.dash-row-menu {
    --dp-primary: var(--brand-gold);
    --dp-primary-strong: var(--brand-gold);
    --dp-on-primary: var(--brand-black);
    --dp-surface: var(--brand-white);
    --dp-surface-2: var(--brand-white);
    --dp-text: var(--brand-black);
    --dp-text-2: var(--brand-black);
    --dp-muted: rgba(var(--brand-black-rgb), .55);
    --dp-border: rgba(var(--brand-black-rgb), .12);
    --dp-tint: rgba(var(--brand-gold-rgb), .10);
    --dp-tint-2: rgba(var(--brand-gold-rgb), .18);
    --dp-success: var(--brand-gold);
    --dp-danger: var(--brand-black);
}

body.lightmode .dash-ui,
body.lightmode .dash-row-menu {
    --dp-primary: var(--brand-gold);
    --dp-primary-strong: var(--brand-gold);
    --dp-on-primary: var(--brand-black);
    --dp-surface: var(--brand-black);
    --dp-surface-2: var(--brand-black);
    --dp-text: var(--brand-white);
    --dp-text-2: var(--brand-white);
    --dp-muted: rgba(var(--brand-white-rgb), .62);
    --dp-border: rgba(var(--brand-gold-rgb), .22);
    --dp-tint: rgba(var(--brand-gold-rgb), .16);
    --dp-tint-2: rgba(var(--brand-gold-rgb), .26);
    --dp-success: var(--brand-gold);
    --dp-danger: var(--brand-white);
}

.dashboard-page {
    --dp-hero: linear-gradient(90deg, var(--brand-black) 0%, var(--brand-gold) 100%);
}

body.lightmode .dashboard-page {
    --dp-hero: linear-gradient(90deg, var(--brand-black) 0%, var(--brand-gold) 100%);
}

.at-page {
    --at-primary: var(--brand-gold);
    --at-primary-strong: var(--brand-gold);
    --at-tint: rgba(var(--brand-gold-rgb), .10);
    --at-tint-2: rgba(var(--brand-gold-rgb), .18);
}

body.lightmode .at-page {
    --at-primary: var(--brand-gold);
    --at-primary-strong: var(--brand-gold);
}

body.admin-ui {
    --au-primary: var(--brand-gold);
    --au-primary-strong: var(--brand-gold);
    --au-tint: rgba(var(--brand-gold-rgb), .10);
    --au-tint-2: rgba(var(--brand-gold-rgb), .18);
}

.header .top-navbar .navbar-header .navbar-brand b {
    width: auto !important;
    max-width: 100% !important;
    line-height: 1 !important;
}

.header .top-navbar .navbar-header .navbar-brand .side-logo,
.header .top-navbar .navbar-header .navbar-brand img.side-logo {
    width: auto !important;
    height: 42px !important;
    max-width: 220px !important;
    object-fit: contain !important;
    vertical-align: middle;
}

.wallet-btnn {
    background-color: var(--brand-gold) !important;
    color: var(--brand-on-gold) !important;
    border-color: var(--brand-gold) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--brand-gold);
}

.pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
    color: var(--brand-on-gold) !important;
}

/* ===== Light / dark chrome — only the three brand colors ===== */
html,
body,
body.client-portal,
body.admin-ui,
#main-wrapper,
.page-wrapper,
.container-fluid {
    background-color: var(--app-bg) !important;
    color: var(--app-text) !important;
}

.header,
.header .top-navbar,
.navbar,
.left-sidebar,
.sidebar-nav,
.card,
.card-body,
.modal-content,
.page-titles,
.footer,
.dropdown-menu {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

.modal .modal-header,
.modal-open .modal .modal-header,
body.admin-ui .modal-header,
body.client-portal .modal-header,
body.header-fix .modal-header {
    background: var(--brand-gold) !important;
    border-bottom: 0 !important;
    color: var(--brand-black) !important;
    padding: 14px 20px !important;
    align-items: center;
}

.modal .modal-header .modal-title,
.modal .modal-header h1,
.modal .modal-header h2,
.modal .modal-header h3,
.modal .modal-header h4,
.modal .modal-header h5,
.modal .modal-header h6,
.modal .modal-header .close,
.modal .modal-header .close span,
.modal-open .modal-header h5,
.modal-open .modal-header .modal-title,
body.admin-ui .modal-header .modal-title,
body.admin-ui .modal-header h5,
body.admin-ui .modal-header .close,
body.admin-ui .modal-header .close span,
body.client-portal .modal-header .modal-title,
body.client-portal .modal-header h5,
body.client-portal .modal-header .close,
body.client-portal .modal-header .close span {
    position: static !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-black) !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
}

.modal .modal-header .close,
body.admin-ui .modal-header .close,
body.client-portal .modal-header .close {
    margin: 0 0 0 auto !important;
    font-size: 26px !important;
    line-height: 1 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.modal .modal-body,
.modal .modal-footer,
body.admin-ui .modal-body,
body.admin-ui .modal-footer,
body.client-portal .modal-body,
body.client-portal .modal-footer {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

.sidebar-nav ul li a,
.sidebar-nav ul li a i,
.header .navbar-nav a,
.page-titles h3,
.card-title,
label,
p,
td,
th,
.breadcrumb,
.form-control,
.custom-select {
    color: var(--app-text) !important;
}

.form-control,
.custom-select,
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]) {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

select,
select.form-control,
select.custom-select,
select.sp-input,
select.dash-select {
    padding-left: 16px !important;
    padding-right: 40px !important;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23181B1B' d='M1.2.6 6 5.4 10.8.6 12 1.8 6 7.8 0 1.8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
}

body.lightmode select,
body.lightmode select.form-control,
body.lightmode select.custom-select,
body.lightmode select.sp-input,
body.lightmode select.dash-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FBF8F3' d='M1.2.6 6 5.4 10.8.6 12 1.8 6 7.8 0 1.8z'/%3E%3C/svg%3E") !important;
}

.text-muted,
.sidebar-nav ul li.nav-label,
.breadcrumb a {
    color: var(--app-muted) !important;
}

/* Remap leftover Bootstrap hues to the three brand colors */
.text-success,
.color-success,
.badge-success,
.label-success { color: var(--app-success) !important; }
.bg-success,
.badge-success,
.alert-success,
.btn-success,
.progress-bar-success {
    background-color: var(--app-success) !important;
    background: var(--app-success) !important;
    border-color: var(--app-success) !important;
    color: var(--app-on-accent) !important;
}

.text-danger,
.color-danger,
.text-error { color: var(--app-danger) !important; }
.bg-danger,
.badge-danger,
.alert-danger,
.btn-danger,
.progress-bar-danger {
    background-color: var(--app-danger) !important;
    background: var(--app-danger) !important;
    border-color: var(--app-danger) !important;
    color: var(--app-bg) !important;
}

.text-warning,
.color-warning,
.text-info,
.color-info { color: var(--app-accent) !important; }
.bg-warning,
.bg-info,
.badge-warning,
.badge-info,
.alert-warning,
.alert-info,
.btn-warning,
.btn-info {
    background-color: var(--app-accent) !important;
    background: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: var(--app-on-accent) !important;
}

.btn-secondary,
.badge-secondary {
    background-color: var(--app-surface-2) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}