/* =========================================================================
   SolutionLabs Login — split layout (Design A)
   Load AFTER bootstrap.min.css and solutionlabs-theme.css.
   Set data-app="office" or data-app="client" on <body> to pick the accent.
   ========================================================================= */

[data-app="office"] { --app-accent: var(--sl-dark);   --app-ring: rgba(237, 114, 3, .4); }
[data-app="client"] { --app-accent: var(--sl-orange); --app-ring: rgba(255, 255, 255, .14); }

.sl-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
}

/* --- Brand panel --- */
.sl-login__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 220px;
  padding: 2.5rem 2rem;
  background: var(--app-accent);
  color: #fff;
}

.sl-login__ring {
  position: absolute;
  right: -110px;
  bottom: -110px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 32px solid var(--app-ring);
  pointer-events: none;
}

.sl-login__family,
.sl-login__motto {
  position: relative;
  margin: 0;
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, .7);
}

.sl-login__motto { display: none; }

.sl-login__title {
  position: relative;
}

.sl-login__title h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.sl-login__title p {
  max-width: 32ch;
  margin: .9rem 0 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, .82);
}

/* --- Form panel --- */
.sl-login__panel {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.5rem 1.5rem;
}

.sl-login__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.sl-login__logo {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 745 / 194;   /* crops the source image to logo + tagline */
  overflow: hidden;
  margin-bottom: 2rem;
}

.sl-login__logo img { display: block; width: 100%; height: auto; }

.sl-login__form h2 {
  margin: 0 0 .25rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sl-ink);
}

.sl-login__lead { margin: 0 0 1.75rem; font-size: .9rem; }
.sl-login__lead strong { color: var(--sl-ink); }

.sl-login .form-label {
  margin-bottom: .35rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--sl-ink);
}

.sl-login .form-control { padding: .65rem .85rem; border-radius: .5rem; }

.sl-login__submit { padding-top: .7rem; padding-bottom: .7rem; }

.sl-login__note { margin: 1rem 0 0; font-size: .78rem; color: #8a8886; }

.sl-login__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  max-width: 380px;
  width: 100%;
  margin: 2.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--sl-line);
  font-size: .75rem;
  color: #8a8886;
}

/* --- Google button (follows Google's branding guidelines) --- */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 100%;
  padding: .7rem 1rem;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: .5rem;
  color: #1f1f1f;
  font-weight: 500;
}
.btn-google:hover { background: #f8f9fa; border-color: #c6c9cc; color: #1f1f1f; }
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (min-width: 768px) {
  .sl-login { grid-template-columns: 5fr 6fr; }
  .sl-login__brand { padding: 3rem; }
  .sl-login__motto { display: block; }
  .sl-login__panel { padding: 3rem 3rem 2rem; }
}