// ─────────────────────────────────────────────
// DEV_Users.jsx — App users manager
// Left: user list | Right: user detail
// ─────────────────────────────────────────────

const ROLES = [
  { value:'admin', label:'Admin',  desc:'Full access + manage users'  },
  { value:'user',  label:'User',   desc:'Create, read, update, delete' },
  { value:'guest', label:'Guest',  desc:'View only, no editing'        },
];

function roleColor(role) {
  if (role === 'admin') return { bg:'#fef3c7', color:'#92400e' };
  if (role === 'guest') return { bg:'#f1f5f9', color:'#64748b' };
  return { bg:'#eff6ff', color:'#1d4ed8' };
}

function initials(first, last, email) {
  if (first || last) return `${(first||'').charAt(0)}${(last||'').charAt(0)}`.toUpperCase();
  return (email||'?').charAt(0).toUpperCase();
}

function statusLabel(s) {
  if (s == 2) return 'Inactive';
  if (s == 1) return 'Active';
  return 'Deleted';
}

function DEVUsers({ app, jwt }) {
  const [users,       setUsers]       = React.useState([]);
  const [loading,     setLoading]     = React.useState(true);
  const [error,       setError]       = React.useState(null);
  const [activeId,    setActiveId]    = React.useState(null);

  // Add user modal
  const [addModal,    setAddModal]    = React.useState(false);
  const [addEmail,    setAddEmail]    = React.useState('');
  const [addFirst,    setAddFirst]    = React.useState('');
  const [addLast,     setAddLast]     = React.useState('');
  const [addRole,     setAddRole]     = React.useState('user');
  const [addStep,     setAddStep]     = React.useState('email'); // email | details
  const [addChecking, setAddChecking] = React.useState(false);
  const [addExisting, setAddExisting] = React.useState(null);  // existing DO.users record
  const [addSaving,   setAddSaving]   = React.useState(false);
  const [addError,    setAddError]    = React.useState(null);

  // Detail edit
  const [editing,     setEditing]     = React.useState(false);
  const [editFirst,   setEditFirst]   = React.useState('');
  const [editLast,    setEditLast]    = React.useState('');
  const [editEmailAlt,setEditEmailAlt]= React.useState('');
  const [editEmail,   setEditEmail]   = React.useState('');
  const [editPhone,   setEditPhone]   = React.useState('');
  const [editRole,    setEditRole]    = React.useState('user');
  const [detailSaving,setDetailSaving]= React.useState(false);
  const [detailError, setDetailError] = React.useState(null);
  const [inviteSent,  setInviteSent]  = React.useState(false);
  const [inviteSending,setInviteSending]=React.useState(false);

  React.useEffect(() => { loadUsers(); }, [app.app_id]);

  async function loadUsers() {
    setLoading(true); setError(null);
    try {
      const res  = await apiFetch(`${API_BASE}/v6/dev/apps/${app.app_id}/users`);
      const data = await res.json();
      if (data.status !== 'ok') throw new Error(data.message);
      setUsers(data.users || []);
      if (data.users?.length && !activeId) setActiveId(data.users[0].user_id);
    } catch(err) { setError(err.message); }
    setLoading(false);
  }

  const activeUser = users.find(u => u.user_id === activeId);

  function openDetail(u) {
    setActiveId(u.user_id);
    setEditing(false);
    setDetailError(null);
    setInviteSent(false);
  }

  function startEdit(u) {
    setEditFirst(u.user_first || '');
    setEditLast(u.user_last || '');
    setEditEmail(u.user_email || '');
    setEditEmailAlt(u.user_email_alt || '');
    setEditPhone(u.user_phone || '');
    setEditRole(u.ua_role || 'user');
    setDetailError(null);
    setEditing(true);
  }

  async function saveDetail(e) {
    e.preventDefault();
    setDetailSaving(true); setDetailError(null);
    try {
      const res  = await apiFetch(`${API_BASE}/v6/dev/apps/${app.app_id}/users/${activeUser.user_id}`, {
        method: 'POST',
        body: JSON.stringify({
          first: editFirst, last: editLast,
          email: editEmail, emailAlt: editEmailAlt, phone: editPhone, role: editRole,
        }),
      });
      const data = await res.json();
      if (data.status !== 'ok') throw new Error(data.message);
      setEditing(false);
      await loadUsers();
    } catch(err) { setDetailError(err.message); }
    setDetailSaving(false);
  }

  async function toggleStatus(u) {
    const newStatus = u.ua_status == 1 ? 2 : 1;
    try {
      const res  = await apiFetch(`${API_BASE}/v6/dev/apps/${app.app_id}/users/${u.user_id}`, {
        method: 'POST', body: JSON.stringify({ status: newStatus }),
      });
      const data = await res.json();
      if (data.status !== 'ok') throw new Error(data.message);
      await loadUsers();
    } catch(err) { setDetailError(err.message); }
  }

  async function deleteUser(u) {
    if (!confirm(`Remove ${u.user_first || u.user_email} from this app?`)) return;
    try {
      const res  = await apiFetch(`${API_BASE}/v6/dev/apps/${app.app_id}/users/${u.user_id}`, {
        method: 'POST', body: JSON.stringify({ action: 'delete' }),
      });
      const data = await res.json();
      if (data.status !== 'ok') throw new Error(data.message);
      setActiveId(null);
      await loadUsers();
    } catch(err) { setDetailError(err.message); }
  }

  async function sendInvite(u) {
    setInviteSending(true);
    try {
      const res  = await apiFetch(`${API_BASE}/v6/dev/apps/${app.app_id}/users/${u.user_id}/invite`, {
        method: 'POST',
      });
      const data = await res.json();
      if (data.status !== 'ok') throw new Error(data.message);
      setInviteSent(true);
      setTimeout(() => setInviteSent(false), 4000);
    } catch(err) { setDetailError(err.message); }
    setInviteSending(false);
  }

  // ── Add user modal ───────────────────────────
  function openAddModal() {
    setAddEmail(''); setAddFirst(''); setAddLast('');
    setAddRole('user'); setAddStep('email');
    setAddExisting(null); setAddError(null);
    setAddModal(true);
  }

  async function checkEmail(e) {
    e.preventDefault();
    setAddChecking(true); setAddError(null);
    try {
      const res  = await apiFetch(`${API_BASE}/v6/dev/apps/${app.app_id}/users/check`, {
        method: 'POST', body: JSON.stringify({ email: addEmail }),
      });
      const data = await res.json();
      if (data.status !== 'ok') throw new Error(data.message);
      if (data.exists) {
        setAddExisting(data.user);
        setAddFirst(data.user.user_first || '');
        setAddLast(data.user.user_last || '');
      } else {
        setAddExisting(null);
        setAddFirst(''); setAddLast('');
      }
      setAddStep('details');
    } catch(err) { setAddError(err.message); }
    setAddChecking(false);
  }

  async function submitAddUser(e) {
    e.preventDefault();
    setAddSaving(true); setAddError(null);
    try {
      const res  = await apiFetch(`${API_BASE}/v6/dev/apps/${app.app_id}/users`, {
        method: 'POST',
        body: JSON.stringify({
          email: addEmail, first: addFirst, last: addLast,
          role: addRole, existingUserId: addExisting?.user_id || null,
        }),
      });
      const data = await res.json();
      if (data.status !== 'ok') throw new Error(data.message);
      setAddModal(false);
      await loadUsers();
      setActiveId(data.userId);
    } catch(err) { setAddError(err.message); }
    setAddSaving(false);
  }

  // ── Filtered list ────────────────────────────
  const visibleUsers = users
    .filter(u => u.ua_status != 0)
    .sort((a,b) => {
      const an = `${a.user_first||''} ${a.user_last||''}`.trim() || a.user_email;
      const bn = `${b.user_first||''} ${b.user_last||''}`.trim() || b.user_email;
      return an.localeCompare(bn);
    });

  if (loading) return <div style={SU.empty}>Loading…</div>;
  if (error)   return <div style={SU.errorMsg}>{error}</div>;

  return (
    <div style={SU.layout}>

      {/* ── Left: User list ── */}
      <div style={SU.sidebar}>
        <div style={SU.sidebarHeader}>
          <span style={SU.sidebarTitle}>Users</span>
          <button style={SU.addBtn} onClick={openAddModal} title="Add user">+</button>
        </div>

{/* Show inactive toggle removed — all users shown */}
        <div style={SU.toggleRow}>
          
          <span style={SU.userCount}>{visibleUsers.length}</span>
        </div>

        {visibleUsers.length === 0 && (
          <div style={SU.sidebarEmpty}>No users yet</div>
        )}

        {visibleUsers.map(u => {
          const name = [u.user_first, u.user_last].filter(Boolean).join(' ') || u.user_email;
          const rc   = roleColor(u.ua_role);
          const inactive = u.ua_status == 2;
          return (
            <div key={u.user_id}
              style={{ ...SU.userItem, ...(activeId === u.user_id ? SU.userItemActive : {}),
                       ...(inactive ? SU.userItemInactive : {}) }}
              onClick={() => openDetail(u)}>
              <div style={{ ...SU.avatar, ...(inactive ? { opacity:0.4 } : {}) }}>
                {initials(u.user_first, u.user_last, u.user_email)}
              </div>
              <div style={SU.userItemInfo}>
                <div style={SU.userItemName}>{name}</div>
                <div style={SU.userItemMeta}>
                  <span style={{ ...SU.roleBadge, background:rc.bg, color:rc.color }}>
                    {u.ua_role}
                  </span>
                  {inactive && <span style={SU.inactiveBadge}>inactive</span>}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* ── Right: User detail ── */}
      <div style={SU.main}>
        {!activeUser ? (
          <div style={SU.empty}>
            {users.length === 0 ? (
              <>
                <div style={SU.emptyIcon}>👤</div>
                <div style={SU.emptyTitle}>No users yet</div>
                <div style={SU.emptySub}>Add the first user to this app</div>
                <button style={SU.createBtn} onClick={openAddModal}>+ Add User</button>
              </>
            ) : (
              <div style={{ color:'#94a3b8' }}>Select a user</div>
            )}
          </div>
        ) : !editing ? (
          /* ── View mode ── */
          <div>
            <div style={SU.detailHeader}>
              <div style={SU.detailLeft}>
                <div style={SU.avatarLg}>
                  {initials(activeUser.user_first, activeUser.user_last, activeUser.user_email)}
                </div>
                <div>
                  <div style={SU.detailName}>
                    {[activeUser.user_first, activeUser.user_last].filter(Boolean).join(' ') || '—'}
                  </div>
                  <div style={SU.detailEmail}>{activeUser.user_email}</div>
                  <div style={{ display:'flex', gap:8, marginTop:6, alignItems:'center' }}>
                    {(() => { const rc = roleColor(activeUser.ua_role); return (
                      <span style={{ ...SU.roleBadgeLg, background:rc.bg, color:rc.color }}>
                        {activeUser.ua_role}
                      </span>
                    ); })()}
                    <span style={{ ...SU.statusDot,
                      background: activeUser.ua_status == 1 ? '#22c55e' : '#f59e0b' }} />
                    <span style={SU.statusText}>{statusLabel(activeUser.ua_status)}</span>
                  </div>
                </div>
              </div>
              <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                <button style={SU.editBtn} onClick={() => startEdit(activeUser)}>Edit</button>
                <button style={SU.inviteBtn}
                  disabled={inviteSending}
                  onClick={() => sendInvite(activeUser)}>
                  {inviteSent ? '✓ Sent' : inviteSending ? 'Sending…' : 'Send Invite'}
                </button>
                <button style={SU.toggleBtn} onClick={() => toggleStatus(activeUser)}>
                  {activeUser.ua_status == 1 ? 'Set Inactive' : 'Set Active'}
                </button>
                <button style={SU.deleteBtn} onClick={() => deleteUser(activeUser)}>Remove</button>
              </div>
            </div>

            {detailError && <div style={SU.errorMsg}>{detailError}</div>}

            <div style={SU.detailGrid}>
              <div style={SU.detailCard}>
                <div style={SU.detailCardTitle}>Profile</div>
                <Field label="First Name"    value={activeUser.user_first} />
                <Field label="Last Name"     value={activeUser.user_last} />
                <Field label="Primary Email" value={activeUser.user_email} />
                <Field label="Alt Email"     value={activeUser.user_email_alt} />
                <Field label="2FA Phone"     value={activeUser.user_phone} />
              </div>
              <div style={SU.detailCard}>
                <div style={SU.detailCardTitle}>Access</div>
                <Field label="Role"          value={ROLES.find(r=>r.value===activeUser.ua_role)?.label} />
                <Field label="Role Desc"     value={ROLES.find(r=>r.value===activeUser.ua_role)?.desc} />
                <Field label="Status"        value={statusLabel(activeUser.ua_status)} />
                <Field label="Added"         value={activeUser.ua_date_insert ? new Date(activeUser.ua_date_insert).toLocaleDateString('en-US',{year:'numeric',month:'short',day:'numeric'}) : '—'} />
                <Field label="Last Updated"  value={activeUser.ua_date_update ? new Date(activeUser.ua_date_update).toLocaleDateString('en-US',{year:'numeric',month:'short',day:'numeric'}) : '—'} />
              </div>
            </div>
          </div>
        ) : (
          /* ── Edit mode ── */
          <div>
            <div style={SU.editHeader}>
              <div style={SU.detailName}>
                Edit: {[activeUser.user_first, activeUser.user_last].filter(Boolean).join(' ') || activeUser.user_email}
              </div>
              <button style={SU.cancelEditBtn} onClick={() => setEditing(false)}>Cancel</button>
            </div>
            {detailError && <div style={SU.errorMsg}>{detailError}</div>}
            <form onSubmit={saveDetail}>
              <div style={SU.editTwoCol}>
                {/* Left column — fields */}
                <div>
                  <label style={SU.label}>First Name</label>
                  <input style={SU.input} value={editFirst}
                    onChange={e=>setEditFirst(e.target.value)} placeholder="First" />
                  <label style={SU.label}>Last Name</label>
                  <input style={SU.input} value={editLast}
                    onChange={e=>setEditLast(e.target.value)} placeholder="Last" />
                  <label style={SU.label}>Primary Email</label>
                  <input style={SU.input} value={editEmail} type="email"
                    onChange={e=>setEditEmail(e.target.value)} placeholder="user@example.com" />
                  <label style={SU.label}>Alt Email</label>
                  <input style={SU.input} value={editEmailAlt} type="email"
                    onChange={e=>setEditEmailAlt(e.target.value)} placeholder="alt@email.com" />
                  <label style={SU.label}>2FA Phone</label>
                  <input style={SU.input} value={editPhone}
                    onChange={e=>setEditPhone(e.target.value)} placeholder="+1 555 000 0000" />
                </div>
                {/* Right column — role */}
                <div>
                  <label style={SU.label}>Role</label>
                  <div style={SU.roleStack}>
                    {ROLES.map(r => (
                      <button key={r.value} type="button"
                        style={{ ...SU.roleOption, ...(editRole===r.value ? SU.roleOptionActive : {}) }}
                        onClick={() => setEditRole(r.value)}>
                        <div style={SU.roleOptionName}>{r.label}</div>
                        <div style={SU.roleOptionDesc}>{r.desc}</div>
                      </button>
                    ))}
                    <button type="button"
                      style={{ ...SU.roleOption, opacity:0.45, cursor:'not-allowed' }}>
                      <div style={SU.roleOptionName}>Custom</div>
                      <div style={SU.roleOptionDesc}>Coming soon</div>
                    </button>
                  </div>
                </div>
              </div>
              <div style={{ display:'flex', gap:8, marginTop:20 }}>
                <button type="submit" style={SU.saveBtn} disabled={detailSaving}>
                  {detailSaving ? 'Saving…' : 'Save Changes'}
                </button>
                <button type="button" style={SU.cancelEditBtn} onClick={() => setEditing(false)}>
                  Cancel
                </button>
              </div>
            </form>
          </div>
        )}
      </div>

      {/* ── Add User Modal ── */}
      {addModal && (
        <div style={SU.backdrop} onClick={e => { if(e.target===e.currentTarget) setAddModal(false); }}>
          <div style={SU.modal}>
            <div style={SU.modalHeader}>
              <div style={SU.modalTitle}>Add User</div>
              <button style={SU.closeBtn} onClick={() => setAddModal(false)}>✕</button>
            </div>
            {addError && <div style={SU.errorMsg}>{addError}</div>}

            {addStep === 'email' ? (
              <form onSubmit={checkEmail}>
                <label style={SU.label}>Email Address</label>
                <input style={SU.input} type="email" value={addEmail} autoFocus
                  onChange={e => setAddEmail(e.target.value)}
                  placeholder="user@example.com" required />
                <div style={SU.modalFooter}>
                  <button type="button" style={SU.cancelEditBtn} onClick={() => setAddModal(false)}>Cancel</button>
                  <button type="submit" style={SU.saveBtn} disabled={addChecking || !addEmail.trim()}>
                    {addChecking ? 'Checking…' : 'Next →'}
                  </button>
                </div>
              </form>
            ) : (
              <form onSubmit={submitAddUser}>
                {addExisting ? (
                  <div style={SU.existingBanner}>
                    <span style={{ fontSize:16 }}>✓</span>
                    <div>
                      <div style={{ fontWeight:600, fontSize:13 }}>Existing DataObjects user</div>
                      <div style={{ fontSize:12, color:'#64748b', marginTop:2 }}>
                        {[addExisting.user_first, addExisting.user_last].filter(Boolean).join(' ') || addEmail} · will be added to this app
                      </div>
                    </div>
                  </div>
                ) : (
                  <div style={SU.newUserBanner}>
                    <span style={{ fontSize:16 }}>✦</span>
                    <div>
                      <div style={{ fontWeight:600, fontSize:13 }}>New user</div>
                      <div style={{ fontSize:12, color:'#64748b', marginTop:2 }}>
                        A new account will be created for {addEmail}
                      </div>
                    </div>
                  </div>
                )}

                {!addExisting && (
                  <div style={SU.formGrid}>
                    <div>
                      <label style={SU.label}>First Name</label>
                      <input style={SU.input} value={addFirst}
                        onChange={e=>setAddFirst(e.target.value)} placeholder="First" />
                    </div>
                    <div>
                      <label style={SU.label}>Last Name</label>
                      <input style={SU.input} value={addLast}
                        onChange={e=>setAddLast(e.target.value)} placeholder="Last" />
                    </div>
                  </div>
                )}

                <label style={SU.label}>Role</label>
                <div style={SU.roleGrid}>
                  {ROLES.map(r => (
                    <button key={r.value} type="button"
                      style={{ ...SU.roleOption, ...(addRole===r.value ? SU.roleOptionActive : {}) }}
                      onClick={() => setAddRole(r.value)}>
                      <div style={SU.roleOptionName}>{r.label}</div>
                      <div style={SU.roleOptionDesc}>{r.desc}</div>
                    </button>
                  ))}
                </div>

                <div style={SU.modalFooter}>
                  <button type="button" style={SU.cancelEditBtn}
                    onClick={() => setAddStep('email')}>← Back</button>
                  <button type="submit" style={SU.saveBtn} disabled={addSaving}>
                    {addSaving ? 'Adding…' : 'Add User'}
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

// ── Simple field display row ──────────────────
function Field({ label, value }) {
  return (
    <div style={SU.fieldRow}>
      <span style={SU.fieldLabel}>{label}</span>
      <span style={SU.fieldValue}>{value || '—'}</span>
    </div>
  );
}

// ── Styles ────────────────────────────────────
const SU = {
  layout:          { display:'flex', gap:0, minHeight:400, border:'1px solid #e2e8f0',
                     borderRadius:12, overflow:'hidden', background:'#fff' },
  sidebar:         { width:250, borderRight:'1px solid #e2e8f0', background:'#f8fafc',
                     flexShrink:0 },
  sidebarHeader:   { display:'flex', alignItems:'center', justifyContent:'space-between',
                     padding:'14px 16px 10px', borderBottom:'1px solid #e2e8f0' },
  sidebarTitle:    { fontSize:11, fontWeight:700, color:'#64748b', letterSpacing:'0.07em',
                     textTransform:'uppercase' },
  addBtn:          { width:24, height:24, borderRadius:6, background:'#0f1923', color:'#fff',
                     border:'none', fontSize:16, cursor:'pointer', lineHeight:'22px',
                     textAlign:'center', fontFamily:'inherit' },
  toggleRow:       { display:'flex', alignItems:'center', justifyContent:'space-between',
                     padding:'8px 16px', borderBottom:'1px solid #f1f5f9' },
  toggleLabel:     { fontSize:12, color:'#64748b', cursor:'pointer', display:'flex',
                     alignItems:'center' },
  userCount:       { fontSize:11, color:'#94a3b8' },
  sidebarEmpty:    { padding:'20px 16px', fontSize:13, color:'#94a3b8', textAlign:'center' },
  userItem:        { display:'flex', alignItems:'center', gap:10, padding:'10px 16px',
                     cursor:'pointer', borderBottom:'1px solid #f1f5f9' },
  userItemActive:  { background:'#eff6ff', borderLeft:'3px solid #2563eb' },
  userItemInactive:{ opacity:0.6 },
  avatar:          { width:32, height:32, borderRadius:'50%', background:'#0f1923',
                     color:'#fff', display:'flex', alignItems:'center', justifyContent:'center',
                     fontSize:12, fontWeight:600, flexShrink:0 },
  userItemInfo:    { minWidth:0 },
  userItemName:    { fontSize:13, fontWeight:500, color:'#0f1923', whiteSpace:'nowrap',
                     overflow:'hidden', textOverflow:'ellipsis' },
  userItemMeta:    { display:'flex', gap:6, marginTop:3, alignItems:'center' },
  roleBadge:       { fontSize:10, fontWeight:600, padding:'1px 6px', borderRadius:4,
                     textTransform:'uppercase', letterSpacing:'0.04em' },
  inactiveBadge:   { fontSize:10, color:'#f59e0b', fontWeight:500 },
  // Detail
  main:            { flex:1, padding:'24px 28px', minWidth:0 },
  detailHeader:    { display:'flex', justifyContent:'space-between', alignItems:'flex-start',
                     marginBottom:24, gap:16, flexWrap:'wrap' },
  detailLeft:      { display:'flex', gap:16, alignItems:'flex-start' },
  avatarLg:        { width:52, height:52, borderRadius:'50%', background:'#0f1923', color:'#fff',
                     display:'flex', alignItems:'center', justifyContent:'center',
                     fontSize:18, fontWeight:600, flexShrink:0 },
  detailName:      { fontSize:18, fontWeight:700, color:'#0f1923' },
  detailEmail:     { fontSize:13, color:'#64748b', marginTop:2 },
  roleBadgeLg:     { fontSize:11, fontWeight:600, padding:'3px 10px', borderRadius:5,
                     textTransform:'uppercase', letterSpacing:'0.05em' },
  statusDot:       { width:8, height:8, borderRadius:'50%' },
  statusText:      { fontSize:12, color:'#64748b' },
  editBtn:         { padding:'7px 16px', background:'#f8fafc', color:'#374151',
                     border:'1.5px solid #e2e8f0', borderRadius:7, fontSize:12,
                     cursor:'pointer', fontFamily:'DM Sans, sans-serif', fontWeight:500 },
  inviteBtn:       { padding:'7px 16px', background:'#eff6ff', color:'#2563eb',
                     border:'1.5px solid #bfdbfe', borderRadius:7, fontSize:12,
                     cursor:'pointer', fontFamily:'DM Sans, sans-serif', fontWeight:500 },
  toggleBtn:       { padding:'7px 16px', background:'#fff', color:'#92400e',
                     border:'1.5px solid #fde68a', borderRadius:7, fontSize:12,
                     cursor:'pointer', fontFamily:'DM Sans, sans-serif', fontWeight:500 },
  deleteBtn:       { padding:'7px 16px', background:'#fff', color:'#dc2626',
                     border:'1.5px solid #fecaca', borderRadius:7, fontSize:12,
                     cursor:'pointer', fontFamily:'DM Sans, sans-serif', fontWeight:500 },
  detailGrid:      { display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(260px,1fr))', gap:16 },
  detailCard:      { background:'#f8fafc', borderRadius:10, padding:'16px 20px',
                     border:'1px solid #f1f5f9' },
  detailCardTitle: { fontSize:11, fontWeight:700, color:'#64748b', letterSpacing:'0.07em',
                     textTransform:'uppercase', marginBottom:12, paddingBottom:8,
                     borderBottom:'1px solid #e2e8f0' },
  fieldRow:        { display:'flex', justifyContent:'space-between', padding:'7px 0',
                     borderBottom:'1px solid #f1f5f9', gap:12 },
  fieldLabel:      { fontSize:12, color:'#94a3b8', flexShrink:0 },
  fieldValue:      { fontSize:12, color:'#0f1923', fontWeight:500, textAlign:'right',
                     wordBreak:'break-all' },
  // Edit mode
  editHeader:      { display:'flex', justifyContent:'space-between', alignItems:'center',
                     marginBottom:20 },
  formGrid:        { display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:4 },
  label:           { display:'block', fontSize:12, fontWeight:500, color:'#374151', marginBottom:5 },
  input:           { width:'100%', padding:'9px 12px', border:'1.5px solid #e2e8f0',
                     borderRadius:7, fontSize:13, fontFamily:'DM Sans, sans-serif',
                     outline:'none', marginBottom:14, color:'#0f1923' },
  editTwoCol:      { display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginBottom:4 },
  roleStack:       { display:'flex', flexDirection:'column', gap:8 },
  roleGrid:        { display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8, marginBottom:8 },
  roleOption:      { padding:'12px 10px', border:'1.5px solid #e2e8f0', borderRadius:8,
                     background:'#fff', cursor:'pointer', textAlign:'left', fontFamily:'inherit' },
  roleOptionActive:{ border:'1.5px solid #2563eb', background:'#eff6ff' },
  roleOptionName:  { fontSize:13, fontWeight:600, color:'#0f1923', marginBottom:3 },
  roleOptionDesc:  { fontSize:11, color:'#64748b', lineHeight:1.4 },
  saveBtn:         { padding:'9px 20px', background:'#0f1923', color:'#fff', border:'none',
                     borderRadius:7, fontSize:13, fontWeight:600, cursor:'pointer',
                     fontFamily:'DM Sans, sans-serif' },
  cancelEditBtn:   { padding:'9px 18px', background:'#fff', color:'#374151',
                     border:'1.5px solid #e2e8f0', borderRadius:7, fontSize:13,
                     cursor:'pointer', fontFamily:'DM Sans, sans-serif' },
  // Modal
  backdrop:        { position:'fixed', inset:0, background:'rgba(0,0,0,0.4)',
                     display:'flex', alignItems:'center', justifyContent:'center', zIndex:200 },
  modal:           { background:'#fff', borderRadius:14, padding:'28px 32px', width:'100%',
                     maxWidth:480, boxShadow:'0 20px 60px rgba(0,0,0,0.2)' },
  modalHeader:     { display:'flex', justifyContent:'space-between', alignItems:'center',
                     marginBottom:20 },
  modalTitle:      { fontSize:16, fontWeight:700, color:'#0f1923' },
  closeBtn:        { background:'none', border:'none', color:'#94a3b8', fontSize:18,
                     cursor:'pointer', padding:0 },
  modalFooter:     { display:'flex', justifyContent:'flex-end', gap:8, marginTop:20 },
  existingBanner:  { display:'flex', gap:12, alignItems:'flex-start', background:'#f0fdf4',
                     border:'1px solid #bbf7d0', borderRadius:8, padding:'12px 14px',
                     marginBottom:16 },
  newUserBanner:   { display:'flex', gap:12, alignItems:'flex-start', background:'#eff6ff',
                     border:'1px solid #bfdbfe', borderRadius:8, padding:'12px 14px',
                     marginBottom:16 },
  errorMsg:        { background:'#fef2f2', color:'#dc2626', padding:'10px 12px', borderRadius:7,
                     fontSize:12, marginBottom:14, border:'1px solid #fecaca' },
  empty:           { display:'flex', flexDirection:'column', alignItems:'center',
                     justifyContent:'center', padding:'60px 20px', color:'#94a3b8' },
  emptyIcon:       { fontSize:40, marginBottom:12 },
  emptyTitle:      { fontSize:16, fontWeight:600, color:'#374151', marginBottom:6 },
  emptySub:        { fontSize:13, color:'#94a3b8' },
  createBtn:       { padding:'9px 18px', background:'#0f1923', color:'#fff', border:'none',
                     borderRadius:8, fontSize:13, fontWeight:600, cursor:'pointer',
                     fontFamily:'DM Sans, sans-serif', marginTop:12 },
};