/* Hongle client console. Blue palette; business status colors keep their meaning. */
:root {
  --bs-global: #2563eb;
  --bs-global-1: #eaf2ff;
  --bs-global-2: #f3f7ff;
  --bs-global-3: #bdd3fc;
  --bs-global-o-1: rgba(37, 99, 235, .10);
  --bs-global-o-2: rgba(37, 99, 235, .20);
  --bs-global-o-3: rgba(37, 99, 235, .30);
  --bs-global-o-4: rgba(37, 99, 235, .40);
  --bs-global-o-5: rgba(37, 99, 235, .50);
  --bs-global-o-0: rgba(37, 99, 235, 0);
  --bs-btn-bg: #2563eb;
  --bs-btn-border-color: #2563eb;
  --bs-btn-hover-bg: #1d4ed8;
  --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-active-bg: #1e40af;
  --bs-btn-active-border-color: #1e40af;
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
  --blue: #2563eb;
  --primary: #2563eb;
  --light: #eaf2ff;
  --console-canvas: #eef4fd;
  --console-line: #dce7f6;
  --console-ink: #243650;
  --console-muted: #60728b;
}

html, body {
  background-color: var(--console-canvas);
}

.main-content {
  background-color: var(--console-canvas);
}

.footer {
  color: #456185;
  background-color: #e3edfc;
  border-top: 1px solid #d4e2f7;
}

#page-topbar {
  background-color: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 1px 0 var(--console-line);
}

.vertical-menu {
  border-right: 1px solid var(--console-line);
  box-shadow: 4px 0 20px rgba(32, 66, 116, .025);
}

/* Preserve the template's expanded and collapsed navigation geometry. */
#sidebar-menu ul li a,
body[data-sidebar="dark"] #sidebar-menu ul li a {
  color: #566b88;
}

#sidebar-menu ul li a i,
body[data-sidebar="dark"] #sidebar-menu ul li a i {
  color: #7185a1;
}

#sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover {
  color: #1d4ed8;
  background-color: #f1f6ff;
}

#sidebar-menu ul li a.active,
#sidebar-menu .mm-active > a,
body[data-sidebar="dark"] #sidebar-menu ul li a.active,
body[data-sidebar="dark"] #sidebar-menu .mm-active > a {
  color: #1d4ed8 !important;
  background-color: #eaf2ff;
}

#sidebar-menu a.active i,
#sidebar-menu .mm-active > a i,
body[data-sidebar="dark"] #sidebar-menu a.active i,
body[data-sidebar="dark"] #sidebar-menu .mm-active > a i {
  color: #2563eb !important;
}

.card {
  border-color: #e2eaf6;
  box-shadow: 0 5px 24px rgba(34, 65, 110, .045);
}

.card-title, .page-title-box h4 {
  color: var(--console-ink);
}

.table thead th {
  color: #405879;
}

.text-primary {
  color: #2563eb !important;
}

.bg-info {
  background-color: #2563eb !important;
}

.nav-tabs-custom .nav-item .nav-link::after {
  background-color: #2563eb;
}

.nav-tabs-custom .nav-item .nav-link.active {
  color: #2563eb;
}

a.text-primary:hover, a.text-primary:focus {
  color: #1d4ed8 !important;
}

.badge-soft-yunyoo {
  color: #1d4ed8;
  background-color: #eaf2ff;
}

.user-center_header {
  background-color: #eaf2ff;
}

/* The original account banner has an inline purple photo tint. */
.user-center_h300.p-0 > .card-body {
  background-color: rgba(78, 131, 207, .30) !important;
}

.security-header {
  background-image: url(/themes/clientarea/yunyoo/assets_custom/img/security_top.png), linear-gradient(110deg, #315d9e, #1e40af);
}

.security-avatar {
  box-shadow: inset 0 0 0 10px #3769b5, inset 0 0 0 20px #5083cb;
}

.security-info, .bg-promote {
  background-color: #1e40af;
}

.bg-promote {
  box-shadow: 0 6px 18px rgba(30, 64, 175, .16);
}

#withdrawNow {
  color: #1e40af !important;
}

.row.align-items-center.server_header_box .custom-button,
.row.align-items-center.server_header_box .left_wrap_btn,
.powerimg {
  box-shadow: 0 6px 14px 2px rgba(37, 99, 235, .18) !important;
}

.form-control:focus, .custom-select:focus {
  border-color: #88adf5;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.btn:focus-visible, a:focus-visible, select:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

/* Mobile uses the existing independent navigation layout and white surfaces. */
@media (max-width: 767.98px) {
  .footer { background-color: #e3edfc; }
  .card { box-shadow: 0 3px 16px rgba(34, 65, 110, .04); }
}