/**
 * Login & register pages — brand colors, Mulish typography, unified buttons.
 */
@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&display=swap");

:root {
  --auth-blue-light: #33b5e5;
  --auth-blue: #009ddc;
  --auth-blue-dark: #005696;
  --auth-blue-darker: #004080;
  --auth-orange: #f8941e;
  --auth-orange-dark: #e65100;
}

/* ── Shared typography ── */
body.auth-page,
body.auth-page input,
body.auth-page select,
body.auth-page textarea,
body.auth-page button,
body.auth-page .btn,
body.auth-page h3,
body.auth-page p,
body.auth-page a,
body.auth-page label {
  font-family: "Mulish", sans-serif !important;
}

/* ── Unified submit buttons ── */
.auth-submit-btn,
body.auth-login-page .btn-auth-primary,
body.auth-login-page #submit,
body.auth-register-page #container .btn-success,
body.auth-register-page #container button[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.25rem 0 0 !important;
  padding: 14px 24px !important;
  min-height: 48px;
  font-family: "Mulish", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

.auth-submit-btn--login,
body.auth-login-page .btn-auth-primary,
body.auth-login-page #submit {
  --bs-btn-color: #fff !important;
  --bs-btn-bg: var(--auth-blue-dark) !important;
  --bs-btn-border-color: var(--auth-blue-dark) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--auth-blue-darker) !important;
  --bs-btn-hover-border-color: var(--auth-blue-darker) !important;
  background-color: var(--auth-blue-dark) !important;
  border-color: var(--auth-blue-dark) !important;
  color: #fff !important;
}

.auth-submit-btn--login:hover,
body.auth-login-page .btn-auth-primary:hover,
body.auth-login-page #submit:hover {
  background-color: var(--auth-blue-darker) !important;
  border-color: var(--auth-blue-darker) !important;
  color: #fff !important;
}

.auth-submit-btn--register,
body.auth-register-page #container .btn-success {
  --bs-btn-color: #fff !important;
  --bs-btn-bg: var(--auth-orange) !important;
  --bs-btn-border-color: var(--auth-orange) !important;
  --bs-btn-hover-bg: var(--auth-orange-dark) !important;
  --bs-btn-hover-border-color: var(--auth-orange-dark) !important;
  background-color: var(--auth-orange) !important;
  border-color: var(--auth-orange) !important;
  color: #fff !important;
  width: auto !important;
  min-width: 180px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.auth-submit-btn--register:hover,
body.auth-register-page #container .btn-success:hover {
  background-color: var(--auth-orange-dark) !important;
  border-color: var(--auth-orange-dark) !important;
  color: #fff !important;
}

/* ── Login page (white card — dark text) ─────────────────── */
body.auth-login-page #leftside {
  color: var(--auth-blue-dark) !important;
}

body.auth-login-page #leftside input::placeholder {
  color: var(--auth-blue) !important;
}

body.auth-login-page #leftside input,
body.auth-login-page #leftside input:focus,
body.auth-login-page #leftside select,
body.auth-login-page #leftside select:focus {
  border-color: var(--auth-blue) !important;
  color: var(--auth-blue-dark) !important;
}

body.auth-login-page #leftside a,
body.auth-login-page #forgot a,
body.auth-login-page .auth-inline-link {
  color: var(--auth-orange) !important;
  -webkit-text-fill-color: var(--auth-orange) !important;
  font-weight: 700;
  text-decoration: none;
}

body.auth-login-page #leftside a:hover,
body.auth-login-page #forgot a:hover,
body.auth-login-page .auth-inline-link:hover {
  color: var(--auth-orange) !important;
  -webkit-text-fill-color: var(--auth-orange) !important;
  text-decoration: underline;
}

/* ── Register page — blue gradient panels, all white text ── */
body.auth-register-page {
  background: #f4f8fc !important;
  min-height: 100vh;
}

