.mobile-menu { display: grid; gap: 12px; }
.mobile-menu > a { display: flex; align-items: center; gap: 14px; padding: 18px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; }
.mobile-menu > a > span { font-size: 26px; color: #146d8b; }
.mobile-menu > a > div { flex: 1; }
.mobile-menu small { display: block; margin-top: 6px; color: var(--muted); }
.employee-directory { min-width: 0; }
.employee-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.employee-search label { grid-column: 1/-1; font-weight: 600; }
.employee-search input { width: 100%; min-width: 0; }
.employee-list { display: grid; gap: 10px; margin-bottom: 12px; }
.employee-card { padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow-wrap: anywhere; }
.employee-heading { display: flex; align-items: center; gap: 12px; }
.employee-heading h3 { margin: 0 0 4px; font-size: 16px; }
.employee-heading p, .employee-department { margin: 4px 0; font-size: 13px; color: var(--muted); }
.employee-department { margin: 12px 0; }
.employee-photo { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #e6f1f5; color: #146d8b; overflow: hidden; font-weight: 600; }
.employee-photo img, .mobile-app #current-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mobile-app #current-user-avatar { overflow: hidden; }
.employee-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.employee-actions > * { flex: 1; }
.employee-card > small { color: var(--muted); }