/* Final override for the customer dashboard menu. Loaded after modernstyle.css. */
#menu.customer-menu {
  background: #111b27 !important;
  border: 1px solid #2a3a4d !important;
  border-radius: 8px !important;
  overflow: hidden;
  padding: 0 !important;
}

#menu button {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #2a3a4d !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #b9c9db !important;
  display: flex;
  font-weight: 600;
  margin-left: 0 !important;
  min-height: 58px;
  padding: 14px 18px !important;
  text-align: left;
  transition: background-color 160ms ease, color 160ms ease !important;
}

#menu button:last-child {
  border-bottom: 0 !important;
}

#menu button i {
  color: #67a9f5 !important;
  font-size: 1rem;
  margin-right: 10px;
  text-align: center;
  width: 1.25rem;
}

#menu button:hover,
#menu button:focus-visible {
  background: #1b2b3d !important;
  color: #f5f9ff !important;
  outline: 0;
}

#menu .active,
#menu button.active {
  background: #1f3650 !important;
  border-bottom-color: #2a3a4d !important;
  border-left-color: #62a6f7 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  color: #f7fbff !important;
  font-weight: 700;
  margin-left: 0 !important;
  padding-left: 18px !important;
}

#menu .active i,
#menu button.active i {
  color: #8ac4ff !important;
}

@media (max-width: 767.98px) {
  #menu.customer-menu {
    border-radius: 0 !important;
  }

  #menu .active,
  #menu button.active {
    border-bottom: 2px solid #62a6f7 !important;
    border-left-color: transparent !important;
  }
}
/* Text utilities inside buttons must not restore the base light-theme colors. */
#menu button span,
#menu button .text-primary,
#menu button .text-muted,
#menu button .text-dark {
  color: #b9c9db !important;
}

#menu .active span,
#menu .active .text-primary,
#menu .active .text-muted,
#menu .active .text-dark,
#menu button.active span,
#menu button.active .text-primary,
#menu button.active .text-muted,
#menu button.active .text-dark {
  color: #f7fbff !important;
}
/* Authenticated dashboard markup: #menu.customer-m-menu. */
#menu.customer-m-menu {
  background: #111b27 !important;
  border: 1px solid #2a3a4d !important;
  border-radius: 8px !important;
  overflow: hidden;
  padding: 0 !important;
}

#menu.customer-m-menu button.btn {
  background: transparent !important;
  border-bottom-color: #2a3a4d !important;
  color: #b9c9db !important;
}

#menu.customer-m-menu button.btn > span.ps-1 {
  color: #b9c9db !important;
}

#menu.customer-m-menu button.btn.active {
  background: #1f3650 !important;
  border-left-color: #62a6f7 !important;
  color: #f7fbff !important;
}

#menu.customer-m-menu button.btn.active > span.ps-1 {
  color: #f7fbff !important;
}

#menu.customer-m-menu button.btn i {
  color: #67a9f5 !important;
}

#menu.customer-m-menu button.btn.active i {
  color: #8ac4ff !important;
}
/* Form labels inside the customer dashboard content. */
.customer-m-menu-content label,
.customer-m-menu-content .form-label,
.customer-m-menu-content .col-form-label {
  color: #dce8f5 !important;
  font-weight: 600 !important;
}

.customer-m-menu-content label.text-muted,
.customer-m-menu-content .form-label.text-muted,
.customer-m-menu-content .col-form-label.text-muted {
  color: #aebed0 !important;
}
/* Security QR Code: dark container, white quiet-zone reserved for scanning. */
.security-section .fa-qrcode > .bg-white.border.text-center {
  background: #172334 !important;
  border-color: #3a5068 !important;
  border-radius: 8px !important;
  padding: 16px !important;
}

.security-section .fa-qrcode > .bg-white.border.text-center img {
  background: #ffffff !important;
  border: 8px solid #ffffff !important;
  border-radius: 4px !important;
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}
/* Real 2FA QR markup: only the scanner quiet-zone stays white. */
.security-section [class="2fa-qrcode"] > .bg-white.border.text-center {
  background: #172334 !important;
  border-color: #3a5068 !important;
  border-radius: 8px !important;
  padding: 16px !important;
}

.security-section [class="2fa-qrcode"] > .bg-white.border.text-center img {
  background: #ffffff !important;
  border: 8px solid #ffffff !important;
  border-radius: 4px !important;
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}