/* auth.css — Shared authentication pages (login & signup) */

:root {
  --primary:#1a56db; --primary-dark:#1245b8; --primary-light:#ebf0fe;
  --success:#0e9f6e; --danger:#e02424; --danger-light:#fde8e8;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb;
  --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280;
  --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827;
  --white:#ffffff; --radius:8px; --radius-lg:14px;
  --shadow:0 4px 20px rgba(0,0,0,0.09); --shadow-lg:0 12px 40px rgba(0,0,0,0.14);
  --transition:0.18s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{
  font-family:'Inter',sans-serif; background:var(--gray-50); color:var(--gray-800);
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(26,86,219,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(14,159,110,0.05) 0%, transparent 50%);
}

/* ── AUTH CARD ── */
.auth-wrap { width:100%; max-width:420px; }

.auth-logo {
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:1.3rem; font-weight:800; color:var(--primary);
  margin-bottom:28px; text-decoration:none;
}
.auth-logo-icon {
  width:44px; height:44px; background:var(--primary); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem;
  box-shadow:0 4px 12px rgba(26,86,219,0.35);
}

.auth-card {
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:36px 40px;
  border:1px solid var(--gray-200);
}

.auth-title { font-size:1.35rem; font-weight:800; color:var(--gray-900); margin-bottom:4px; }
.auth-sub   { font-size:.84rem; color:var(--gray-500); margin-bottom:28px; }

/* ── FORM ── */
.field { margin-bottom:18px; }
.field label {
  display:block; font-size:.8rem; font-weight:700; color:var(--gray-700);
  margin-bottom:6px; letter-spacing:.01em;
}
.input-wrap { position:relative; }
.input-wrap .input-icon {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--gray-400); font-size:.85rem; pointer-events:none;
}
.input-wrap input {
  width:100%; padding:10px 12px 10px 36px;
  border:1.5px solid var(--gray-300); border-radius:var(--radius);
  font-size:.88rem; font-family:inherit; color:var(--gray-800);
  background:var(--white); outline:none; transition:var(--transition);
}
.input-wrap input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(26,86,219,0.1);
}
.input-wrap input::placeholder { color:var(--gray-400); }
.input-wrap .toggle-pw {
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--gray-400);
  font-size:.85rem; padding:2px; transition:var(--transition);
}
.input-wrap .toggle-pw:hover { color:var(--gray-700); }

/* ── DIVIDER ── */
.field-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ── SUBMIT BTN ── */
.btn-submit {
  width:100%; padding:12px; background:var(--primary); color:#fff;
  border:none; border-radius:var(--radius); font-size:.9rem; font-weight:700;
  cursor:pointer; font-family:inherit; transition:var(--transition);
  display:flex; align-items:center; justify-content:center; gap:8px;
  letter-spacing:.01em;
}
.btn-submit:hover { background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 4px 14px rgba(26,86,219,0.3); }
.btn-submit:active { transform:none; }

/* ── LINKS ── */
.auth-footer { text-align:center; margin-top:22px; font-size:.82rem; color:var(--gray-500); }
.auth-footer a { color:var(--primary); font-weight:600; text-decoration:none; }
.auth-footer a:hover { text-decoration:underline; }

/* ── ERROR ── */
.alert-err {
  background:var(--danger-light); color:#9b1c1c; border:1px solid #f98080;
  border-radius:var(--radius); padding:10px 13px; font-size:.82rem;
  font-weight:500; display:flex; align-items:center; gap:8px; margin-bottom:18px;
}

/* ── REMEMBER ROW ── */
.remember-row {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
}
.check-label { display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--gray-600); cursor:pointer; }
.check-label input { accent-color:var(--primary); }
.forgot-link { font-size:.8rem; color:var(--primary); text-decoration:none; font-weight:600; }
.forgot-link:hover { text-decoration:underline; }

/* ── DIVIDER OR ── */
.or-sep { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--gray-400); font-size:.78rem; }
.or-sep::before,.or-sep::after { content:''; flex:1; height:1px; background:var(--gray-200); }

/* ── ROLE SELECT ── */
select.role-sel {
  width:100%; padding:10px 12px;
  border:1.5px solid var(--gray-300); border-radius:var(--radius);
  font-size:.88rem; font-family:inherit; color:var(--gray-800);
  background:var(--white); outline:none; transition:var(--transition); cursor:pointer;
}
select.role-sel:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,86,219,0.1); }

/* ── BOTTOM BADGE ── */
.secure-badge {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:18px; font-size:.75rem; color:var(--gray-400);
}
.secure-badge i { color:var(--success); }

@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.auth-wrap { animation:fadeUp .4s ease both; }