/* ==========================================================================
   Mid Group AI, Aegis login style
   ========================================================================== */

.login-body { min-height: 100vh; }

.login-shell {
  display: grid;
  grid-template-columns: minmax(340px, 44%) 1fr;
  min-height: 100vh;
}

/* ----- Brand panel (left) ----- */
.login-brand-panel {
  background: var(--band-bg);
  color: var(--band-ink);
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 40px 48px;
}

/* Top-aligned under the brand lockup so the eyebrow and "Aegis" title line up
   with the "Sign in to your workspace" heading in the card on the right, which
   is anchored to the same top band (see .login-card-wrap). */
.brand-panel-body { max-width: 380px; margin: 0; }

/* The brand panel is always dark (--band-bg), so the standardized --blue
   eyebrow, a deep blue tuned for light surfaces, is too dark to read here in
   light mode. Use a fixed bright blue that stays legible on the dark panel in
   both themes while keeping the eyebrow blue. */
.login-brand-panel .eyebrow { color: #5aa9ee; }

/* Co-brand / campaign slot, pinned to the bottom of the brand panel.
   Hidden until content is placed inside it. */
.brand-panel-partner {
  display: grid;
  gap: 10px;
  max-width: 380px;
}
.brand-panel-partner:empty { display: none; }
.brand-panel-partner img { max-width: 200px; height: auto; }

.brand-panel-title {
  font-size: clamp(40px, 4.5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 16px;
}

.brand-panel-copy {
  font-size: 17px;
  line-height: 1.6;
  color: var(--band-muted);
  margin: 0 0 28px;
}

.brand-panel-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.brand-panel-points li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--band-muted);
}
.brand-panel-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--green);
}

.brand-panel-foot { margin-top: auto; }
.registry-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-sub);
  border: 1px solid var(--band-line);
  border-radius: 999px;
  padding: 7px 14px;
  display: inline-block;
}

/* ----- Login card (right) ----- */
.login-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  /* Top padding anchors the card heading to the same vertical band as the left
     brand title (brand lockup + gap), so the two line up instead of the left
     block sitting lower from being vertically centered. Tune this one value if
     the alignment needs a nudge. */
  padding: 120px 28px 48px;
  background: var(--bg);
}

.login-card {
  width: min(440px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 22px;
}

.login-card-head h2 {
  font-size: 26px;
  margin: 0 0 8px;
  max-width: none;
}
.login-sub { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }

.login-notice {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.login-notice strong { color: var(--ink); }
.login-notice a { color: var(--blue); font-weight: 600; }

#login-form { display: grid; gap: 18px; }

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.field-aside { font-size: 13px; color: var(--blue); font-weight: 500; }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 64px; }
.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
}
.password-toggle:hover { color: var(--blue2); }

.login-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.sso-group { display: grid; gap: 10px; }
.btn-sso {
  background: var(--field-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 12px 16px;
  border-radius: 9px;
  font-size: 15px;
  text-align: center;
}
.btn-sso:hover { border-color: var(--blue2); color: var(--ink); }

.login-foot {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}
.login-foot a { color: var(--blue); font-weight: 600; }

.login-page-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: var(--muted);
}

/* ----- Responsive ----- */
@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand-panel {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    padding: 20px 24px;
  }
  .brand-panel-body, .brand-panel-foot, .brand-panel-partner { display: none; } /* compact header on mobile */
  .login-card-wrap { padding: 36px 20px; }
  .login-card { padding: 28px 22px; }
}