html[data-bs-theme=light] body[data-sidebar=dark] #page-topbar .navbar-brand-box {
  background: #fff;
}

body[data-sidebar=dark] .vertical-menu,
body[data-sidebar=dark] .vertical-menu .navbar-brand-box,
body[data-sidebar=dark].vertical-collpsed .vertical-menu .navbar-brand-box,
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
  background: #030d43;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
  background: #0a1a5c;
}

html[data-bs-theme=light] {
  --bs-body-bg: #F6F5FA;
  --bs-header-bg: #F6F5FA;
}

/* .logo-lg uses Bootstrap's .d-flex (display:flex !important) to lay out the
   logo image + "Payrech" text side by side, which otherwise beats theme.css's
   non-!important ".vertical-collpsed .logo span.logo-lg { display: none; }"
   rule and leaves the text visible, overflowing the collapsed 70px sidebar. */
.vertical-collpsed .logo span.logo-lg {
  display: none !important;
}