/* ==========================================================================
   login.css — Login screen + user cards.
   Part of منصة عقاب dashboard styles. Split from the former app.css.
   Cascade order is significant; see docs/flows/INDEX.md.
   ========================================================================== */
/* ══════════════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════════════ */
#login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px;
}
[data-theme="dark"] #login-screen {
  background: radial-gradient(ellipse 80% 60% at 50% 35%, #17172a 0%, var(--bg) 70%);
}
[data-theme="light"] #login-screen {
  background: radial-gradient(ellipse 80% 60% at 50% 35%, #e8e0cc 0%, var(--bg) 70%);
}
.login-logo { text-align: center; margin-bottom: 44px; }
.login-header-img {
  display: block;
  width: min(420px, 82vw);
  height: auto;
  margin: 0 auto 14px;
  border-radius: var(--r2);
  /* light bg image — invert+screen for dark mode so it reads on dark bg */
  mix-blend-mode: screen;
  filter: invert(1) brightness(0.92);
}
[data-theme="light"] .login-header-img {
  mix-blend-mode: multiply;
  filter: none;
}
.login-sub { font-size: 12px; color: var(--t2); letter-spacing: .5px; }
#user-cards { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.user-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 26px; border-radius: var(--r3); cursor: pointer;
  border: 1px solid var(--b1); background: var(--s1);
  box-shadow: 0 2px 16px var(--sh);
  transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s, box-shadow .2s;
  min-width: 100px;
}
.user-card:hover {
  border-color: var(--gb); background: var(--s2);
  transform: translateY(-4px); box-shadow: 0 8px 32px var(--sh);
}
.user-av {
  width: 64px; height: 64px; border-radius: var(--rf);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: 20px; font-weight: 900;
}
.user-card-name { font-family: var(--fh); font-size: 13.5px; font-weight: 700; color: var(--t1); }
.user-card-role { font-size: 11.5px; color: var(--t2); }
#login-err { margin-top: 14px; font-size: 12.5px; color: var(--red); text-align: center; display: none; }