/* CRM-like auth styles (aligned to nlbgest3) */

:root {
  --color-background: #0f172a;
  --color-overlay: rgba(15, 23, 42, 0.65);
  --color-card-bg: rgba(15, 23, 42, 0.78);
  --color-border: rgba(148, 163, 184, 0.35);
  --color-text: #f8fafc;
  --color-accent: #38bdf8;
  --radius-medium: 18px;
  --radius-small: 12px;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body.login-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background);
  color: var(--color-text);
  position: relative;
}

.login-background {
  position: fixed;
  inset: 0;
  background: linear-gradient(var(--color-overlay), var(--color-overlay)), url('/img/bkLogin.webp') center/cover no-repeat;
  filter: saturate(120%);
  z-index: -2;
}

.login-container {
  width: 100%;
  max-width: 420px;
  padding: 32px 16px;
}

.login-card {
  background: var(--color-card-bg);
  padding: 36px 32px;
  border-radius: var(--radius-medium);
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(16px);
}

.login-card__header { text-align: center; margin-bottom: 24px; }
.login-card__logo { width: 72px; height: 72px; margin-bottom: 12px; }
.login-card__title { margin: 0; font-size: 1.5rem; font-weight: 700; }

.login-card__form { display: flex; flex-direction: column; gap: 16px; }

.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field__label {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(248, 250, 252, 0.7);
}

.form-field input[type='text'],
.form-field input[type='email'],
.form-field input[type='password'] {
  padding: 12px 14px;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-border);
  background: rgba(15, 23, 42, 0.4);
  color: var(--color-text);
  font-size: 1rem;
}

.form-field input::placeholder { color: rgba(226, 232, 240, 0.6); }
.form-field input:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.form-field--checkbox { flex-direction: row; align-items: center; gap: 10px; font-size: 0.9rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--radius-small); border: none; cursor: pointer;
  font-weight: 600; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary {
  background: linear-gradient(135deg, var(--color-accent), #2563eb);
  color: #0f172a; box-shadow: 0 18px 40px rgba(56, 189, 248, 0.25);
}
.btn--primary:hover, .btn--primary:focus {
  transform: translateY(-1px);
  box-shadow: 0 20px 44px rgba(56, 189, 248, 0.35);
}

.login-card__footer { text-align: center; margin-top: 28px; font-size: 0.8rem; color: rgba(226, 232, 240, 0.6); }

.alert { padding: 12px 16px; border-radius: var(--radius-small); margin-bottom: 18px; font-size: 0.9rem; border: 1px solid transparent; }
.alert--success { background: rgba(16, 185, 129, 0.12); color: #4ade80; border-color: rgba(16, 185, 129, 0.45); }
.alert--warning { background: rgba(234, 179, 8, 0.12); color: #facc15; border-color: rgba(234, 179, 8, 0.45); }
.alert--danger  { background: rgba(248, 113, 113, 0.12); color: #fca5a5; border-color: rgba(248, 113, 113, 0.45); }

/* Eye toggle for password */
.form-field--password .password-input-wrap { position: relative; }
.form-field--password input { padding-right: 44px; }
.toggle-password {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  color: rgba(226,232,240,0.8);
}
.toggle-password:hover { background: rgba(255,255,255,0.08); color: #fff; }
.toggle-password.active { color: var(--color-accent); }

@media (max-width: 480px) { .login-card { padding: 28px 22px; } }