improve(company): clearer permission labels and role descriptions in team tab

Permission checkboxes now show descriptive labels with hints explaining
what each permission controls. Role descriptions visible under each member.
Dropdown options in add form also more descriptive.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

templates/company_edit.html

@@ -319,7 +319,8 @@
     .team-perms-toggle { margin-top: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background: var(--surface-alt, #f8fafc); border-radius: var(--radius); }
     .team-perms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-xs); }
     .team-perm-item { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); padding: 4px 0; }
-    .team-perm-item input[type="checkbox"] { accent-color: var(--primary, #2E4872); width: 16px; height: 16px; }
+    .team-perm-item input[type="checkbox"] { accent-color: var(--primary, #2E4872); width: 16px; height: 16px; flex-shrink: 0; }
+    .team-perm-hint { display: block; font-size: 11px; color: var(--text-secondary, #94a3b8); line-height: 1.3; margin-top: 1px; }
     .team-empty { text-align: center; padding: var(--spacing-xl); color: var(--text-secondary); }
     .team-loading { text-align: center; padding: var(--spacing-xl); color: var(--text-secondary); }
     .team-you-badge { font-size: 11px; background: #e0f2fe; color: #0369a1; padding: 1px 6px; border-radius: 8px; margin-left: 6px; }
@@ -1203,9 +1204,9 @@
                     <div>
                         <label for="teamRole">Rola</label>
                         <select id="teamRole" class="form-input">
-                            <option value="EMPLOYEE">Pracownik — może edytować dane firmy</option>
-                            <option value="VIEWER">Obserwator — może przeglądać dashboard</option>
-                            <option value="MANAGER">Kadra zarządzająca — pełna kontrola</option>
+                            <option value="EMPLOYEE">Pracownik — edytuje wybrane sekcje profilu firmy</option>
+                            <option value="VIEWER">Obserwator — widzi dashboard, ale nie edytuje</option>
+                            <option value="MANAGER">Kadra zarządzająca — pełna kontrola i zarządzanie zespołem</option>
                         </select>
                     </div>
                     <div>
@@ -1687,13 +1688,19 @@ var teamLoaded = false;
 var CSRF_TOKEN = '{{ csrf_token() }}';
 
 var PERM_LABELS = {
-    'can_edit_description': 'Edycja opisu',
-    'can_edit_services': 'Edycja usług',
-    'can_edit_contacts': 'Edycja kontaktów',
-    'can_edit_social': 'Edycja social media',
-    'can_manage_classifieds': 'Zarządzanie ogłoszeniami',
-    'can_post_forum': 'Posty na forum',
-    'can_view_analytics': 'Podgląd statystyk'
+    'can_edit_description': { label: 'Opis i historia firmy', hint: 'Zakładka „Opis" w profilu firmy' },
+    'can_edit_services': { label: 'Usługi i kompetencje', hint: 'Zakładka „Usługi" w profilu firmy' },
+    'can_edit_contacts': { label: 'Telefony i adresy email', hint: 'Zakładka „Kontakt" w profilu firmy' },
+    'can_edit_social': { label: 'Social media i strona www', hint: 'Zakładka „Social Media" w profilu firmy' },
+    'can_manage_classifieds': { label: 'Ogłoszenia B2B firmy', hint: 'Publikowanie ogłoszeń na Tablicy B2B' },
+    'can_post_forum': { label: 'Posty na forum', hint: 'Pisanie postów na forum w imieniu firmy' },
+    'can_view_analytics': { label: 'Statystyki firmy', hint: 'Wyświetlenia profilu, wyszukiwania, trendy' }
+};
+
+var ROLE_INFO = {
+    'VIEWER': { label: 'Obserwator', desc: 'Widzi dashboard firmy, ale nie może niczego edytować' },
+    'EMPLOYEE': { label: 'Pracownik', desc: 'Może edytować wybrane sekcje profilu firmy (wg uprawnień poniżej)' },
+    'MANAGER': { label: 'Kadra zarządzająca', desc: 'Pełna kontrola nad profilem firmy i zarządzanie zespołem' }
 };
 
 // Hook into tab switcher — lazy load team on first click
@@ -1725,7 +1732,7 @@ function loadTeamMembers() {
         data.members.forEach(function(m) {
             var initials = (m.name || '?').split(' ').map(function(w) { return w[0]; }).join('').substring(0, 2).toUpperCase();
             var roleClass = m.role === 'MANAGER' ? 'manager' : (m.role === 'EMPLOYEE' ? 'employee' : 'viewer');
-            var roleLabel = m.role === 'MANAGER' ? 'Kadra zarządzająca' : (m.role === 'EMPLOYEE' ? 'Pracownik' : 'Obserwator');
+            var ri = ROLE_INFO[m.role] || { label: m.role, desc: '' };
 
             html += '<div class="team-member-card" data-user-id="' + m.id + '">';
             html += '<div class="team-member-avatar">' + initials + '</div>';
@@ -1745,20 +1752,24 @@ function loadTeamMembers() {
                 html += '</select>';
                 html += '<button type="button" class="team-btn-remove" onclick="removeTeamMember(' + m.id + ', \'' + escapeHtml(m.name || m.email).replace(/'/g, "\\'") + '\')">Usuń</button>';
             } else {
-                html += '<span class="team-role-badge ' + roleClass + '">' + roleLabel + '</span>';
+                html += '<span class="team-role-badge ' + roleClass + '">' + ri.label + '</span>';
             }
             html += '</div>';
 
+            // Role description
+            html += '<div class="team-role-desc" style="width:100%;font-size:12px;color:var(--text-secondary);margin-top:-4px;padding:0 0 4px 54px;">' + ri.desc + '</div>';
+
             // Permissions for EMPLOYEE
             if (m.role === 'EMPLOYEE' && !m.is_current_user && m.permissions) {
                 html += '<div class="team-perms-toggle" style="width:100%;">';
-                html += '<div style="font-size:var(--font-size-sm);font-weight:500;margin-bottom:6px;color:var(--text-secondary);">Uprawnienia:</div>';
+                html += '<div style="font-size:var(--font-size-sm);font-weight:500;margin-bottom:6px;color:var(--text-secondary);">Co może edytować w profilu firmy:</div>';
                 html += '<div class="team-perms-grid">';
                 Object.keys(PERM_LABELS).forEach(function(key) {
+                    var p = PERM_LABELS[key];
                     var checked = m.permissions[key] ? ' checked' : '';
-                    html += '<label class="team-perm-item">';
+                    html += '<label class="team-perm-item" title="' + p.hint + '">';
                     html += '<input type="checkbox"' + checked + ' onchange="togglePermission(' + m.id + ', \'' + key + '\', this.checked)">';
-                    html += PERM_LABELS[key];
+                    html += '<span>' + p.label + '<span class="team-perm-hint">' + p.hint + '</span></span>';
                     html += '</label>';
                 });
                 html += '</div></div>';