/* Boitekanelo College portal authentication pages */
:root {
  --bc-auth-navy: #172b75;
  --bc-auth-navy-deep: #0b2147;
  --bc-auth-navy-light: #21418a;
  --bc-auth-green: #1d925b;
  --bc-auth-gold: #fecb07;
  --bc-auth-slate: #465268;
  --bc-auth-border: #d5dbe5;
}

body.bc-auth-page {
  align-items: center;
  box-sizing: border-box;
  display: flex !important;
  justify-content: center;
  position: relative;
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  padding: clamp(3rem, 6vh, 5rem) 1rem clamp(2.5rem, 4vh, 3.5rem);
  isolation: isolate;
  background-color: var(--bc-auth-navy);
  background-image:
    radial-gradient(circle at 7% 18%, rgba(254, 203, 7, 0.98) 0 3.25rem, transparent 3.3rem),
    radial-gradient(circle at 94% 82%, rgba(29, 146, 91, 0.92) 0 5.5rem, transparent 5.55rem),
    radial-gradient(circle at 11% 93%, rgba(254, 203, 7, 0.58) 0 11rem, transparent 11.08rem),
    linear-gradient(135deg, var(--bc-auth-navy-deep) 0%, var(--bc-auth-navy) 54%, var(--bc-auth-navy-light) 100%);
}

body.bc-auth-page::before,
body.bc-auth-page::after {
  position: fixed;
  z-index: -1;
  display: block;
  content: "";
  pointer-events: none;
}

/* Concentric ring detail echoes the circular graphics used throughout the public site. */
body.bc-auth-page::before {
  top: -11rem;
  right: -8rem;
  width: 31rem;
  height: 31rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow:
    0 0 0 1.15rem rgba(255, 255, 255, 0.08),
    0 0 0 2.3rem rgba(255, 255, 255, 0.05),
    0 0 0 8.5rem rgba(29, 146, 91, 0.2);
}

/* Small linked-dot pattern provides a little energy without competing with the form. */
body.bc-auth-page::after {
  bottom: -8rem;
  left: -6rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background-color: rgba(254, 203, 7, 0.95);
  box-shadow:
    10rem -2rem 0 -7rem var(--bc-auth-green),
    13rem -5rem 0 -8rem var(--bc-auth-green),
    15rem -8rem 0 -8.5rem var(--bc-auth-gold);
}

body.bc-auth-page .login-box {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(430px, 100%);
  max-height: calc(100dvh - 2rem);
  margin: 0;
  overflow-y: auto;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: translate(-50%, -50%);
}

body.bc-auth-page .bc-auth-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 1.35rem !important;
  box-shadow: 0 1.5rem 4rem rgba(7, 23, 49, 0.3) !important;
}

body.bc-auth-page .bc-auth-card .card-body {
  padding: 2rem 2.25rem 2.25rem !important;
}

body.bc-auth-page .bc-auth-logo {
  display: block;
  width: auto;
  height: 7rem;
  margin: 0 auto 0.75rem;
  object-fit: contain;
}

body.bc-auth-page .bc-auth-card .h5 {
  color: var(--bc-auth-navy);
  font-size: 1.45rem;
  letter-spacing: -0.02em;
}

body.bc-auth-page .bc-auth-card .text-center > p:not(.h5) {
  color: var(--bc-auth-slate);
  font-size: 1rem;
}

body.bc-auth-page .bc-auth-card .border-top {
  border-top: 1px solid rgba(23, 43, 117, 0.14) !important;
}

body.bc-auth-page .bc-auth-card label {
  color: var(--bc-auth-slate);
  font-weight: 600 !important;
}

body.bc-auth-page .bc-auth-card .form-control {
  min-height: 3rem;
  border: 1px solid var(--bc-auth-border);
  border-radius: 0.55rem;
  color: #172033;
  background-color: #fbfcfe;
  box-shadow: inset 0 1px 2px rgba(7, 23, 49, 0.03);
}

body.bc-auth-page .bc-auth-card .form-control:focus {
  border-color: var(--bc-auth-green);
  background-color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(29, 146, 91, 0.15);
}

body.bc-auth-page .bc-auth-card .btn-primary {
  min-height: 3.15rem;
  border: 0;
  border-left: 0.3rem solid var(--bc-auth-gold);
  border-radius: 0.55rem;
  background: linear-gradient(135deg, var(--bc-auth-navy) 0%, var(--bc-auth-navy-light) 100%);
  box-shadow: 0 0.5rem 1rem rgba(23, 43, 117, 0.2);
  font-weight: 700;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body.bc-auth-page .bc-auth-card .btn-primary:hover,
body.bc-auth-page .bc-auth-card .btn-primary:focus {
  background: linear-gradient(135deg, var(--bc-auth-navy-light) 0%, var(--bc-auth-green) 100%);
  box-shadow: 0 0.75rem 1.35rem rgba(23, 43, 117, 0.28);
  transform: translateY(-1px);
}

body.bc-auth-page .bc-auth-card a {
  color: var(--bc-auth-navy);
  font-weight: 600;
}

body.bc-auth-page .bc-auth-card a:hover,
body.bc-auth-page .bc-auth-card a:focus {
  color: var(--bc-auth-green);
}

body.bc-auth-page .form-hint-message {
  line-height: 1.55;
}

body.bc-auth-page .text-muted {
  color: #758096 !important;
}

@media (max-width: 575.98px) {
  body.bc-auth-page {
    padding: 1rem 0.75rem;
  }

  body.bc-auth-page .bc-auth-card .card-body {
    padding: 1.6rem 1.35rem 1.8rem !important;
  }

  body.bc-auth-page .bc-auth-logo {
    height: 6rem;
  }

  body.bc-auth-page::before {
    top: -14rem;
    right: -14rem;
  }

  body.bc-auth-page::after {
    bottom: -11rem;
    left: -10rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bc-auth-page .bc-auth-card .btn-primary {
    transition: none;
  }
}