/* =====================================================================
   SJPR FX+ Global Markets – CRM theme (admin, sign-in, client portal)
   Inter · Premium Black · Shiny Gold · Brilliant White · Light Borrasca grey
   Loaded on every page by the sjpr_fxplus module (1.5+). Remove the module
   or untick "Brand theme" in SJPR FX+ › Settings to return to stock Perfex.
   ===================================================================== */
:root{
  --sj-black:#0b0b0c;          /* Premium Black */
  --sj-black-2:#141416;
  --sj-black-3:#1c1c1f;
  --sj-black-line:rgba(255,255,255,.08);
  --sj-gold:#d4af37;           /* Shiny Gold */
  --sj-gold-hi:#f1d88a;
  --sj-gold-deep:#8a6a1e;      /* gold for text on white (AA contrast) */
  --sj-shine:linear-gradient(135deg,#fff1c1 0%,#f0d277 22%,#d4af37 48%,#f6e3a1 72%,#b8892c 100%);
  --sj-white:#ffffff;          /* Brilliant White */
  --sj-grey:#e8e9eb;           /* light Borrasca grey – canvas */
  --sj-grey-2:#d9dbde;         /* borders */
  --sj-grey-3:#f4f4f5;         /* subtle fills */
  --sj-ink:#0b0b0c;
  --sj-muted:#5f636b;
  --sj-dim:#8b8f96;
  --sj-pos:#1f9d63;--sj-neg:#c8392f;
  --sj-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---------- typography everywhere ---------- */
html body,body.app,body.customers,body.login_admin,
body .btn,body input,body select,body textarea,body button,
body .popover,body .tooltip,body .dropdown-menu,body .modal,body .bootstrap-select .dropdown-toggle{
  font-family:var(--sj-font)!important;
}
body{font-feature-settings:'cv11','ss01','ss03';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--sj-ink)}
body .table td,body .table th,body .tw-tabular-nums,body .number,body .amount,body .total{font-variant-numeric:tabular-nums}
body h1,body h2,body h3,body h4,body h5,body .tw-font-semibold{letter-spacing:-.011em}
::selection{background:rgba(212,175,55,.35);color:var(--sj-black)}

/* =====================================================================
   ADMIN SHELL
   ===================================================================== */
body.app #header{background:var(--sj-black)!important;border-bottom:1px solid transparent;border-image:linear-gradient(90deg,rgba(212,175,55,.65),rgba(212,175,55,.12) 55%,transparent) 1;box-shadow:0 1px 0 rgba(0,0,0,.4)}
body.app #header,body.app #header a,body.app #header .hide-menu,body.app #header .nav>li>a{color:#d6d7da!important}
body.app #header .nav>li>a:hover,body.app #header .nav>li>a:focus,body.app #header .hide-menu:hover{color:#fff!important;background:transparent!important}
body.app #header svg{color:inherit}
body.app #header .tw-text-neutral-400,body.app #header .tw-text-neutral-500,body.app #header .tw-text-neutral-600,body.app #header .tw-text-neutral-700,body.app #header .tw-text-neutral-800{color:#b9bbc0!important}
body.app #header #search_input{background:var(--sj-black-3)!important;border:1px solid var(--sj-black-line)!important;color:#fff!important;border-radius:10px!important;box-shadow:none!important}
body.app #header #search_input::placeholder{color:#8b8f96}
body.app #header #search_input:focus{border-color:rgba(212,175,55,.6)!important;box-shadow:0 0 0 3px rgba(212,175,55,.15)!important}
body.app #header #top_search_button button{color:#8b8f96!important}
/* quick-create "+" and other filled header buttons → shiny gold */
body.app #header .tw-bg-primary-600,body.app #header .tw-bg-primary-500,body.app #header .btn-primary,body.app #header [class*="tw-bg-primary"]{background:var(--sj-shine)!important;color:var(--sj-black)!important;border:0!important;box-shadow:0 6px 18px -8px rgba(212,175,55,.8)}
body.app #header [class*="tw-bg-primary"] svg,body.app #header [class*="tw-bg-primary"] i{color:var(--sj-black)!important}
body.app #header .dropdown-menu a{color:var(--sj-ink)!important}
body.app #header .badge,body.app #header .icon-total-indicator{background:var(--sj-gold)!important;color:var(--sj-black)!important}
/* logo (company logo or injected SJPR FX+ wordmark) */
body.app #logo{padding-left:8px}
body.app #logo a.logo-text{color:#fff!important;font-weight:700;letter-spacing:.02em}
body.app #logo img,body.app #logo .sj-wordmark{height:38px!important;width:auto;display:block}
/* the wordmark JPG has a near-black ground: lighten-blend it so it sits seamlessly on Premium Black */
.sj-wordmark{mix-blend-mode:lighten}

/* ---------- sidebar ---------- */
body.app aside#menu,body.app #setup-menu-wrapper{background:var(--sj-black)!important;border-right:1px solid var(--sj-black-line)!important}
body.app aside#menu .sidebar-user-profile>a.profile{background:var(--sj-black-2)!important;border-color:var(--sj-black-line)!important;color:#e9e9eb!important;border-radius:12px}
body.app aside#menu .sidebar-user-profile>a.profile *{color:inherit}
body.app aside#menu .sidebar-user-profile>a.profile .tw-text-neutral-500,body.app aside#menu .sidebar-user-profile>a.profile span span:last-child{color:#8b8f96!important}
body.app aside#menu .sidebar-user-profile img{border:1px solid rgba(212,175,55,.55)}
body.app #side-menu>li>a,body.app #setup-menu>li>a{color:#c9cbcf!important;background:transparent!important;border-radius:10px;margin:1px 8px;padding:7px 12px!important;font-weight:500!important;font-size:13.5px;position:relative;transition:background .15s,color .15s}
body.app #side-menu>li>a .menu-icon,body.app #setup-menu>li>a .menu-icon,body.app #side-menu>li>a i{color:#7e828a!important;transition:color .15s}
body.app #side-menu>li>a:hover,body.app #setup-menu>li>a:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
body.app #side-menu>li>a:hover i{color:var(--sj-gold-hi)!important}
body.app #side-menu>li.active>a,body.app #setup-menu>li.active>a,body.app #side-menu>li.mm-active>a{background:linear-gradient(90deg,rgba(212,175,55,.16),rgba(212,175,55,.03))!important;color:#fff!important;font-weight:600!important}
body.app #side-menu>li.active>a:before,body.app #setup-menu>li.active>a:before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--sj-shine)}
body.app #side-menu>li.active>a i,body.app #setup-menu>li.active>a i{color:var(--sj-gold)!important}
body.app #side-menu .nav-second-level,body.app #setup-menu .nav-second-level{background:transparent!important;margin:2px 0 6px}
body.app #side-menu .nav-second-level>li>a,body.app #setup-menu .nav-second-level>li>a{color:#9a9ea5!important;background:transparent!important;padding:6px 12px 6px 46px!important;font-size:13px;font-weight:500;border-radius:8px;margin:0 8px}
body.app #side-menu .nav-second-level>li>a:hover,body.app #setup-menu .nav-second-level>li>a:hover{color:#fff!important;background:rgba(255,255,255,.04)!important}
body.app #side-menu .nav-second-level>li.active>a,body.app #setup-menu .nav-second-level>li.active>a{color:var(--sj-gold-hi)!important;font-weight:600}
body.app #side-menu .nav-second-level>li.active>a:before{content:"";position:absolute;left:32px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--sj-gold);box-shadow:0 0 8px rgba(212,175,55,.8)}
body.app #side-menu .nav-second-level>li>a{position:relative}
body.app #setup-menu-wrapper .customizer-heading,body.app #setup-menu-wrapper h4,body.app #setup-menu-wrapper .close-customizer{color:#e9e9eb!important}
body.app aside#menu .dropdown-menu a{color:var(--sj-ink)!important}
body.app aside#menu::-webkit-scrollbar{width:6px}body.app aside#menu::-webkit-scrollbar-thumb{background:#2a2a2e;border-radius:6px}

/* ---------- canvas & panels ---------- */
body.app #wrapper{background:var(--sj-grey)!important}
body.app #wrapper .content:not(.fx-wrap){color:var(--sj-ink)}
body.app .panel_s,body.app .panel_s>.panel-body,body.app .panel-default,body.app .card,body.app .top_stats_wrapper,body.app .widget .panel_s{background:var(--sj-white)}
body.app .panel_s{border:1px solid var(--sj-grey-2)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(11,11,12,.04),0 8px 24px -16px rgba(11,11,12,.18)!important}
body.app .panel_s>.panel-body{border-radius:14px}
body.app .panel_s .panel-heading,body.app .panel-default>.panel-heading{background:var(--sj-white)!important;border-bottom:1px solid var(--sj-grey-2)!important;font-weight:600;color:var(--sj-ink)}
body.app .top_stats_wrapper{border:1px solid var(--sj-grey-2)!important;border-radius:14px!important;box-shadow:none!important}
body.app .tw-text-neutral-700,body.app .tw-text-neutral-800,body.app .tw-text-neutral-900,body.app h4.tw-text-neutral-700{color:var(--sj-ink)}
body.app hr,body.app .hr-panel-separator,body.app .hr-panel-heading{border-color:var(--sj-grey-2)!important}
body.app .page-title,body.app h4.tw-font-semibold{color:var(--sj-ink)}
body.app .widget-dragger{opacity:.4}

/* links on light surfaces */
body.app #wrapper a:not(.btn):not(.label):not(.fx-wrap a),body.customers #wrapper a:not(.btn):not(.label){color:var(--sj-gold-deep)}
body.app #wrapper a:not(.btn):hover,body.customers #wrapper a:not(.btn):hover{color:var(--sj-black)}
body.app #wrapper .tw-text-primary-600,body.app #wrapper .text-primary,body.app #wrapper .tw-text-primary-700{color:var(--sj-gold-deep)!important}
body.app #wrapper .tw-bg-primary-600,body.app #wrapper .bg-primary{background:var(--sj-black)!important;color:#fff!important}

/* =====================================================================
   BUTTONS, FORMS, TABLES, NAV (admin + portal)
   ===================================================================== */
body .btn{border-radius:10px;font-weight:600;letter-spacing:.005em;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,filter .15s}
body .btn-primary,body .btn-info{background:var(--sj-black)!important;border:1px solid var(--sj-black)!important;color:#fff!important;box-shadow:inset 0 -1px 0 rgba(212,175,55,.6)}
body .btn-primary:hover,body .btn-primary:focus,body .btn-primary:active,body .btn-info:hover,body .btn-info:focus{background:var(--sj-black-3)!important;border-color:var(--sj-gold)!important;color:var(--sj-gold-hi)!important}
body .btn-primary:disabled,body .btn-primary.disabled{opacity:.55}
body .btn-default{background:var(--sj-white);border:1px solid var(--sj-grey-2);color:var(--sj-ink)}
body .btn-default:hover,body .btn-default:focus{border-color:var(--sj-gold);background:#fffbef;color:var(--sj-ink)}
body .btn:focus-visible{outline:2px solid var(--sj-gold);outline-offset:2px}
body .btn-success{background:#1b7f52;border-color:#1b7f52}
body .btn-danger{background:#b3261e;border-color:#b3261e}
/* the gold call-to-action (add .btn-gold anywhere) */
body .btn-gold{background:var(--sj-shine)!important;border:0!important;color:var(--sj-black)!important;box-shadow:inset 0 0 0 1px rgba(255,240,190,.5),0 10px 24px -12px rgba(212,175,55,.8)}
body .btn-gold:hover{filter:brightness(1.06);color:#000!important}

body .form-control,body .bootstrap-select>.dropdown-toggle,body .input-group-addon{border-radius:10px;border-color:var(--sj-grey-2)}
body .input-group .form-control:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
body .input-group .input-group-addon:last-child{border-top-left-radius:0;border-bottom-left-radius:0}
body .input-group .input-group-addon:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
body .form-control:focus,body .bootstrap-select>.dropdown-toggle:focus,body .bootstrap-select.open>.dropdown-toggle{border-color:var(--sj-gold)!important;box-shadow:0 0 0 3px rgba(212,175,55,.18)!important;outline:0!important}
body label,body .control-label{color:#2b2d31;font-weight:500}
body .checkbox input[type=checkbox]:checked+label:before,body .checkbox-primary input[type=checkbox]:checked+label:before,body .radio-primary input[type=radio]:checked+label:before{background:var(--sj-black)!important;border-color:var(--sj-black)!important}
body .radio-primary input[type=radio]:checked+label:after{background:var(--sj-gold)!important}
body input[type=checkbox],body input[type=radio]{accent-color:var(--sj-black)}
body .onoffswitch-checkbox:checked+.onoffswitch-label,body .onoffswitch-checkbox:checked+.onoffswitch-label:before{background:var(--sj-gold)!important;border-color:var(--sj-gold)!important}
body .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner,body .onoffswitch-inner:before{background-color:var(--sj-gold)!important}

body .dropdown-menu{border-radius:12px;border:1px solid var(--sj-grey-2);box-shadow:0 16px 40px -18px rgba(11,11,12,.35);padding:6px}
body .dropdown-menu>li>a{border-radius:8px}
body .dropdown-menu>li>a:hover,body .dropdown-menu>li>a:focus,body .bootstrap-select .dropdown-menu li a:hover{background:#fbf5e2!important;color:var(--sj-black)!important}
body .dropdown-menu>.active>a,body .dropdown-menu>.active>a:hover,body .bootstrap-select .dropdown-menu li.selected a{background:var(--sj-black)!important;color:#fff!important}

body.app .table>thead>tr>th,body.customers .table>thead>tr>th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sj-muted);border-bottom:1px solid var(--sj-grey-2)!important;background:transparent}
body.app .table>tbody>tr>td,body.customers .table>tbody>tr>td{border-top:1px solid #eeeff1;vertical-align:middle}
body.app .table-hover>tbody>tr:hover>td,body.app .table>tbody>tr:hover>td{background:#fbf7ea}
body.app .table-striped>tbody>tr:nth-of-type(odd){background:#fafafa}
body .pagination>li>a,body .pagination>li>span{color:var(--sj-ink);border-color:var(--sj-grey-2)}
body .pagination>.active>a,body .pagination>.active>span,body .pagination>.active>a:hover{background:var(--sj-black)!important;border-color:var(--sj-black)!important;color:var(--sj-gold-hi)!important}
body .dataTables_wrapper .dataTables_filter input,body .dataTables_wrapper .dataTables_length select{border-radius:10px}

body .nav-tabs>li.active>a,body .nav-tabs>li.active>a:hover,body .nav-tabs>li.active>a:focus,body .nav-tabs-horizontal .nav-tabs>li.active>a{color:var(--sj-black)!important;border-bottom-color:var(--sj-gold)!important;font-weight:600}
body .nav-tabs>li>a:hover{color:var(--sj-black)}
body .nav-pills>li.active>a,body .nav-pills>li.active>a:hover{background:var(--sj-black)!important;color:var(--sj-gold-hi)!important}
body .progress-bar{background-color:var(--sj-gold)}
body .label-primary,body .badge-primary{background:var(--sj-black)}
body .alert-info{background:#fbf6e6;border-color:#ecd9a0;color:#4a3a10}
body .modal-content{border-radius:16px;border:1px solid var(--sj-grey-2);box-shadow:0 30px 80px -30px rgba(11,11,12,.55)}
body .modal-header{border-bottom:1px solid var(--sj-grey-2)}
body .modal-header .modal-title{font-weight:600}
body .modal-backdrop.in{opacity:.6;background:var(--sj-black)}
body .popover{border-radius:12px}
body .tooltip-inner{background:var(--sj-black);border:1px solid rgba(212,175,55,.4)}

/* =====================================================================
   ADMIN SIGN-IN  (/admin/authentication)
   ===================================================================== */
body.login_admin{background:var(--sj-black)!important;background-image:radial-gradient(900px 520px at 85% -10%,rgba(212,175,55,.16),transparent 60%),radial-gradient(700px 420px at -10% 110%,rgba(212,175,55,.08),transparent 60%)!important;min-height:100vh}
body.login_admin .company-logo{text-align:center;margin-bottom:22px}
body.login_admin .company-logo img{max-height:64px;width:auto}
body.login_admin .company-logo a,body.login_admin h1,body.login_admin h2,body.login_admin h3{color:#fff!important}
body.login_admin .authentication-form-wrapper,body.login_admin .authentication-form{background:var(--sj-black-2)!important;border:1px solid rgba(212,175,55,.35)!important;border-radius:18px!important;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)!important;color:#e9e9eb}
body.login_admin label,body.login_admin .control-label,body.login_admin .checkbox label{color:#c9cbcf!important}
body.login_admin .form-control{background:var(--sj-black)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important}
body.login_admin .form-control:focus{border-color:var(--sj-gold)!important}
body.login_admin .btn-primary{background:var(--sj-shine)!important;border:0!important;color:var(--sj-black)!important;box-shadow:0 12px 28px -12px rgba(212,175,55,.8)}
body.login_admin .btn-primary:hover{filter:brightness(1.06);color:#000!important}
body.login_admin a{color:var(--sj-gold-hi)!important}
body.login_admin .sj-auth-foot{color:#6f737a;font-size:12px;text-align:center;margin-top:18px;letter-spacing:.02em}

/* =====================================================================
   CLIENT PORTAL  (investors)
   ===================================================================== */
body.customers{background:var(--sj-grey)!important}
body.customers .navbar.header,body.customers nav.navbar-default{background:var(--sj-black)!important;border:0!important;border-bottom:1px solid rgba(212,175,55,.35)!important;min-height:68px}
body.customers .navbar-default .navbar-nav>li>a{color:#d6d7da!important;font-weight:500}
body.customers .navbar-default .navbar-nav>li>a:hover,body.customers .navbar-default .navbar-nav>li.active>a{color:#fff!important;background:transparent!important}
body.customers .navbar-default .navbar-nav>li.active>a{box-shadow:inset 0 -2px 0 var(--sj-gold)}
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login>a,body.customers .navbar-default .navbar-nav .btn{background:var(--sj-shine)!important;color:var(--sj-black)!important;border:0!important;border-radius:10px;margin-top:4px}
body.customers .navbar-default .navbar-nav>li.customers-nav-item-login>a *{color:var(--sj-black)!important}
body.customers .navbar-default .navbar-nav [class*="tw-bg-primary"],body.customers .navbar-default .navbar-nav .tw-bg-primary-600{background:var(--sj-shine)!important;color:var(--sj-black)!important}
body.customers .navbar-default .navbar-toggle{border-color:rgba(255,255,255,.2)}
body.customers .navbar-default .navbar-toggle .icon-bar{background:#fff}
body.customers .navbar-brand,body.customers .navbar-header .logo{padding:10px 15px;height:auto}
body.customers .navbar-brand img,body.customers .sj-wordmark{height:44px!important;width:auto}
body.customers .dropdown-menu a{color:var(--sj-ink)!important}
body.customers #content{padding-top:32px;padding-bottom:40px}
body.customers .panel_s,body.customers .panel-default{background:#fff;border:1px solid var(--sj-grey-2)!important;border-radius:14px!important;box-shadow:0 8px 24px -16px rgba(11,11,12,.2)!important}
body.customers h1,body.customers h2,body.customers h3,body.customers h4{color:var(--sj-ink)}
body.customers footer.footer{background:var(--sj-black)!important;color:#8b8f96!important;border-top:1px solid rgba(212,175,55,.3);padding:22px 0}
body.customers footer.footer a{color:var(--sj-gold-hi)!important}
/* portal sign-in */
body.customers_login #content,body.customers.customers_login{background:var(--sj-black)!important;background-image:radial-gradient(900px 520px at 85% -10%,rgba(212,175,55,.14),transparent 60%)!important}
body.customers_login #content{min-height:calc(100vh - 140px)}
body.customers_login #content h1,body.customers_login #content h2,body.customers_login #content .login-heading{color:#fff!important;font-weight:600;letter-spacing:-.015em}
body.customers_login #content .panel_s,body.customers_login #content .panel_s>.panel-body,body.customers_login #content form .panel-body{background:var(--sj-black-2)!important;border-color:rgba(212,175,55,.35)!important;color:#e9e9eb}
body.customers_login #content label,body.customers_login #content .checkbox label{color:#c9cbcf!important}
body.customers_login #content .form-control,body.customers_login #content .bootstrap-select>.dropdown-toggle{background:var(--sj-black)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important}
body.customers_login #content .btn-primary{background:var(--sj-shine)!important;border:0!important;color:var(--sj-black)!important}
body.customers_login #content a{color:var(--sj-gold-hi)!important}
.sj-portal-trust{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:22px auto 0;color:#8b8f96;font-size:12px;letter-spacing:.04em;max-width:520px;text-align:center}
.sj-portal-trust b{color:#d6d7da;font-weight:600}

/* =====================================================================
   SJPR FX+ module pages: make the whole canvas black so the dark
   cockpit pages sit flush with the black header and sidebar
   ===================================================================== */
body.app #wrapper:has(> .content.fx-wrap){background:var(--sj-black)!important}
body.app #wrapper>.content.fx-wrap{border-radius:0;min-height:calc(100vh - 57px)}
body.app #wrapper>.content.fx-wrap:before{display:none}

@media (max-width:767px){
  body.app #logo img,body.app #logo .sj-wordmark{height:30px!important}
  body.customers .navbar-brand img,body.customers .sj-wordmark{height:36px!important}
}
@media (prefers-reduced-motion:reduce){body *{transition:none!important}}