body.auth-register-page #leftside {
  background: linear-gradient(155deg, var(--auth-blue) 0%, var(--auth-blue-dark) 100%) !important;
  color: #fff !important;
}

body.auth-register-page #rightside {
  background: linear-gradient(155deg, var(--auth-blue-dark) 0%, var(--auth-blue-darker) 100%) !important;
  color: #fff !important;
}

body.auth-register-page #container,
body.auth-register-page #container h3,
body.auth-register-page #container p,
body.auth-register-page #container label,
body.auth-register-page #leftside,
body.auth-register-page #rightside {
  color: #fff !important;
}

body.auth-register-page #container input,
body.auth-register-page #container input:focus,
body.auth-register-page #container select,
body.auth-register-page #container select:focus,
body.auth-register-page #container .form-control,
body.auth-register-page #container .form-select,
body.auth-register-page #leftside input,
body.auth-register-page #leftside select,
body.auth-register-page #rightside input,
body.auth-register-page #rightside select {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
}

body.auth-register-page #container input::placeholder,
body.auth-register-page #leftside input::placeholder,
body.auth-register-page #rightside input::placeholder {
  color: rgba(255, 255, 255, 0.72) !important;
  opacity: 1;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}

body.auth-register-page #container select option,
body.auth-register-page #leftside select option,
body.auth-register-page #rightside select option {
  color: #000 !important;
  background: #fff !important;
}

body.auth-register-page #container a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 600;
  text-decoration: underline;
}

body.auth-register-page .auth-inline-link,
body.auth-register-page #container a.auth-inline-link,
body.auth-register-page #container a[href*="login"] {
  color: var(--auth-orange) !important;
  -webkit-text-fill-color: var(--auth-orange) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.auth-register-page .auth-inline-link:hover,
body.auth-register-page #container a.auth-inline-link:hover,
body.auth-register-page #container a[href*="login"]:hover {
  color: var(--auth-orange) !important;
  -webkit-text-fill-color: var(--auth-orange) !important;
  text-decoration: underline !important;
}

/* layouts.app top nav */
#app .navbar-nav .nav-link {
  color: var(--auth-blue-dark) !important;
  font-weight: 600;
}

#app .navbar-nav .nav-link:hover {
  color: var(--auth-orange) !important;
}

/* ── Auth layout shell (login / register with student nav + footer) ── */
body.auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 !important;
  margin: 0;
  background: #f4f8fc !important;
}

body.auth-page .auth-site-header,
body.auth-page .student-site-header {
  flex-shrink: 0;
  width: 100%;
}

body.auth-page .auth-site-header .header-area,
body.auth-page .student-site-header .header-area {
  background: transparent !important;
  min-height: 0 !important;
}

body.auth-page .auth-site-header .header-bottom.header-sticky,
body.auth-page .student-site-header .header-bottom.header-sticky {
  min-height: 64px;
}

body.auth-page .auth-site-header .header-bottom .row.align-items-center,
body.auth-page .student-site-header .header-bottom .row.align-items-center {
  min-height: 64px !important;
}

@media (min-width: 992px) {
  body.auth-page .auth-site-header .header-bottom.header-sticky,
  body.auth-page .student-site-header .header-bottom.header-sticky {
    min-height: 72px;
  }

  body.auth-page .auth-site-header .header-bottom .row.align-items-center,
  body.auth-page .student-site-header .header-bottom .row.align-items-center {
    min-height: 72px !important;
  }
}

body.auth-page .auth-page-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 84px 1rem 2rem;
}

body.auth-login-page,
body.auth-register-page {
  background: #f4f8fc !important;
}

body.auth-login-page .auth-page-main {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

body.auth-register-page .auth-page-main {
  display: block;
}

/* Register notice banner */
body.auth-register-page .auth-notice-card {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto 1rem;
  padding: 0;
  border: 1px solid rgba(0, 86, 150, 0.1);
  border-radius: 12px;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 40, 80, 0.08);
  text-align: right;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #1a3a52 !important;
}

