/* Rosemount login page branding.
   Frappe's own login page, so the console's runtime tokens are not on it: the
   school's colour is written here once, at the top, and everything below reads
   these four.

   #82c5bf is a pale teal. White on it is 1.96:1 and cannot be read, so the
   header carries the colour and the ink sits ON it, while the button takes the
   colour's deep tone, where white does read (4.6:1). */
:root {
  --rmlog-brand: #82c5bf;
  --rmlog-light: #9ad3ce;
  --rmlog-deep:  #3c817b;
  --rmlog-press: #2c625d;
  --rmlog-ink:   #14332f;
  --rmlog-gold:  #fadd40;
}

body[data-path="login"] {
  background: linear-gradient(135deg, #f2f9f8 0%, #e6f2f1 52%, #fdf6dd 100%) !important;
}

body[data-path="login"] .page-card {
  border: none !important;
  box-shadow: 0 4px 32px rgba(60, 129, 123, 0.16), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
  border-radius: 20px !important;
  overflow: hidden;
}

body[data-path="login"] .page-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 2rem 1.5rem !important;
  background: linear-gradient(180deg, var(--rmlog-light) 0%, var(--rmlog-brand) 100%);
}

/* The crest, sized by WIDTH. Sizing it by height let a wide mark hit the
   max-width cap and shrink back down, which is why it came out small. */
body[data-path="login"] .page-card .page-card-head img.app-logo {
  width: 100% !important;
  max-width: 260px !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  margin-bottom: 0.75rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(20, 51, 47, 0.18));
}

body[data-path="login"] .page-card-head h4 {
  color: var(--rmlog-ink) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.125rem !important;
}

body[data-path="login"] .page-card-head .page-card-subtitle {
  color: rgba(20, 51, 47, 0.78) !important;
  font-size: 0.85rem !important;
  margin-top: 0 !important;
}

body[data-path="login"] .page-card-head-text {
  text-align: center;
}

/* The brand's deep tone on the primary button: white reads on it. */
body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary {
  background: var(--rmlog-deep) !important;
  border-color: var(--rmlog-deep) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0.625rem 1rem !important;
  transition: background 0.15s;
}
body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-primary:hover {
  background: var(--rmlog-press) !important;
  border-color: var(--rmlog-press) !important;
}

/* The colour itself on focus, where it is a ring and not text. */
body[data-path="login"] .form-control:focus {
  border-color: var(--rmlog-brand) !important;
  box-shadow: 0 0 0 3px rgba(130, 197, 191, 0.35) !important;
}

body[data-path="login"] .form-control {
  border-radius: 10px !important;
}

/* forgot password link */
body[data-path="login"] .forgot-password-message a,
body[data-path="login"] .sign-up-message a {
  color: var(--rmlog-deep) !important;
  font-weight: 600;
}

/* email-link button styling */
body[data-path="login"] .btn-login-with-email-link,
body[data-path="login"] .btn-login-option {
  border-radius: 10px !important;
}

/* hide Frappe branding footer on login */
body[data-path="login"] footer,
body[data-path="login"] .web-footer {
  display: none !important;
}

/* school motto footer */
body[data-path="login"]::after {
  content: "Be Bold \B7  Be Strong \B7  Be Wise";
  display: block;
  text-align: center;
  padding: 1.25rem 0;
  color: var(--rmlog-deep);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.7;
}