/* ==========================================================================
   USERS & ROLES
   ========================================================================== */
.users-panel { padding: 0 0 32px; }
#users-table th {
    text-align: left; padding: 12px 16px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-3); border-bottom: 1px solid var(--line);
}
#users-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }

.user-role-chip {
    display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 500;
    margin-right: 4px; background: var(--accent-soft); color: var(--ink);
}
.user-status-chip { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.user-status-chip.active { background: var(--ok-soft); color: var(--ink); }
.user-status-chip.inactive { background: var(--danger-soft); color: var(--danger-strong); }

.roles-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.roles-list-column, .permission-matrix-column { border-radius: 12px; padding: 16px; }
.roles-list-header {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin-bottom: 12px;
}
.btn-icon-add {
    background: none; border: 1px solid var(--line); color: var(--ink-2);
    width: 26px; height: 26px; border-radius: 6px; cursor: pointer; transition: var(--transition-fast);
}
.btn-icon-add:hover { color: var(--ink); border-color: var(--line-strong); }
.role-list-item {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px;
    cursor: pointer; transition: var(--transition-fast); margin-bottom: 4px; border: 1px solid transparent;
}
.role-list-item:hover { background: var(--surface-2); }
.role-list-item.active { background: var(--accent-soft); border-color: var(--link-line); }
.role-list-item .role-name { font-size: 13px; font-weight: 600; }
.role-list-item .role-desc { font-size: 11.5px; color: var(--ink-3); }

.permission-matrix-header { margin-bottom: 16px; }
.permission-matrix-header h3 { font-size: 16px; margin-bottom: 4px; }
.permission-matrix-table { width: 100%; border-collapse: collapse; }
.permission-matrix-table th {
    text-align: left; padding: 10px 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.permission-matrix-table th:not(:first-child), .permission-matrix-table td:not(:first-child) { text-align: center; }
.permission-matrix-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.permission-matrix-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--nml-deep); }
:root[data-theme="dark"] .permission-matrix-table input[type="checkbox"] { accent-color: var(--nml-electric); }
.permission-matrix-empty { color: var(--ink-3); text-align: center; padding: 40px 0; font-size: 13px; }