body.auth-register-page .auth-notice-card .container {
  padding: 0.85rem 1rem !important;
  width: 100% !important;
  max-width: 100%;
}

body.auth-register-page .auth-notice-card h4 b {
  color: #d32f2f !important;
  font-size: 1.15rem !important;
  -webkit-text-fill-color: #d32f2f !important;
}

body.auth-register-page .auth-notice-card b {
  color: #1a3a52 !important;
  font-weight: 600;
  -webkit-text-fill-color: #1a3a52 !important;
}

/* ── Login — centered card (override legacy login.css floats) ── */
body.auth-login-page form.container,
body.auth-login-page form.auth-login-form {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
}

body.auth-login-page #leftside,
body.auth-login-page .auth-card {
  width: 100% !important;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 2rem 1.75rem !important;
  box-shadow: 0 8px 28px rgba(0, 40, 80, 0.1) !important;
  background-color: #fff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 86, 150, 0.08) !important;
}

body.auth-login-page #leftside img,
body.auth-login-page .auth-card__logo {
  float: none !important;
  display: block;
  margin: 0 auto 1rem;
  width: 56px;
  height: 56px;
}

body.auth-login-page #leftside h3,
body.auth-login-page .auth-card__title {
  text-align: center;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 0 1.25rem !important;
  line-height: 1.3 !important;
}

body.auth-login-page #leftside .row {
  margin: 0;
  padding: 0;
}

body.auth-login-page #leftside .auth-field {
  margin-bottom: 0.35rem;
}

.auth-field__error {
  display: block;
  margin-top: 0.35rem;
  color: #ee4b2b !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

body.auth-login-page #forgot,
body.auth-login-page .auth-card__footer {
  text-align: center;
  margin: 1rem 0 0;
  padding: 0 !important;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--auth-blue-dark) !important;
}

body.auth-login-page #leftside input,
body.auth-login-page .auth-field input {
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: 14px 4px !important;
  width: 100%;
  border-width: 0 0 1px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Register — contained two-column form ── */
body.auth-register-page .auth-page-main > .card {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto 1rem;
}

body.auth-register-page #container {
  display: block;
  width: 100% !important;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 !important;
}

body.auth-register-page #container > .row {
  margin: 0;
  --bs-gutter-x: 0;
  box-shadow: 0 12px 40px rgba(0, 40, 80, 0.12);
  border-radius: 16px;
  overflow: hidden;
}

body.auth-register-page #leftside,
body.auth-register-page #rightside {
  padding: 1.5rem 1.35rem !important;
  border-radius: 0 !important;
}

body.auth-register-page #rightside br {
  display: none;
}

body.auth-register-page #container .row {
  padding: 0.4rem 0 !important;
  margin: 0;
}

body.auth-register-page #container h3 {
  float: none !important;
  margin-bottom: 0.75rem;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
}

body.auth-register-page #container input,
body.auth-register-page #container select,
body.auth-register-page #container .form-control,
body.auth-register-page #container .form-select {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  padding: 12px 4px !important;
  width: 100%;
  border-width: 0 0 1px 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.auth-register-page #container .col-md-6.offset-md-3,
body.auth-register-page #container .col-md-6.offset-md-4 {
  margin-left: 0 !important;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  text-align: center;
}

body.auth-register-page #container .auth-submit-row {
  text-align: center;
  padding-top: 0.25rem !important;
}

@media (max-width: 991.98px) {
  body.auth-register-page #container > .row {
    flex-direction: column;
    box-shadow: none;
    gap: 0.75rem;
    overflow: visible;
  }

  body.auth-register-page #leftside,
  body.auth-register-page #rightside {
    border-radius: 14px !important;
  }
}

@media (max-width: 767.98px) {
  body.auth-page .auth-page-main {
    padding: 76px 0.75rem 1.5rem;
  }

  .auth-submit-btn--register,
  body.auth-register-page #container .btn-success {
    width: 100% !important;
    min-width: 0;
  }
}