/* ==========================================================
   USERS – PAGE-SPECIFIC STYLES
   Aligned with admin UI baseline
   ========================================================== */




/* ==========================================================
   TABLE COLUMN SIZING
   Design goals:
   - Keep table compact
   - Email column can wrap
   - Roles & status are visually dense
   ========================================================== */

/* Username */
#userTable th:nth-child(1) {
    width: 80px;
}

/* First name */
#userTable th:nth-child(2) {
    width: 100px;
}

/* Last name */
#userTable th:nth-child(3) {
    width: 100px;
}

/* Email (flexible, can wrap) */
#userTable th:nth-child(4) {
    width: 120px;
    min-width: 80px;
}

/* Roles (short acronyms) */
#userTable th:nth-child(5) {
    width: 20px;
}

/* Account state (icons / badges) */
#userTable th:nth-child(6) {
    width: 40px;
}

/* Last login */
#userTable th:nth-child(7) {
    width: 40px;
}


/* ==========================================================
   CELL BEHAVIOR & ALIGNMENT
   ========================================================== */

/* Email: allow breaking long addresses */
#userTable td:nth-child(4) {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* account state, last login:
   - centered
   - allow wrapping when needed
*/
#userTable td:nth-child(5),
#userTable td:nth-child(6),
#userTable td:nth-child(7) {
    text-align: center;
    white-space: normal;
    line-height: 1.4;
}

/* ==========================================================
   USER ROLES
   ========================================================== */

.badge-role {
    background: #eef1f4;       /* neutral light gray */
    color: #2f2f2f;
    border: 1px solid #d0d4d8;

    display: inline-block;
    margin: 2px 2px;   /* vertical + horizontal spacing */

    font-weight: 600;
    font-size: 11px;
    padding: 2px 6px;

    border-radius: 10px;
    letter-spacing: 0.4px;
}