/* =====================================================================
   login.css — Animated login screen + header user menu
   ===================================================================== */

.login-screen {
  position: fixed; inset: 0; z-index: 5000;
  display: grid; place-items: center;
  padding: var(--sp-5);
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(51,122,183,0.14), transparent 60%),
    radial-gradient(900px 500px at 95% 90%, rgba(51,122,183,0.10), transparent 55%),
    var(--color-bg);
  animation: fade-in var(--t-base) var(--ease);
}
.login-screen.is-success { animation: fade-out var(--t-base) var(--ease) forwards; }
.login-screen.shake .login-card { animation: shake-x 0.4s var(--ease); }
@keyframes shake-x {
  10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); }
}

.login-card {
  width: min(940px, 100%);
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modal-pop var(--t-slow) var(--ease-out);
}

/* ---- Illustration pane ---- */
.login-illus {
  background: linear-gradient(160deg, #eaf2fa, #f5f8fc);
  display: grid; place-items: center;
  padding: var(--sp-6);
  position: relative;
}
.login-illus::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 420px at 50% 45%, rgba(51,122,183,0.10), transparent 70%);
  pointer-events: none;
}
.illus-mount { width: 100%; max-width: 420px; }
.illus-mount svg { width: 100%; height: auto; display: block; }

/* ---- Form pane ---- */
.login-form-pane { padding: var(--sp-8) var(--sp-8) var(--sp-6); display: flex; flex-direction: column; }
.login-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.login-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.login-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.1; }
.login-sub { font-size: var(--fs-md); color: var(--text-muted); margin-top: 2px; }

.login-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.lf-field { display: flex; flex-direction: column; gap: 6px; }
.lf-label { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.lf-input {
  display: flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0 var(--sp-3); background: var(--color-bg);
  color: var(--text-faint);
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.lf-input:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-focus); background: #fff; color: var(--color-primary); }
.lf-input input {
  flex: 1; border: none; outline: none; background: transparent;
  padding: 12px 0; font-size: var(--fs-base); color: var(--text-default);
}
.lf-toggle { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-faint); transition: color var(--t-fast), background var(--t-fast); }
.lf-toggle:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.lf-toggle.on { color: var(--color-primary); }

.lf-error {
  font-size: var(--fs-md); color: var(--color-danger);
  background: var(--color-danger-soft); border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  display: flex; align-items: center; gap: 6px;
  animation: drop-in var(--t-base) var(--ease-out);
}

.lf-submit {
  margin-top: var(--sp-2);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--color-primary); color: #fff;
  font-size: var(--fs-base); font-weight: var(--fw-semibold);
  padding: 13px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-base);
}
.lf-submit:hover:not(:disabled) { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.lf-submit:active:not(:disabled) { transform: translateY(0); }
.lf-submit:disabled { opacity: 0.75; cursor: default; }
.lf-submit:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.lf-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; animation: spin 0.7s linear infinite; }

.lf-hint { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.lf-chip {
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-primary);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 3px 12px; transition: all var(--t-fast);
}
.lf-chip:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }
.login-foot { margin-top: auto; padding-top: var(--sp-5); font-size: var(--fs-xs); color: var(--text-faint); text-align: center; }

/* ---- Header user menu (added after login) ---- */
.user-menu { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 4px 10px 4px 4px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.user-btn:hover { border-color: var(--color-primary); box-shadow: var(--shadow-xs); }
.user-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  background: var(--color-primary); color: #fff;
}
.user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.user-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.user-role { font-size: var(--fs-xs); color: var(--text-muted); }
.user-role.admin { color: var(--color-primary); font-weight: var(--fw-semibold); }

.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 200px; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: var(--sp-2); z-index: var(--z-dropdown);
  animation: drop-in var(--t-base) var(--ease-out);
}
.user-dropdown .ud-head { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-1); }
.user-dropdown .ud-head .n { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--fs-md); }
.user-dropdown .ud-head .u { font-size: var(--fs-xs); color: var(--text-muted); }
.user-dropdown button.ud-item {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-md); color: var(--text-default);
  transition: background var(--t-fast);
}
.user-dropdown button.ud-item:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.user-dropdown button.ud-item svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .login-card { grid-template-columns: 1fr; max-width: 460px; }
  .login-illus { display: none; }
  .login-form-pane { padding: var(--sp-6); }
  .user-meta { display: none; }
}