/* Users, roles and permissions - the two panes inside the settings screen.

   They sit in section cards, the shape the rest of that screen is built from, so
   only what these two panes actually add is here.

   The mock draws the permissions as a grid with four fixed columns, one per role.
   That cannot survive roles being made on the screen, so a role is edited on its
   own instead: its ceilings, then its permissions as a checklist grouped by
   module. Recorded as a deliberate departure from the mock. */

.usr-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--elev-1)}
.usr-table th{background:var(--bg);color:var(--muted);padding:10px 14px;text-align:right;font-size:11px;font-weight:700;border-bottom:2px solid var(--border)}
.usr-table td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.usr-table tr:last-child td{border-bottom:none}
.usr-table tr:hover td{background:var(--primary-ll)}
/* Inside a settings card the table is the card's own body: no second border and no
   second shadow - the double-frame trap from 9 September. */
.section-card-body .usr-table{border-radius:0;box-shadow:none}

/* The search sits above the table inside the same body, so it needs the padding
   the flush body takes away. */
.usr-search-row{padding:12px 16px;border-bottom:1px solid var(--border)}

/* The person, the way the customers list draws one: a tinted initial, the name,
   and the address they sign in with underneath. */
.usr-cell{display:flex;align-items:center;gap:10px}
.usr-av{width:32px;height:32px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex-shrink:0}
.usr-name{font-weight:600}
.usr-mail{font-size:11px;color:var(--muted);direction:ltr;text-align:right}

/* Roles on a row. A chip each, because somebody may hold more than one. */
.usr-roles{display:flex;flex-wrap:wrap;gap:5px}
.usr-role-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;background:var(--primary-l);color:var(--primary);white-space:nowrap}
.usr-role-chip.is-system{background:var(--slate-l);color:var(--slate)}

.usr-quiet{color:var(--muted);font-size:12px}

/* Actions kept visible rather than hidden behind the mouse - the rule that came
   out of the customers screen on 10 September. */
.usr-acts{display:flex;gap:4px;justify-content:flex-end}
.usr-act{width:28px;height:28px;border:1px solid var(--border);background:var(--card);border-radius:8px;color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:14px;transition:.15s}
.usr-act:hover{border-color:var(--primary);color:var(--primary)}
.usr-act.is-danger:hover{border-color:var(--danger);color:var(--danger)}
.usr-act:disabled{opacity:.4;cursor:not-allowed}

/* ── The roles tab ── */

.usr-roles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.usr-role-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:.15s}
.usr-role-card:hover{border-color:var(--primary);box-shadow:var(--elev-1)}
.usr-role-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.usr-role-title{font-size:15px;font-weight:800;line-height:1.4}
.usr-role-desc{font-size:12px;color:var(--muted);line-height:1.7;margin-top:2px}
.usr-role-count{font-size:11px;font-weight:700;color:var(--primary);background:var(--primary-l);padding:2px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0}

/* What the role may spend, read at a glance. A dash where it may spend nothing,
   because "0 ج" reads like a figure somebody set and forgot. */
.usr-caps{display:flex;flex-wrap:wrap;gap:6px}
.usr-cap{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;background:var(--bg);color:var(--text2);white-space:nowrap}
.usr-cap.is-off{color:var(--muted)}

/* Pushed down so the feet line up across a row of cards of unequal height. */
.usr-role-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding-top:10px;font-size:12px;color:var(--muted)}

/* ── The permission checklist in the role modal ── */

.usr-perm-group{margin-bottom:16px}
.usr-perm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.usr-perm-title{font-size:13px;font-weight:800;color:var(--text2)}
.usr-perm-all{font-size:11px;font-weight:700;color:var(--primary);background:none;border:0;cursor:pointer;font-family:inherit;padding:2px 4px}
.usr-perm-all:hover{text-decoration:underline}
.usr-perm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.usr-perm{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:.15s;background:var(--card)}
.usr-perm:hover{border-color:var(--primary-l)}
.usr-perm.is-on{border-color:var(--primary);background:var(--primary-ll)}
.usr-perm input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;margin-top:1px;flex-shrink:0}
.usr-perm-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.usr-perm-label{font-size:12.5px;font-weight:700;line-height:1.45}
.usr-perm-note{font-size:11px;color:var(--muted);line-height:1.6}

/* The roles a person holds, in their own modal. Same object, smaller. */
.usr-pick-list{display:grid;gap:8px}
.usr-pick{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:.15s;background:var(--card)}
.usr-pick:hover{border-color:var(--primary-l)}
.usr-pick.is-on{border-color:var(--primary);background:var(--primary-ll)}
.usr-pick input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
/* A column, not two inline spans: the name and the line under it ran together on
   one line otherwise. */
.usr-pick-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.usr-pick-name{font-size:13px;font-weight:700}
.usr-pick-desc{font-size:11px;color:var(--muted);line-height:1.6}

/* The ceilings add up to the most generous of the roles ticked, so the modal says
   what the person will actually be able to do - the answer is not readable off any
   one row once there is more than one. */
.usr-sum{margin-top:12px;padding:11px 13px;border:1px dashed var(--border);border-radius:10px;background:var(--bg);font-size:12px;color:var(--text2);line-height:1.9}
.usr-sum b{font-weight:800}

.usr-locked{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--warning);background:var(--warning-l);padding:2px 9px;border-radius:20px}