/* --- Resets / general --- */
:root {
	 --auth-btn-width: 260px; 
	 --brand-primary: #5387BD;        /* same as desktop/bootstrap primary */
	--brand-primary-hover: #4A79AA;
	--brand-primary-active: #416C98;
	--secondary-pill: #F3F6FA;       /* Forgot Password background */
	} 

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0 !important;      
  overflow: hidden;             
  background: #fff;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* keep autofill background white */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
}

/* --- Two-column frame --- */
.container-fluid,
.container-fluid > .row {
  min-height: 100dvh;                           /* fill viewport height */
}

.container-fluid > .row {
  align-items: stretch;                         /* image + form same height */
  justify-content: center !important;
}

/* LEFT: big image (desktop) */
.crop {
  margin-right: 0 !important;                   /* override inline */
  padding: 0 !important;
  height: 100dvh;                               
  max-height: 100svh;
  overflow: hidden;
}

.crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;                            /* fill & crop */
  object-position: left center;                 /* similar to sample */
  margin: 0;                                    /* override old negative margins */
}

/* RIGHT: form column */
.col-sm-6.h-100 {
  margin-top: 0 !important;                     /* override inline */
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 24px;
  min-height: 100dvh;                           /* keep centered if image is taller */
}

/* Logo */
#trainer {
  width: auto;
  max-width: 220px;
  height: auto;
  margin: 0 0 20px 0;
}

/* Headline */
.htext {
  color: #444C57;
  font-weight: 300;
  font-size: 16px;
  margin-bottom: 12px;
}

/* Message area */
#login-message {
  max-width: var(--form-max);
  margin: 8px auto 12px;
}

/* Form controls */
#loginForm .form-group,
#loginForm .col-sm {
  width: 100%;
  display: flex;
  justify-content: center;
}

#loginForm input[type="text"],
#loginForm input[type="password"] {
  width: 100%;
  max-width: var(--form-max);
  font-size: 18px;
  color: #444C57;
  border: 0;
  border-bottom: 2px solid #E9E9F0;
  padding: 10px 36px 10px 2px;                  /* room for eye icon */
  background: transparent;
  outline: none;
}

#password { margin-left: 0; }                   /* clear legacy left shift */

/* Show/Hide password icon */
#showhide {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: -32px;                           /* sits inside input edge */
  transform: translateX(-6px);
  color: #9aa3ad;
}
#showhide .glyphicon { pointer-events: none; }

/* button */
#login.btn-primary{
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  background-image: none !important;
  -webkit-appearance: none;
  appearance: none;
}

#login.btn-primary:hover{
  background: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
}

/* keep Forgot Password pill consistent */
#forgot.btn-light{
  background: var(--secondary-pill) !important;
  border-color: var(--secondary-pill) !important;
  color: #223 !important;
  background-image: none !important;
}

#login.btn-primary:active,
#login.btn-primary:focus{
  background: var(--brand-primary-active) !important;
  border-color: var(--brand-primary-active) !important;
  box-shadow: none !important;
}

#login.col-sm-3,
#forgot.col-sm-3 {
  /* neutralize the Bootstrap column sizing */
  flex: 0 0 auto !important;
  max-width: none !important;
  width: var(--auth-btn-width) !important;   /* exact same width */
  display: block !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* consistent padding/shape so the pills look identical */
#login, #forgot {
  padding: 10px 16px !important;
  border-radius: 8px !important;
  margin-top: 12px !important;      /* space between them */
}

/* optional: keep rows centered just in case */
#loginForm .row.text-center { justify-content: center !important; }

/* --- Mobile / tablet behavior: hide image, keep centered --- */
@media (max-width: 1199.98px) {
  .crop { display: none !important; }           /* image disappears */
  .col-sm-6.h-100 {
    width: 100% !important;
    min-height: 100dvh;
    padding: 40px 20px;
  }
  body { overflow: auto; }                      /* allow page scroll if needed */
  .htext { font-size: 16px; }
}

/* --- Very small phones --- */
@media (max-width: 420px) {
  #loginForm input[type="text"],
  #loginForm input[type="password"] { font-size: 16px; }
  #trainer { max-width: 200px; }
}

/* --- Large desktops: keep the form centered --- */
@media (min-width: 1200px) {
  .col-sm-6.h-100 {
    justify-content: center;                    /* vertical center on big screens */
  }
}

/* Cosmetic odds & ends carried over safely */
#logo {
  transform: scaleX(-1);
  object-fit: cover;
  object-position: -20% 0;
  margin-left: -20px;
}

i { text-align: center; vertical-align: middle; }
.vertical-center { /* kept for compatibility if referenced elsewhere */
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}