/* Brand Vantage login page customisation */

/* Top navbar — purple gradient matching portal header */
:root {
  --navbar-bg: linear-gradient(90deg, #663dff 0%, #aa00ff 100%);
}

nav.navbar,
nav.navbar.navbar-light,
.navbar,
.navbar.navbar-light {
  background: linear-gradient(90deg, #663dff 0%, #aa00ff 100%) !important;
  background-color: #663dff !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(102, 61, 255, 0.25) !important;
}

nav.navbar .navbar-brand,
nav.navbar .navbar-brand span,
nav.navbar .nav-link,
nav.navbar .navbar-toggler,
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
  color: #fff !important;
}

nav.navbar .navbar-toggler,
.navbar-light .navbar-toggler {
  border-color: rgba(255,255,255,0.4) !important;
}

nav.navbar .navbar-toggler svg {
  fill: #fff !important;
  stroke: #fff !important;
}

.app-logo {
  height: 56px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
}

.page-card-head {
  text-align: center;
  margin-bottom: 8px;
}

.page-card-head h4 {
  font-size: 15px;
  font-weight: 600;
  color: #474747;
  margin-top: 10px;
}

/* ──────────────────────────────────────────────────────────────────
   Office 365 SSO is the primary login. Reorder so the SSO button is
   at the top of the card, then "or", then the email/password form.
   Frappe's stock template puts SSO at the bottom.
   ────────────────────────────────────────────────────────────────── */
.for-login .login-content .page-card-body {
  display: flex;
  flex-direction: column;
}

/* Move the whole social-logins block above the email/password form */
.for-login .login-content .page-card-body > .social-logins {
  order: -1;
  margin-bottom: 8px;
}

/* Inside .social-logins: stock order is "or" divider, then buttons.
   Reverse so the SSO buttons render first, then the "or" beneath. */
.for-login .login-content .social-logins {
  display: flex;
  flex-direction: column-reverse;
}

/* Style the Office 365 button as the visual primary */
.for-login .login-content .btn-login-option.btn-office_365 {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
  font-weight: 600 !important;
  padding: 11px 14px !important;
}
.for-login .login-content .btn-login-option.btn-office_365:hover {
  background: #000 !important;
  border-color: #000 !important;
}

/* Recolour any inline icon SVG/img that Frappe injects so it
   stays visible on the now-dark background */
.for-login .login-content .btn-login-option.btn-office_365 img {
  filter: brightness(0) invert(1);
}

/* Demote the email/password "Login" button to secondary now that
   the SSO button carries the primary visual weight */
.for-login .login-content .btn-login.btn-primary {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #d1d5db !important;
  font-weight: 500 !important;
}
.for-login .login-content .btn-login.btn-primary:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}