/* Login page. Kept out of site.css: nothing else uses it, and the sign-in page
   loads no other stylesheet of the app's besides Bootstrap.

   System fonts and local SVGs only -- the app is built to work offline, so the
   front door must not depend on a font or image from the internet. */

:root {
  --brand-deep: #0f2a4a;
  --brand: #1d64c8;
  --brand-bright: #3b82f6;
  --brand-pale: #dbeafe;
  --ink: #0f172a;
  --muted: #64748b;
}

html, body {
  height: 100%;
}

body.login-page {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #f8fafc;
}

.login-shell {
  display: flex;
  min-height: 100vh;
}

/* ------------------------------------------------------------ brand panel */

.login-brand {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 3rem;
  color: #fff;
  background: linear-gradient(160deg, var(--brand-deep) 0%, var(--brand) 100%);
  overflow: hidden;
}

/* A soft glow in one corner, so the blue is not a flat slab. */
.login-brand::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.25), transparent 70%);
  pointer-events: none;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  position: relative;
}

/* The KKT logo is blue on white, so it sits on a white card on the blue. */
.login-logo img {
  height: 52px;
  width: auto;
  padding: 4px 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.login-logo small {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--brand-pale);
  letter-spacing: 0.02em;
}

.login-hero {
  margin-top: auto;
  margin-bottom: auto;
  max-width: 30rem;
  position: relative;
}

.login-hero h1 {
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.login-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.login-highlights li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  font-size: 1.05rem;
  color: var(--brand-pale);
}

.login-highlights .tick {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-deep);
  background: #93c5fd;
}

.login-illustration {
  width: 100%;
  max-width: 30rem;
  height: auto;
}

.login-brand-footer {
  position: relative;
  font-size: 0.85rem;
  color: #bfdbfe;
}

/* -------------------------------------------------------------- form panel */

.login-panel {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: #fff;
}

.login-form {
  width: 100%;
  max-width: 24rem;
}

.login-form h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.login-form .lead {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.login-form .form-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.login-form .input-group-text {
  background: #f1f5f9;
  color: var(--muted);
  border-right: 0;
}

.login-form .input-group .form-control,
.login-form .input-group .form-select {
  border-left: 0;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.login-form .form-select:focus,
.login-form .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(29, 100, 200, 0.2);
}

.login-form .input-group:focus-within .input-group-text {
  border-color: var(--brand);
}

.password-toggle {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
}

.password-toggle:hover,
.password-toggle:focus-visible {
  text-decoration: underline;
}

.caps-warning {
  font-size: 0.85rem;
  color: #b45309;
}

.btn-brand {
  width: 100%;
  padding: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 0.5rem;
  transition: background 0.15s;
}

.btn-brand:hover,
.btn-brand:focus-visible {
  color: #fff;
  background: var(--brand-deep);
}

.btn-brand:disabled {
  opacity: 0.8;
}

.login-help {
  margin-top: 1.75rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

.login-dev-hint {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  border: 1px dashed #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  color: var(--muted);
  background: #f8fafc;
}

/* ------------------------------------------------------------------ phone
   The brand panel becomes a short band with the logo and name; the tagline,
   highlights and illustration give way to the form. */

@media (max-width: 767.98px) {
  .login-shell {
    flex-direction: column;
  }

  .login-brand {
    flex: none;
    padding: 1.25rem 1.5rem;
  }

  .login-hero,
  .login-brand-footer {
    display: none;
  }

  .login-panel {
    align-items: flex-start;
    padding-top: 2rem;
  }
}