/* kf-login.css — Shared login page styles for all Kinetic Finish apps.
   Canonical source: knowledge/brand/kf-login.css
   Copies: sites/employee-portal/css/kf-login.css
           sites/kinetic-app/desktop/css/kf-login.css
           sites/railway-app/app/static/css/kf-login.css

   Brand: #181818 background, dark card (#222), Heritage Gold #C08E3B button,
   Montserrat font, wordmark logo with gold "FINISH".
   Matches home.kineticfinish.com — the most polished of the three login UIs. */

/* ── Page ── */
.kf-login-page {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #181818;
  color: #cccccc;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 16px;
  /* When kf-nav.js is loaded it sets --kf-nav-h on :root.
     Add nav height to top padding so the card centers below the nav bar. */
  padding-top: calc(var(--kf-nav-h, 0px) + 16px);
  -webkit-font-smoothing: antialiased;
}

/* ── Card ── */
.kf-login-card {
  background: #222222;
  border: 1px solid #333333;
  padding: 36px;
  border-radius: 10px;
  width: 100%;
  max-width: 400px;
}

/* ── Logo ── */
.kf-login-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 8px;
}

/* ── Subtitle (optional, e.g. "Design Discovery Admin") ── */
.kf-login-subtitle {
  text-align: center;
  color: #aaaaaa;
  font-size: 14px;
  margin-bottom: 24px;
}

/* ── Title (for forgot/reset pages) ── */
.kf-login-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin-bottom: 24px;
}

/* ── Form fields ── */
.kf-login-label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 14px;
  color: #cccccc;
}

.kf-login-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #333333;
  border-radius: 6px;
  font-size: 1rem;
  margin-bottom: 16px;
  font-family: inherit;
  box-sizing: border-box;
  background: #1a1a1a;
  color: #ffffff;
}

.kf-login-input::placeholder {
  color: #666666;
}

.kf-login-input:focus {
  outline: none;
  border-color: #C08E3B;
}

/* ── Password field with eye toggle ── */
.kf-login-password-wrap {
  position: relative;
}

.kf-login-password-wrap .kf-login-input {
  padding-right: 44px;
}

.kf-login-eye-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-60%);
  background: none;
  border: none;
  cursor: pointer;
  color: #666666;
  padding: 4px;
  width: auto;
  display: flex;
  align-items: center;
}

.kf-login-eye-toggle:hover {
  color: #aaaaaa;
}

/* ── Submit button ── */
.kf-login-btn {
  width: 100%;
  padding: 12px;
  background: #C08E3B;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}

.kf-login-btn:hover {
  opacity: 0.9;
}

.kf-login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Error / success messages ── */
.kf-login-flash {
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}

.kf-login-flash-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.kf-login-flash-success {
  background: rgba(122, 184, 50, 0.15);
  color: #7ab832;
}

/* ── Links (forgot password, back to sign in) ── */
.kf-login-link {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
}

.kf-login-link a {
  color: #aaaaaa;
  text-decoration: none;
  font-weight: 500;
}

.kf-login-link a:hover {
  color: #C08E3B;
}

/* ── Forgot password description ── */
.kf-login-forgot-desc {
  color: #aaaaaa;
  font-size: 14px;
  margin-bottom: 16px;
  text-align: center;
}

/* ── Informational note ── */
.kf-login-note {
  background: #1a1a1a;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #aaaaaa;
  line-height: 1.4;
}