/* ============================================
   Celly Health Employee Portal — Auth Styles
   ============================================ */

:root {
  --bg:#FAFAF8; --white:#FFFFFF;
  --orange:#E8713A; --orange-hover:#D4632F; --orange-light:#FDF0E9;
  --navy:#0B1838; --navy-mid:#162850;
  --teal:#2A8B84; --teal-light:#E8F5F4;
  --green:#1D7C3F; --green-light:#E7F5EC;
  --g50:#F9FAFB; --g100:#F3F4F6; --g200:#E5E7EB; --g300:#D1D5DB;
  --g400:#9CA3AF; --g500:#6B7280; --g600:#4B5563; --g800:#1F2937;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'DM Sans',sans-serif; color:var(--g800);
  background:var(--navy); min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}

body::before {
  content:''; position:fixed; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(42,139,132,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 80%, rgba(232,113,58,0.12) 0%, transparent 60%),
    var(--navy);
  z-index:0;
}

.login-wrap {
  position:relative; z-index:1;
  width:100%; max-width:440px;
  animation: fadeUp 0.5s ease-out;
}

/* Logo */
.login-logo { text-align:center; margin-bottom:32px; }
.login-logo-img-wrap {
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border-radius:16px; padding:12px 20px;
  margin-bottom:10px;
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
}
.login-logo img { height:auto; width:70%; display:block; margin:0 auto; background:#fff; border-radius:14px; padding:16px 24px; box-shadow:0 4px 20px rgba(0,0,0,0.2); }
.login-logo-sub {
  font-size:22px; font-family:'Outfit',sans-serif; font-weight:600;
  color:rgba(255,255,255,0.7); display:block; margin-top:8px;
}

/* Card */
.login-card {
  background:#fff; border-radius:20px; padding:36px 36px 32px;
  box-shadow:0 24px 64px rgba(0,0,0,0.3);
}
.login-card-title {
  font-family:'Outfit',sans-serif; font-weight:800; font-size:22px;
  color:var(--navy); letter-spacing:-0.02em; margin-bottom:4px;
}
.login-card-sub { font-size:14px; color:var(--g500); margin-bottom:28px; }

/* Google Sign-In Button */
.btn-google {
  width:100%; padding:13px 16px;
  background:#fff; color:var(--g800);
  border:2px solid var(--g200); border-radius:12px;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:15px;
  cursor:pointer; transition:all 0.2s;
  display:flex; align-items:center; justify-content:center; gap:12px;
  text-decoration:none;
}
.btn-google:hover {
  border-color:var(--g300); background:var(--g50);
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
  transform:translateY(-1px);
}
.btn-google:active { transform:translateY(0); }
.btn-google svg { flex-shrink:0; }

/* Submit button */
.btn-submit {
  width:100%; padding:14px;
  background:var(--orange); color:#fff; border:none; border-radius:12px;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:15px;
  cursor:pointer; transition:all 0.2s; margin-top:8px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-submit:hover {
  background:var(--orange-hover); transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(232,113,58,0.35);
}

/* Divider */
.login-divider {
  display:flex; align-items:center; gap:12px;
  margin:20px 0; color:var(--g300); font-size:12px;
}
.login-divider::before, .login-divider::after {
  content:''; flex:1; height:1px; background:var(--g200);
}

/* Alerts */
.alert {
  padding:12px 14px; border-radius:10px;
  font-size:13px; font-weight:500; margin-bottom:18px;
  display:flex; align-items:flex-start; gap:10px; line-height:1.5;
}
.alert svg { flex-shrink:0; margin-top:1px; }
.alert-error  { background:#FEF2F2; border:1px solid #FECACA; color:#DC2626; }
.alert-success{ background:var(--green-light); border:1px solid #BBF7D0; color:var(--green); }
.alert-info   { background:var(--teal-light); border:1px solid rgba(42,139,132,0.3); color:var(--teal); }

/* Footer note */
.login-note {
  font-size:12px; color:rgba(255,255,255,0.3);
  text-align:center; margin-top:20px; line-height:1.6;
}

/* Back link */
.back-link {
  display:inline-flex; align-items:center; gap:6px;
  color:rgba(255,255,255,0.5); font-size:13px; text-decoration:none;
  margin-top:20px; transition:color 0.2s; width:100%; justify-content:center;
}
.back-link:hover { color:rgba(255,255,255,0.8); }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}