Overhaul nav, fix DB transaction bugs, add admin UI

- Replace nav user area with display name (non-clickable), gear settings
  modal, admin button (admins only), and logout button
- Settings modal handles display name, timezone, and password change
- Add admin.html + admin.js: user table with reset PW, disable/enable,
  login-as (impersonation), and delete; return-to-admin flow in nav
- Add is_admin to UserResponse so frontend can gate the Admin button
- Fix all db.begin() bugs in admin.py and users.py (transaction already
  active from get_current_user query; use commit() directly instead)
- Add email-validator and pin bcrypt==4.0.1 for passlib compatibility
- Add escHtml() to api.js and admin API namespace
- Group nav brand + links in nav-left for left-aligned layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/css/style.css

@@ -51,32 +51,99 @@ nav {
   letter-spacing: .05em;
 }
 
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 .nav-links {
   display: flex;
-  gap: 1.5rem;
+  gap: .5rem;
   align-items: center;
 }
 
-.nav-links a {
-  color: var(--cream-dim);
-  text-decoration: none;
-  font-size: .95rem;
-  transition: color .2s;
-}
-
-.nav-links a:hover,
 .nav-links a.active {
-  color: var(--amber-light);
+  border-color: var(--amber);
+  color: var(--amber);
 }
 
 .nav-user {
-  color: var(--amber);
-  cursor: pointer;
-  font-size: .95rem;
-  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
 }
 
-.nav-user:hover { color: var(--amber-light); }
+.nav-username {
+  color: var(--cream-dim);
+  font-size: 0.88rem;
+  white-space: nowrap;
+}
+
+.nav-impersonating {
+  color: var(--amber-light);
+  font-size: 0.85rem;
+  white-space: nowrap;
+}
+
+.btn-amber {
+  background: var(--amber);
+  color: #0d0800;
+  border: none;
+}
+
+.btn-amber:hover { background: var(--amber-light); }
+
+/* ---- Modal ---- */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 500;
+  padding: 1rem;
+}
+
+.modal-box {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.75rem;
+  width: 100%;
+  max-width: 440px;
+  box-shadow: var(--shadow);
+}
+
+.modal-box h2 {
+  color: var(--amber-light);
+  margin-bottom: 1.25rem;
+  font-size: 1.2rem;
+}
+
+/* ---- Settings modal ---- */
+.settings-section-title {
+  font-size: 0.8rem;
+  font-weight: bold;
+  color: var(--cream-dim);
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  margin-bottom: 0.75rem;
+}
+
+.settings-divider {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1.25rem 0;
+}
+
+/* ---- Admin badges ---- */
+.badge-admin    { background: rgba(200,134,10,.2);  color: var(--amber-light); border: 1px solid var(--amber-dim); }
+.badge-user     { background: rgba(245,230,200,.1); color: var(--cream-dim);   border: 1px solid var(--border); }
+.badge-active   { background: rgba(39,174,96,.15);  color: #5dd490;            border: 1px solid #1e6b3d; }
+.badge-disabled { background: rgba(192,57,43,.2);   color: #e07060;            border: 1px solid var(--danger-dim); }
 
 /* ---- Layout ---- */
 main {