.env

@@ -0,0 +1,3 @@
+DB_NAME=haikal_db
+DB_USER=faheed
+DB_PASSWORD=Faheed@215

recruitment/email_service.py

@@ -318,7 +318,7 @@ def send_bulk_email(subject, message, recipient_list, request=None, attachments=
                         sender_user_id,
                         job_id,
                         hook='recruitment.tasks.email_success_hook',
-
+ 
                     )
                     task_ids.append(task_id)
 

recruitment/forms.py

@@ -302,13 +302,25 @@ class ApplicationForm(forms.ModelForm):
             "hiring_agency": forms.Select(attrs={"class": "form-select"}),
         }
 
-    def __init__(self, *args, **kwargs):
+    def __init__(self, *args,current_agency=None,current_job=None,**kwargs):
         super().__init__(*args, **kwargs)
         self.helper = FormHelper()
         self.helper.form_method = "post"
         self.helper.form_class = "form-horizontal"
         self.helper.label_class = "col-md-3"
         self.helper.field_class = "col-md-9"
+        if current_agency:
+            # IMPORTANT: Replace 'agency' below with the actual field name 
+            # on your Person model that links it back to the Agency model.
+            self.fields['person'].queryset = self.fields['person'].queryset.filter(
+                agency=current_agency
+            )
+            self.fields['job'].queryset = self.fields['job'].queryset.filter(
+                pk=current_job.id
+            )
+            self.fields['job'].initial = current_job 
+
+            self.fields['job'].widget.attrs['readonly'] = True
 
         # Make job field read-only if it's being pre-populated
         job_value = self.initial.get("job")
@@ -1990,7 +2002,7 @@ class OnsiteLocationForm(forms.ModelForm):
 class InterviewEmailForm(forms.Form):
     subject = forms.CharField(max_length=255, widget=forms.TextInput(attrs={'class': 'form-control'}))
     message_for_candidate = forms.CharField(widget=forms.Textarea(attrs={'class': 'form-control', 'rows': 6}))
-    message_for_agency = forms.CharField(widget=forms.Textarea(attrs={'class': 'form-control', 'rows': 6}))
+    message_for_agency = forms.CharField(widget=forms.Textarea(attrs={'class': 'form-control', 'rows': 6}),required=False)
     message_for_participants = forms.CharField(widget=forms.Textarea(attrs={'class': 'form-control', 'rows': 6}))
 
     def __init__(self, *args, candidate, external_participants, system_participants, meeting, job, **kwargs):
@@ -2025,7 +2037,7 @@ class InterviewEmailForm(forms.Form):
         job_title = job.title
         agency_name = (
             candidate.hiring_agency.name
-            if candidate.belong_to_agency and candidate.hiring_agency
+            if candidate.belong_to_an_agency and candidate.hiring_agency
             else "Hiring Agency"
         )
 

recruitment/migrations/0003_jobposting_cv_zip_file_jobposting_zip_created.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.2.7 on 2025-11-19 14:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('recruitment', '0002_alter_jobposting_job_type_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='jobposting',
+            name='cv_zip_file',
+            field=models.FileField(blank=True, null=True, upload_to='job_zips/'),
+        ),
+        migrations.AddField(
+            model_name='jobposting',
+            name='zip_created',
+            field=models.BooleanField(default=False),
+        ),
+    ]

recruitment/models.py

@@ -243,6 +243,11 @@ class JobPosting(Base):
         help_text=_("Whether the job posting has been parsed by AI"),
         verbose_name=_("AI Parsed"),
     )
+    # Field to store the generated zip file
+    cv_zip_file = models.FileField(upload_to='job_zips/', null=True, blank=True)
+    
+    # Field to track if the background task has completed
+    zip_created = models.BooleanField(default=False)
 
     class Meta:
         ordering = ["-created_at"]
@@ -984,6 +989,14 @@ class Application(Base):
 
         content_type = ContentType.objects.get_for_model(self.__class__)
         return Document.objects.filter(content_type=content_type, object_id=self.id)
+    
+    @property
+    def belong_to_an_agency(self):
+        if self.hiring_agency:
+            return True
+        else:
+            return False
+
 
 
 class TrainingMaterial(Base):

recruitment/tasks.py

@@ -847,3 +847,53 @@ def email_success_hook(task):
         logger.error(f"Task ID {task.id} failed. Error: {task.result}")
 
 
+
+
+import io
+import zipfile
+import os
+from django.core.files.base import ContentFile
+from django.conf import settings
+from .models import Application, JobPosting # Import your models
+
+ALLOWED_EXTENSIONS = (".pdf", ".docx")
+
+def generate_and_save_cv_zip(job_posting_id):
+    """
+    Generates a zip file of all CVs for a job posting and saves it to the job model.
+    """
+    job = JobPosting.objects.get(id=job_posting_id)
+    entries = Application.objects.filter(job=job)
+    
+    zip_buffer = io.BytesIO()
+
+    with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zf:
+        for entry in entries:
+            if not entry.resume:
+                continue
+
+            file_name = entry.resume.name.split("/")[-1]
+            file_name_lower = file_name.lower()
+
+            if file_name_lower.endswith(ALLOWED_EXTENSIONS):
+                try:
+                    with entry.resume.open("rb") as file_obj:
+                        file_content = file_obj.read()
+                        zf.writestr(file_name, file_content)
+
+                except Exception as e:
+                    # Log the error using Django's logging system if set up
+                    print(f"Error processing file {file_name}: {e}")
+                    continue
+
+    # 4. Save the generated zip buffer to the JobPosting model
+    zip_buffer.seek(0)
+    now = str(timezone.now())
+    zip_filename = f"all_cvs_for_{job.slug}_{job.title}_{now}.zip"
+    
+    # Use ContentFile to save the bytes stream into the FileField
+    job.cv_zip_file.save(zip_filename, ContentFile(zip_buffer.read()))
+    job.zip_created = True # Assuming you added a BooleanField for tracking completion
+    job.save()
+
+    return f"Successfully created zip for Job ID {job.slug} {job_posting_id}"

recruitment/urls.py

@@ -23,7 +23,9 @@ urlpatterns = [
     path("jobs/<slug:slug>/update/", views.edit_job, name="job_update"),
     # path('jobs/<slug:slug>/delete/', views., name='job_delete'),
     path('jobs/<slug:slug>/', views.job_detail, name='job_detail'),
-    path('jobs/<slug:slug>/download/cvs/', views.job_cvs_download, name='job_cvs_download'),
+    # path('jobs/<slug:slug>/download/cvs/', views.job_cvs_download, name='job_cvs_download'),
+    path('job/<slug:slug>/request-download/', views.request_cvs_download, name='request_cvs_download'),
+    path('job/<slug:slug>/download-ready/', views.download_ready_cvs, name='download_ready_cvs'),
 
     path('careers/',views.kaauh_career,name='kaauh_career'),
 

recruitment/views.py

@@ -157,14 +157,37 @@ class PersonListView(StaffRequiredMixin, ListView):
     model = Person
     template_name = "people/person_list.html"
     context_object_name = "people_list"
+    def get_queryset(self):
+        queryset=super().get_queryset()
+        gender=self.request.GET.get('gender')
+        if gender:
+            queryset=queryset.filter(gender=gender)
+        
+        nationality=self.request.GET.get('nationality')
+        if nationality:
+            queryset=queryset.filter(nationality=nationality)
+        
+        return queryset
+    def get_context_data(self, **kwargs):
+        context=super().get_context_data(**kwargs)
+        # We query the base model to ensure we list ALL options, not just those currently displayed.
+        nationalities = self.model.objects.values_list('nationality', flat=True).filter(
+            nationality__isnull=False
+        ).distinct().order_by('nationality')
+        
+        nationality=self.request.GET.get('nationality')
+        context['nationality']=nationality
+        context['nationalities']=nationalities
+        return context
+
 
 
 class PersonCreateView(CreateView):
     model = Person
     template_name = "people/create_person.html"
     form_class = PersonForm
-    # success_url = reverse_lazy("person_list")
-
+    success_url = reverse_lazy("person_list")
+    print("from agency")
     def form_valid(self, form):
         if "HX-Request" in self.request.headers:
             instance = form.save()
@@ -596,59 +619,89 @@ def job_detail(request, slug):
     return render(request, "jobs/job_detail.html", context)
 
 
-ALLOWED_EXTENSIONS = (".pdf", ".docx")
+# ALLOWED_EXTENSIONS = (".pdf", ".docx")
 
 
-def job_cvs_download(request, slug):
+# def job_cvs_download(request, slug):
+#     job = get_object_or_404(JobPosting, slug=slug)
+#     entries = Application.objects.filter(job=job)
+    
+#     # 2. Create an in-memory byte stream (BytesIO)
+#     zip_buffer = io.BytesIO()
+
+#     # 3. Create the ZIP archive
+#     with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zf:
+#         for entry in entries:
+#             # Check if the file field has a file
+#             if not entry.resume:
+#                 continue
+
+#             # Get the file name and check extension (case-insensitive)
+#             file_name = entry.resume.name.split("/")[-1]
+#             file_name_lower = file_name.lower()
+
+#             if file_name_lower.endswith(ALLOWED_EXTENSIONS):
+#                 try:
+#                     # Open the file object (rb is read binary)
+#                     file_obj = entry.resume.open("rb")
+
+#                     # *** ROBUST METHOD: Read the content and write it to the ZIP ***
+#                     file_content = file_obj.read()
+
+#                     # Write the file content directly to the ZIP archive
+#                     zf.writestr(file_name, file_content)
+
+#                     file_obj.close()
+
+#                 except Exception as e:
+#                     # Log the error but continue with the rest of the files
+#                     print(f"Error processing file {file_name}: {e}")
+#                     continue
+
+#     # 4. Prepare the response
+#     zip_buffer.seek(0)
+
+#     # 5. Create the HTTP response
+#     response = HttpResponse(zip_buffer.read(), content_type="application/zip")
+
+#     # Set the header for the browser to download the file
+#     response["Content-Disposition"] = (
+#         f'attachment; filename="all_cvs_for_{job.title}.zip"'
+#     )
+
+#     return response
+
+def request_cvs_download(request, slug):
+    """
+    View to initiate the background task.
+    """
     job = get_object_or_404(JobPosting, slug=slug)
-    entries = Application.objects.filter(job=job)
-
-    # 2. Create an in-memory byte stream (BytesIO)
-    zip_buffer = io.BytesIO()
-
-    # 3. Create the ZIP archive
-    with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zf:
-        for entry in entries:
-            # Check if the file field has a file
-            if not entry.resume:
-                continue
-
-            # Get the file name and check extension (case-insensitive)
-            file_name = entry.resume.name.split("/")[-1]
-            file_name_lower = file_name.lower()
-
-            if file_name_lower.endswith(ALLOWED_EXTENSIONS):
-                try:
-                    # Open the file object (rb is read binary)
-                    file_obj = entry.resume.open("rb")
-
-                    # *** ROBUST METHOD: Read the content and write it to the ZIP ***
-                    file_content = file_obj.read()
-
-                    # Write the file content directly to the ZIP archive
-                    zf.writestr(file_name, file_content)
-
-                    file_obj.close()
-
-                except Exception as e:
-                    # Log the error but continue with the rest of the files
-                    print(f"Error processing file {file_name}: {e}")
-                    continue
-
-    # 4. Prepare the response
-    zip_buffer.seek(0)
-
-    # 5. Create the HTTP response
-    response = HttpResponse(zip_buffer.read(), content_type="application/zip")
-
-    # Set the header for the browser to download the file
-    response["Content-Disposition"] = (
-        f'attachment; filename="all_cvs_for_{job.title}.zip"'
-    )
-
-    return response
+    job.zip_created = False
+    job.save(update_fields=["zip_created"])
+    # Use async_task to run the function in the background
+    # Pass only simple arguments (like the job ID)
+    async_task('recruitment.tasks.generate_and_save_cv_zip', job.id)
+    
+    # Provide user feedback and redirect
+    messages.info(request, "The CV compilation has started in the background. It may take a few moments. Refresh this page to check status.")
+    return redirect('job_detail', slug=slug) # Redirect back to the job detail page
 
+def download_ready_cvs(request, slug):
+    """
+    View to serve the file once it is ready.
+    """
+    job = get_object_or_404(JobPosting, slug=slug)
 
+    if job.cv_zip_file and job.zip_created:
+        # Django FileField handles the HttpResponse and file serving easily
+        response = HttpResponse(job.cv_zip_file.read(), content_type="application/zip")
+        response["Content-Disposition"] = f'attachment; filename="{job.cv_zip_file.name.split("/")[-1]}"'
+        return response
+    else:
+        # File is not ready or doesn't exist
+        messages.warning(request, "The ZIP file is still being generated or an error occurred.")
+        return redirect('job_detail', slug=slug)
+    
 @login_required
 @staff_user_required
 def job_image_upload(request, slug):
@@ -2938,16 +2991,17 @@ def staff_assignment_view(request, slug):
     applications = job.applications.all()
 
     if request.method == "POST":
-        form = StaffAssignmentForm(request.POST)
+        form = StaffAssignmentForm(request.POST, instance=job) 
+       
         if form.is_valid():
-            assignment = form.save(commit=False)
+            assignment = form.save()
             messages.success(request, f"Staff assigned to job '{job.title}' successfully!")
             return redirect("job_detail", slug=job.slug)
         else:
             messages.error(request, "Please correct the errors below.")
     else:
-        form = StaffAssignmentForm()
-
+        form = StaffAssignmentForm(instance=job)
+    print(staff_users)
     context = {
         "job": job,
         "applications": applications,
@@ -3192,7 +3246,7 @@ def set_meeting_candidate(request, slug):
 @staff_user_required
 def agency_list(request):
     """List all hiring agencies with search and pagination"""
-    search_query = request.GET.get("q", "")
+    search_query = request.GET.get("search", "")
     agencies = HiringAgency.objects.all()
 
     if search_query:
@@ -4206,6 +4260,8 @@ def agency_portal_submit_candidate_page(request, slug):
     assignment = get_object_or_404(
         AgencyJobAssignment.objects.select_related("agency", "job"), slug=slug
     )
+    current_agency=assignment.agency
+    current_job=assignment.job
 
     if assignment.is_full:
         messages.error(request, "Maximum candidate limit reached for this assignment.")
@@ -4230,9 +4286,9 @@ def agency_portal_submit_candidate_page(request, slug):
         hiring_agency=assignment.agency, job=assignment.job
     ).count()
 
-    form = ApplicationForm()
+    form = ApplicationForm(current_agency=current_agency,current_job=current_job)
     if request.method == "POST":
-        form = ApplicationForm(request.POST, request.FILES)
+        form = ApplicationForm(request.POST, request.FILES,current_agency=current_agency,current_job=current_job)
         if form.is_valid():
             candidate = form.save(commit=False)
 
@@ -5602,9 +5658,9 @@ def send_interview_email(request, slug):
     interview = get_object_or_404(ScheduledInterview, slug=slug)
 
     # 2. Retrieve the required data for the form's constructor
-    candidate = interview.candidate
+    candidate = interview.application
     job = interview.job
-    meeting = interview.zoom_meeting
+    meeting = interview.interview_location
     participants = list(interview.participants.all()) + list(
         interview.system_users.all()
     )
@@ -5625,7 +5681,7 @@ def send_interview_email(request, slug):
             meeting=meeting,
             job=job,
         )
-
+      
         if form.is_valid():
             # 4. Extract cleaned data
             subject = form.cleaned_data["subject"]
@@ -5635,6 +5691,8 @@ def send_interview_email(request, slug):
 
             # --- SEND EMAILS Candidate or agency---
             if candidate.belong_to_an_agency:
+                email=candidate.hiring_agency.email
+                print(email)
                 send_mail(
                     subject,
                     msg_agency,
@@ -5647,7 +5705,7 @@ def send_interview_email(request, slug):
                     subject,
                     msg_candidate,
                     settings.DEFAULT_FROM_EMAIL,
-                    [candidate.email],
+                    [candidate.person.email],
                     fail_silently=False,
                 )
 
@@ -5659,6 +5717,8 @@ def send_interview_email(request, slug):
                 attachments=None,
                 async_task_=True,  # Changed to False to avoid pickle issues,
                 from_interview=True,
+                job=job
+
             )
 
             if email_result["success"]:
@@ -5694,6 +5754,13 @@ def send_interview_email(request, slug):
                     f"Failed to send email: {email_result.get('message', 'Unknown error')}",
                 )
                 return redirect("list_meetings")
+        else:
+          
+            error_msg = "Failed to send email. Please check the form for errors."
+            print(form.errors)
+            messages.error(request, error_msg)
+            return redirect("meeting_details", slug=meeting.slug) 
+    return redirect("meeting_details", slug=meeting.slug)
 
 
 # def schedule_interview_location_form(request,slug):
@@ -6015,13 +6082,13 @@ def meeting_details(request, slug):
     participant_form = InterviewParticpantsForm(instance=interview)
 
 
-    # email_form = InterviewEmailForm(
-    # candidate=candidate,
-    # external_participants=external_participants,  # QuerySet of Participants
-    # system_participants=system_participants,      # QuerySet of Users
-    # meeting=meeting,  # ← This is InterviewLocation (e.g., ZoomMeetingDetails)
-    # job=job,
-    #  )
+    email_form = InterviewEmailForm(
+    candidate=candidate,
+    external_participants=external_participants,  # QuerySet of Participants
+    system_participants=system_participants,      # QuerySet of Users
+    meeting=meeting,  # ← This is InterviewLocation (e.g., ZoomMeetingDetails)
+    job=job,
+     )
 
     context = {
         'meeting': meeting,
@@ -6032,7 +6099,7 @@ def meeting_details(request, slug):
         'system_participants': system_participants,
         'total_participants': total_participants,
         'form': participant_form,
-        # 'email_form': email_form,
+        'email_form': email_form,
     }
 
     return render(request, 'interviews/detail_interview.html', context)

recruitment/views_frontend.py

@@ -64,9 +64,9 @@ class JobListView(LoginRequiredMixin, StaffRequiredMixin, ListView):
         # if not self.request.user.is_staff:
         #     queryset = queryset.filter(status='Published')
 
-        status = self.request.GET.get('status')
-        if status:
-            queryset = queryset.filter(status=status)
+        status_filter = self.request.GET.get('status')
+        if status_filter:
+            queryset = queryset.filter(status=status_filter)
 
         return queryset
 
@@ -74,6 +74,7 @@ class JobListView(LoginRequiredMixin, StaffRequiredMixin, ListView):
         context = super().get_context_data(**kwargs)
         context['search_query'] = self.request.GET.get('search', '')
         context['lang'] = get_language()
+        context['status_filter']=self.request.GET.get('status')
         return context
 
 
@@ -156,15 +157,13 @@ class ApplicationListView(LoginRequiredMixin, StaffRequiredMixin, ListView):
         search_query = self.request.GET.get('search', '')
         job = self.request.GET.get('job', '')
         stage = self.request.GET.get('stage', '')
-        # if search_query:
-        #     queryset = queryset.filter(
-        #         Q(first_name__icontains=search_query) |
-        #         Q(last_name__icontains=search_query) |
-        #         Q(email__icontains=search_query) |
-        #         Q(phone__icontains=search_query) |
-        #         Q(stage__icontains=search_query) |
-        #         Q(job__title__icontains=search_query)
-        #     )
+        if search_query:
+            queryset = queryset.filter(
+                Q(person__first_name__icontains=search_query) |
+                Q(person__last_name__icontains=search_query) |
+                Q(person__email__icontains=search_query) |
+                Q(person__phone__icontains=search_query) 
+            )
         if job:
             queryset = queryset.filter(job__slug=job)
         if stage:

templates/account/email_confirm.html

@@ -1,23 +1,174 @@
-{% extends "base.html" %}
-{% load i18n %}
+{% load static i18n %}
 {% load account %}
-
-{% block title %}{% trans "Confirm Email Address" %}{% endblock %}
-
-{% block content %}
-<div class="container my-5">
+{% get_current_language_bidi as LANGUAGE_BIDI %}
+{% get_current_language as LANGUAGE_CODE %}
+<!DOCTYPE html>
+<html lang="{{LANGUAGE_CODE}}" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}{% trans "Confirm Email Address" %}{% endblock %}</title>
     
-    {# Centering the main header content #}
-    <div class="row mb-5 justify-content-center text-center">
-        <div class="col-md-8 col-lg-6">
-            <h3 class="fw-bolder" style="color: #00636e;">{% trans "Account Verification" %}</h3>
-            <p class="lead text-muted">{% trans "Verify your email to secure your account and unlock full features." %}</p>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLMDJzL2sKMOz36tM+B7f3/17W6j45+V+qJ9vG9eW0p/L5UqG+J0S3Fv52g+JzI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    
+    <style>
+        /* -------------------------------------------------------------------------- */
+        /* CUSTOM TEAL THEME OVERRIDES (Matching the Sign-In Reference) */
+        /* -------------------------------------------------------------------------- */
+        :root {
+            /* Define TEAL as the primary color for Bootstrap overrides */
+            --bs-primary: #00636e; /* Dark Teal */
+            --bs-primary-rgb: 0, 99, 110;
+            --bs-primary-light: #007a88; /* Lighter Teal for hover */
+            
+            /* Background and Text Colors */
+            --bs-body-bg: #f8f9fa; /* Light gray background */
+            --kaauh-primary-text: #212529; /* Dark text */
+            
+            /* Custom Theme Variables */
+            --kaauh-success-icon: #008080; /* Slightly softer teal for success icon */
+        }
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bs-body-bg);
+        }
+
+        /* Custom Left Panel (Replicating the original look) */
+        .left-panel {
+            flex: 1;
+            /* Placeholder for image path. Assuming 'image/kaauh_banner.png' is correct based on reference */
+            background: url("{% static 'image/kaauh_banner.png' %}") no-repeat center center;
+            background-size: cover;
+            position: relative;
+            display: flex;
+            align-items: flex-end;
+            padding: 3rem;
+            color: white;
+            z-index: 1;
+        }
+        .left-panel::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
+            z-index: 0;
+        }
+        .left-panel-content {
+            position: relative;
+            z-index: 2;
+        }
+
+        /* Right Panel Styling - Used for the confirmation form */
+        .right-panel {
+            background-color: white;
+            padding: 3rem;
+        }
+        
+        /* Component Overrides */
+        .btn-main-action {
+            background-color: var(--bs-primary) !important;
+            border-color: var(--bs-primary) !important;
+            color: white !important;
+            font-weight: 600;
+            border-radius: 0.5rem; 
+            box-shadow: 0 4px 8px rgba(0, 99, 110, 0.2); 
+            transition: all 0.2s ease;
+            padding: 0.75rem 2.5rem; /* Large padding for primary action */
+            width: 100%; /* Make the button full width on smaller screens */
+        }
+        .btn-main-action:hover {
+            background-color: var(--bs-primary-light) !important;
+            border-color: var(--bs-primary-light) !important;
+            box-shadow: 0 6px 10px rgba(0, 99, 110, 0.3);
+            transform: translateY(-1px);
+        }
+        
+        /* Secondary Outline Button */
+        .btn-outline-secondary {
+            color: var(--bs-primary) !important;
+            border-color: var(--bs-primary) !important;
+            font-weight: 600;
+            border-radius: 0.5rem;
+            padding: 0.75rem 2.5rem; 
+            width: 100%;
+        }
+        .btn-outline-secondary:hover {
+            background-color: var(--bs-primary) !important;
+            color: white !important;
+            border-color: var(--bs-primary) !important;
+        }
+
+        /* Text Accent Color */
+        .text-primary-teal {
+            color: var(--bs-primary) !important;
+        }
+        
+        /* Confirmation Icon Color */
+        .icon-success-teal {
+            color: var(--kaauh-success-icon);
+        }
+        
+        /* Card Styling - Matching the 'right-panel' white look */
+        .kaauh-card {
+            border: none;
+            border-radius: 1rem; /* Rounded corners */
+            box-shadow: 0 10px 25px rgba(0,0,0,0.08); /* Strong shadow */
+            background-color: white;
+            overflow: hidden;
+        }
+        
+        /* Layout Adjustments to match reference */
+        @media (min-width: 992px) {
+            /* 1. Set a NARROWER fixed width for the right panel container */
+            .right-panel-col {
+                flex: 0 0 450px; 
+            }
+            /* 2. Ensure the form container doesn't exceed a smaller size and is centered */
+            .right-panel-content-wrapper {
+                 max-width: 560px;
+                 width: 100%;
+            }
+            /* 3. Button width adjusted for desktop view */
+            .btn-main-action, .btn-outline-secondary {
+                width: auto;
+            }
+        }
+    </style>
+</head>
+<body class="d-flex vh-100 w-100">
+
+    <div class="left-panel d-none d-lg-flex flex-grow-1">
+        <div class="left-panel-content">
+            <h1 class="text-4xl font-weight-bold mb-4" style="font-size: 1.5rem;">
+                <span class="text-white">
+                    <div class="hospital-text text-center text-md-start me-3">
+                        <div class="ar small">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
+                        <div class="ar small">ومستشفى الملك عبدالله بن عبدالعزيز التخصصي</div>
+                        <div class="en small">Princess Nourah bint Abdulrahman University</div>
+                        <div class="en small">King Abdullah bin Abdulaziz University Hospital</div>
+                    </div>
+                </span>
+            </h1>
+            <small>Powered By TENHAL | تنحل</small>
         </div>
     </div>
-    
-    <div class="row justify-content-center">
-        <div class="col-md-8 col-lg-6">
-            <div class="card shadow-lg border-0 rounded-4"> 
+
+    <div class="d-flex flex-column right-panel right-panel-col flex-grow-1 align-items-center justify-content-center">
+        
+        <div class="right-panel-content-wrapper p-4 p-md-0">
+            
+            {# Global Header #}
+            <div class="text-center mb-4">
+                <h3 class="fw-bolder text-primary-teal">{% trans "Account Verification" %}</h3>
+                <p class="lead text-muted">{% trans "Verify your email to secure your account and unlock full features." %}</p>
+            </div>
+            
+            <div class="kaauh-card"> 
                 <div class="card-body p-5 text-center">
 
                     {% with email as email %}
@@ -27,11 +178,11 @@
                             {# ------------------- CONFIRMATION REQUEST (GET) - Success Theme ------------------- #}
                             {% user_display confirmation.email_address.user as user_display %}
                             
-                            <i class="fas fa-check-circle mb-4" style="font-size: 4rem; color: #008080;"></i> {# Changed icon to a checkmark for clarity #}
+                            <i class="fas fa-check-circle mb-4 icon-success-teal" style="font-size: 4rem;"></i>
                             
-                            <h4 class="fw-bold mb-3">{% translate "Confirm Your Email Address" %}</h4>
+                            <h4 class="fw-bold mb-3 text-primary-teal">{% trans "Confirm Your Email Address" %}</h4>
 
-                            <p class="lead" style="color: #343a40;">
+                            <p class="lead" style="color: var(--kaauh-primary-text);">
                                 {% blocktrans with email as email %}Please confirm that **{{ email }}** is the correct email address for your account.{% endblocktrans %}
                             </p>
 
@@ -39,28 +190,27 @@
                             <form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
                                 {% csrf_token %}
                                 
-                                <button class="btn btn-lg mt-4 px-5 fw-semibold text-white" type="submit" 
-                                        style="background-color: #008080; border-color: #008080; box-shadow: 0 4px 8px rgba(0, 128, 128, 0.3);">
-                                    {% translate "Confirm & Activate" %}
+                                <button class="btn btn-main-action mt-4" type="submit">
+                                    {% trans "Confirm & Activate" %}
                                 </button>
                             </form>
                             
                         {% else %}
                             
                             {# ------------------- CONFIRMATION FAILED (Error) - Danger Theme ------------------- #}
-                            <i class="fas fa-unlink text-danger mb-4" style="font-size: 4rem;"></i> {# Changed icon to be more specific #}
+                            <i class="fas fa-unlink text-danger mb-4" style="font-size: 4rem;"></i>
                             
-                            <h4 class="fw-bold mb-3 text-danger">{% translate "Verification Failed" %}</h4>
+                            <h4 class="fw-bold mb-3 text-danger">{% trans "Verification Failed" %}</h4>
                             
                             <p class="lead text-danger">
-                                {% translate "The email confirmation link is expired or invalid." %}
+                                {% trans "The email confirmation link is expired or invalid." %}
                             </p>
-                            <p class="text-muted small">
-                                {% translate "If you recently requested a link, please ensure you use the newest one. You can request a new verification email from your account settings." %}
+                            <p class="text-muted small mb-0">
+                                {% trans "If you recently requested a link, please ensure you use the newest one. You can request a new verification email from your account settings." %}
                             </p>
                             
-                            <a href="{% url 'account_email' %}" class="btn btn-outline-secondary mt-4 px-5 fw-semibold">
-                                <i class="fas fa-cog me-2"></i> {% translate "Go to Settings" %}
+                            <a href="{% url 'account_email' %}" class="btn btn-outline-secondary mt-4">
+                                <i class="fas fa-cog me-2"></i> {% trans "Go to Settings" %}
                             </a>
 
                         {% endif %}
@@ -68,7 +218,10 @@
                     {% endwith %}
                 </div>
             </div>
+            
         </div>
     </div>
-</div>
-{% endblock content %}
+    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</body>
+</html>

templates/forms/form_submission_details.html

@@ -146,7 +146,7 @@
 <div class="container-fluid py-4">
     <nav aria-label="breadcrumb">
   <ol class="breadcrumb">
-    <li class="breadcrumb-item text-decorat"><a href="{% url 'job_detail' submission.template.job.slug %}" class="text-secondary">Job Detail</a></li>
+    <li class="breadcrumb-item "><a href="{% url 'job_detail' submission.template.job.slug %}" class="text-secondary text-decoration-none">Job Detail</a></li>
     <li class="breadcrumb-item"><a href="{% url 'form_builder' submission.template.pk%}" class="text-secondary">Form Template</a></li>
     <li class="breadcrumb-item active" aria-current="page"  style="
                             color: #F43B5E; /* Rosy Accent Color */

templates/forms/form_template_all_submissions.html

@@ -229,10 +229,13 @@
 <div class="container py-4">
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
-            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">{% trans "Dashboard" %}</a></li>
-            <li class="breadcrumb-item"><a href="{% url 'form_templates_list' %}">{% trans "Form Templates" %}</a></li>
-            <li class="breadcrumb-item"><a href="{% url 'form_template_submissions_list' template.slug %}">{% trans "Submissions" %}</a></li>
-            <li class="breadcrumb-item active">{% trans "All Submissions Table" %}</li>
+            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-secondary text-decoration-none">{% trans "Dashboard" %}</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'form_templates_list' %}" class="text-secondary text-decoration-none">{% trans "Form Templates" %}</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'form_template_submissions_list' template.slug %}" class="text-secondary text-decoration-none">{% trans "Submissions" %}</a></li>
+            <li class="breadcrumb-item active" style="
+                            color: #F43B5E; 
+                            font-weight: 600;
+                        ">{% trans "All Submissions Table" %}</li>
         </ol>
     </nav>
 

templates/includes/document_list.html

@@ -1,15 +1,16 @@
 {% load static %}
 {% load file_filters %}
+{% load i18n %}
 <div class="card shadow-sm">
     <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
-        <h5 class="card-title mb-0 text-primary">Documents</h5>
+        <h5 class="card-title mb-0 text-primary">{% trans "Documents" %}</h5>
         <button
             type="button"
             class="btn bg-primary-theme text-white btn-sm"
             data-bs-toggle="modal"
             data-bs-target="#documentUploadModal"
         >
-            <i class="fas fa-plus me-2"></i>Upload Document
+            <i class="fas fa-plus me-2"></i>{% trans "Upload Document" %}
         </button>
     </div>
 
@@ -18,7 +19,7 @@
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="documentUploadModalLabel">Upload Document</h5>
+                    <h5 class="modal-title" id="documentUploadModalLabel">{% trans "Upload Document" %}</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
 
@@ -34,19 +35,19 @@
                     {% csrf_token %}
                     <div class="modal-body">
                         <div class="mb-3">
-                            <label for="documentType" class="form-label">Document Type</label>
+                <label for="documentType" class="form-label">{% trans "Document Type" %}</label>
                             <select name="document_type" id="documentType" class="form-select">
-                                <option value="resume">Resume</option>
-                                <option value="cover_letter">Cover Letter</option>
-                                <option value="portfolio">Portfolio</option>
-                                <option value="certificate">Certificate</option>
-                                <option value="id_proof">ID Proof</option>
-                                <option value="other">Other</option>
+                    <option value="resume">{% trans "Resume" %}</option>
+                    <option value="cover_letter">{% trans "Cover Letter" %}</option>
+                    <option value="portfolio">{% trans "Portfolio" %}</option>
+                    <option value="certificate">{% trans "Certificate" %}</option>
+                    <option value="id_proof">{% trans "ID Proof" %}</option>
+                    <option value="other">{% trans "Other" %}</option>
                             </select>
                         </div>
 
                         <div class="mb-3">
-                            <label for="documentFile" class="form-label">File</label>
+                            <label for="documentFile" class="form-label">{% trans "File" %}</label>
                             <input
                                 type="file"
                                 name="file"
@@ -57,22 +58,22 @@
                         </div>
 
                         <div class="mb-3">
-                            <label for="documentDescription" class="form-label">Description</label>
+                            <label for="documentDescription" class="form-label">{% trans "Description" %}</label>
                             <textarea
                                 name="description"
                                 id="documentDescription"
                                 rows="3"
                                 class="form-control"
-                                placeholder="Optional description..."
+                                placeholder="{% trans "Optional description..." %}"
                             ></textarea>
                         </div>
                     </div>
 
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                        <button type="submit" class="btn btn-primary">
-                            <i class="fas fa-upload me-2"></i>Upload
-                        </button>
+                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
+                            <button type="submit" class="btn btn-main-action">
+                                <i class="fas fa-upload me-2"></i>{% trans "Upload" %}
+                            </button>
                     </div>
                 </form>
             </div>
@@ -93,7 +94,7 @@
                                 <div class="small text-muted">{{ document.description }}</div>
                             {% endif %}
                             <div class="small text-muted">
-                                Uploaded by {{ document.uploaded_by.get_full_name|default:document.uploaded_by.username }} on {{ document.created_at|date:"M d, Y" }}
+                                {% trans "Uploaded by" %} {{ document.uploaded_by.get_full_name|default:document.uploaded_by.username }} {% trans "on" %} {{ document.created_at|date:"M d, Y" }}
                             </div>
                         </div>
                     </div>
@@ -102,7 +103,7 @@
                         <a
                             href="{% url 'document_download' document.id %}"
                             class="btn btn-sm btn-outline-primary me-2"
-                            title="Download"
+                            title="{% trans "Download" %}"
                         >
                             <i class="fas fa-download"></i>
                         </a>
@@ -112,7 +113,7 @@
                                 type="button"
                                 class="btn btn-sm btn-outline-danger"
                                 onclick="confirmDelete({{ document.id }}, '{{ document.file.name|filename|default:"Document" }}')"
-                                title="Delete"
+                                title="{% trans "Delete" %}"
                             >
                                 <i class="fas fa-trash"></i>
                             </button>
@@ -123,8 +124,8 @@
         {% else %}
             <div class="text-center py-5 text-muted">
                 <i class="fas fa-file-alt fa-3x mb-3"></i>
-                <p class="mb-2">No documents uploaded yet.</p>
-                <p class="small">Click "Upload Document" to add files for this candidate.</p>
+                <p class="mb-2">{% trans "No documents uploaded yet." %}</p>
+                <p class="small">{% trans "Click \"Upload Document\" to add files for this candidate." %}</p>
             </div>
         {% endif %}
     </div>
@@ -139,7 +140,8 @@
 
 <script>
 function confirmDelete(documentId, fileName) {
-    if (confirm(`Are you sure you want to delete "${fileName}"?`)) {
+    var deletePrefix = "{% trans "Are you sure you want to delete" %}";
+    if (confirm(deletePrefix + ' "' + fileName + '"?')) {
         htmx.ajax('POST', `{% url 'document_delete' 0 %}`.replace('0', documentId), {
             target: '#document-list-container',
             swap: 'innerHTML'

templates/interviews/detail_interview.html

@@ -76,7 +76,7 @@ body { background-color: #f0f2f5; font-family: 'Inter', sans-serif; }
     width: 100%; margin-top: 0.5rem; border-collapse: collapse;
 }
 .simple-table th {
-    background-color: var(--kaauh-teal-light); color: var(--kaauh-teal-dark); font-weight: 700;
+    background-color: var(--kaauh-teal); color: white; font-weight: 700;
     padding: 8px 12px; border: 1px solid var(--kaauh-border); font-size: 0.8rem;
 }
 .simple-table td {
@@ -364,12 +364,37 @@ body { background-color: #f0f2f5; font-family: 'Inter', sans-serif; }
       </div>
       <form method="post" action="{% url 'create_interview_participants' interview.slug %}">
         {% csrf_token %}
-        <div class="modal-body">
-          {{ form.participants.errors }}
-          {{ form.participants }}
-          {{ form.system_users.errors }}
-          {{ form.system_users }}
-        </div>
+        <div class="modal-body table-responsive">
+
+              {{ meeting.name }}
+
+              <hr>
+
+
+
+              <table  class="table tab table-bordered mt-3">
+                  <thead>
+                    <th class="col">👥 {% trans "Participants" %}</th>
+                    <th class="col">🧑‍💼 {% trans "Users" %}</th>
+                  </thead>
+
+                    <tbody>
+
+                        <tr>
+                            <td>
+                            {{ form.participants.errors }}
+                            {{ form.participants }}
+                            </td>
+                            <td> {{ form.system_users.errors }}
+                                {{ form.system_users }}
+                            </td>
+                        </tr>
+
+
+              </table>
+
+          </div>
+
         <div class="modal-footer">
           <button type="button" class="btn btn-danger-red" data-bs-dismiss="modal">{% trans "Close" %}</button>
           <button type="submit" class="btn btn-primary-teal">{% trans "Save" %}</button>
@@ -387,7 +412,7 @@ body { background-color: #f0f2f5; font-family: 'Inter', sans-serif; }
         <h5 class="modal-title">📧 {% trans "Compose Interview Invitation" %}</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
-      <form method="post" action="{% url 'send_interview_email' interview.pk %}">
+      <form method="post" action="{% url 'send_interview_email' interview.slug %}">
         {% csrf_token %}
         <div class="modal-body">
           <div class="mb-3">

templates/jobs/create_job.html

@@ -17,34 +17,36 @@
     }
 
     .text-primary { color: var(--kaauh-teal) !important; }
-    .btn-main-action, .btn-primary {
+    /* Main Action Button Style */
+    .btn-main-action {
         background-color: var(--kaauh-teal);
         border-color: var(--kaauh-teal);
         color: white;
         font-weight: 600;
-        padding: 0.6rem 1.2rem;
         transition: all 0.2s ease;
         display: inline-flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 0.4rem;
+        padding: 0.5rem 1.5rem;
     }
-    .btn-main-action:hover, .btn-primary:hover {
+
+    .btn-main-action:hover {
         background-color: var(--kaauh-teal-dark);
         border-color: var(--kaauh-teal-dark);
-        transform: translateY(-1px);
         box-shadow: 0 4px 8px rgba(0,0,0,0.15);
     }
-    .btn-secondary {
-        background-color: #f8f9fa;
+
+    /* Secondary Button Style */
+    .btn-outline-secondary {
         color: var(--kaauh-teal-dark);
-        border: 1px solid var(--kaauh-border);
-        font-weight: 500;
+        border-color: var(--kaauh-teal);
     }
-    .btn-secondary:hover {
-        background-color: #e9ecef;
+    .btn-outline-secondary:hover {
+        background-color: var(--kaauh-teal-dark);
         color: white;
         border-color: var(--kaauh-teal-dark);
     }
+
     .card {
         border: 1px solid var(--kaauh-border);
         border-radius: 0.75rem;
@@ -322,7 +324,7 @@
         {# ACTION BUTTONS #}
         {# ================================================= #}
         <div class="d-flex justify-content-between pt-2">
-            <a href="{% url 'job_list' %}" class="btn btn-secondary">
+            <a href="{% url 'job_list' %}" class="btn btn-outline-secondary">
                 <i class="fas fa-arrow-left me-1"></i> {% trans "Cancel" %}
             </a>
             <button type="submit" class="btn btn-main-action">

templates/jobs/edit_job.html

@@ -45,6 +45,19 @@
         color: white;
         border-color: var(--kaauh-teal-dark);
     }
+   
+
+    /* Secondary Button Style */
+    .btn-outline-secondary {
+        color: var(--kaauh-teal-dark);
+        border-color: var(--kaauh-teal);
+    }
+    .btn-outline-secondary:hover {
+        background-color: var(--kaauh-teal-dark);
+        color: white;
+        border-color: var(--kaauh-teal-dark);
+    }
+
     .card {
         border: 1px solid var(--kaauh-border);
         border-radius: 0.75rem;
@@ -322,7 +335,7 @@
         {# ACTION BUTTONS #}
         {# ================================================= #}
         <div class="d-flex justify-content-between pt-2">
-            <a href="{% url 'job_list' %}" class="btn btn-secondary">
+            <a href="{% url 'job_list' %}" class="btn btn-outline-secondary">
                 <i class="fas fa-arrow-left me-1"></i> {% trans "Cancel" %}
             </a>
             <button type="submit" class="btn btn-main-action">

templates/jobs/job_detail.html

@@ -150,8 +150,8 @@
 
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
-            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-secondary">Home</a></li>
-            <li class="breadcrumb-item"><a href="{% url 'job_list' %}" class="text-secondary">Jobs</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-decoration-none text-secondary">Home</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'job_list' %}" class="text-decoration-none text-secondary">Jobs</a></li>
             <li class="breadcrumb-item active" aria-current="page"  style="
                             color: #F43B5E; /* Rosy Accent Color */
                             font-weight: 600;
@@ -326,9 +326,15 @@
                                  <a href="{% url 'candidate_screening_view' job.slug %}" class="btn btn-main-action">
                                     <i class="fas fa-layer-group me-1"></i> {% trans "Manage Applicants" %}
                                </a>
-                                <a href="{% url 'job_cvs_download' job.slug %}" class="btn btn-main-action">
+                               {% if not job.zip_created%}
+                                <a href="{% url 'request_cvs_download' job.slug %}" class="btn btn-main-action">
                                     <i class="fa-solid fa-download me-1"></i> {% trans "Download All CVs" %}
                                </a>
+                               {% else %}
+                               <a href="{% url 'download_ready_cvs' job.slug %}" class="btn btn-main-action">
+                                    <i class="fa-solid fa-eye me-1"></i> {% trans "View All CVs" %}
+                               </a>
+                               {% endif %}
                         </div>
                     </div>
 
@@ -385,8 +391,8 @@
                             <a href="{% url 'staff_assignment_view' job.slug %}" class="btn btn-main-action">
                                 <i class="fas fa-user-plus me-1"></i> {% trans "Assign Staff Member" %}
                             </a>
-
-                            {% if job.staff_assignments.exists %}
+                            
+                            {% if job.assigned_to %}
                                 <div class="mt-3">
                                     <h6 class="text-muted">{% trans "Current Assignments" %}</h6>
                                     {% for assignment in job.staff_assignments.all %}

templates/jobs/job_list.html

@@ -9,18 +9,22 @@
     :root {
         --kaauh-teal: #00636e;
         --kaauh-teal-dark: #004a53;
-        --kaauh-border: #eaeff3;
+        --kaauh-border: #dce3eb; /* Lighter border for clean look */
         --kaauh-primary-text: #343a40;
+        --kaauh-secondary-text: #6c757d;
         --kaauh-success: #28a745;
         --kaauh-danger: #dc3545;
+        --kaauh-info: #17a2b8;
+    }
+    
+    body {
+        background-color: #f8f9fa; /* Subtle light background */
+        font-family: 'Inter', sans-serif;
     }
 
     /* Primary Color Overrides */
     .text-primary-theme { color: var(--kaauh-teal) !important; }
     .bg-primary-theme { background-color: var(--kaauh-teal) !important; }
-    .text-success { color: var(--kaauh-success) !important; }
-    .text-danger { color: var(--kaauh-danger) !important; }
-    .text-info { color: #17a2b8 !important; }
 
     /* Enhanced Card Styling */
     .card {
@@ -31,7 +35,7 @@
     }
     .card:not(.no-hover):hover {
         transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
+        box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* Slightly deeper hover shadow */
     }
 
     /* Main Action Button Style (Teal Theme) */
@@ -43,7 +47,9 @@
         transition: all 0.2s ease;
         display: inline-flex;
         align-items: center;
-        gap: 0.25rem;
+        gap: 0.5rem;
+        border-radius: 0.5rem;
+        padding: 0.6rem 1.25rem;
     }
 
     .btn-main-action:hover {
@@ -54,8 +60,9 @@
 
     /* Secondary Button Style (using theme border) */
     .btn-outline-secondary {
-        color: var(--kaauh-teal-dark);
-        border-color: var(--kaauh-teal);
+        color: var(--kaauh-secondary-text);
+        border-color: var(--kaauh-border);
+        transition: all 0.2s ease;
     }
     .btn-outline-secondary:hover {
         background-color: var(--kaauh-teal-dark);
@@ -65,89 +72,82 @@
 
     /* Status Badges */
     .status-badge {
-        font-size: 0.8rem;
-        padding: 0.4em 0.8em;
-        border-radius: 0.4rem;
+        font-size: 0.75rem; /* Slightly smaller for compactness */
+        padding: 0.3em 0.7em;
+        border-radius: 0.5rem;
         font-weight: 700;
         text-transform: uppercase;
-        letter-spacing: 0.7px;
+        letter-spacing: 0.5px;
         color: white;
     }
     .bg-DRAFT { background-color: #6c757d !important; }
     .bg-ACTIVE { background-color: var(--kaauh-teal) !important; }
-    .bg-CLOSED { background-color: #dc3545 !important; }
+    .bg-CLOSED { background-color: var(--kaauh-danger) !important; }
     .bg-ARCHIVED { background-color: #343a40 !important; }
-    .bg-info { background-color: #17a2b8 !important; }
 
-    /* --- TABLE ALIGNMENT AND SIZING FIXES --- */
+    /* --- TABLE STYLING --- */
     .table {
-        table-layout: fixed; /* Ensures width calculations are respected */
+        table-layout: fixed;
         width: 100%;
         border-collapse: collapse;
     }
     .table thead th {
         color: var(--kaauh-primary-text);
         font-weight: 600;
-        font-size: 0.85rem;
+        font-size: 0.8rem;
         vertical-align: middle;
-        border-bottom: 2px solid var(--kaauh-border);
-        padding: 0.5rem 0.25rem;
+        padding: 0.75rem 0.5rem;
+        background-color: #edf2f7; /* Light background for header */
+    }
+    .table tbody td {
+        padding: 0.5rem 0.5rem;
+        font-size: 0.85rem;
     }
     .table-hover tbody tr:hover {
-        background-color: #f3f7f9;
+        background-color: #f0f4f7;
     }
-
-    /*
+    
+    /* --------------------------------------------------------
     * OPTIMIZED MAIN TABLE COLUMN WIDTHS (Total must be 100%)
     * --------------------------------------------------------
-    * 1. Job Title/ID: 25% (Needs the most space)
-    * 2. Source: 10%
-    * 3. Max Apps: 7%
+    * 1. Job Title/ID: 20%
+    * 2. Source: 8%
+    * 3. Max Apps: 6%
     * 4. Deadline: 10%
-    * 5. Actions: 8%
-    * 6. Manage Forms: 10%
-    * 7. Applicants Metrics: 30% (Colspan 5)
-    * TOTAL: 25 + 10 + 7 + 10 + 8 + 10 + 30 = 100%
+    * 5. Submissions/Actions: 8%
+    * 6. Metrics (Colspan 6): 48% (8% each)
     */
     .table th:nth-child(1) { width: 20%; } /* Job Title */
-    .table th:nth-child(2) { width: 10%; } /* Source */
-    .table th:nth-child(3) { width: 7%; }  /* Max Apps */
+    .table th:nth-child(2) { width: 8%; }  /* Source */
+    .table th:nth-child(3) { width: 6%; }  /* Max Apps */
     .table th:nth-child(4) { width: 10%; } /* Deadline */
-    .table th:nth-child(5) { width: 8%; }  /* Actions */
-    .table th:nth-child(6) { width: 10%; } /* Manage Forms */
-    /* The 7th column (Metrics) is 30% and is handled by its colspan */
+    .table th:nth-child(5) { width: 8%; }  /* Submissions */
 
 
     /* Candidate Management Header Row (The one with the stage names) */
     .nested-metrics-row th {
         font-weight: 500;
-        color: #6c757d;
-        font-size: 0.75rem;
+        color: var(--kaauh-secondary-text);
+        font-size: 0.7rem;
         padding: 0.3rem 0;
         border-bottom: 2px solid var(--kaauh-teal);
         text-align: center;
         border-left: 1px solid var(--kaauh-border);
-    }
-
-    /* Metrics Sub-Column Widths (7 total sub-columns, total 30%) */
-    /* We have 5 main metrics: Applied, Screened, Exam, Interview, Offer.
-    * Let's allocate the 30% evenly: 30% / 5 = 6% per metric column.
-    */
-    .nested-metrics-row th {
-        width: 6%; /* 30% / 5 metrics = 6% per metric column */
+        width: 8%; /* 6 columns * 8% = 48% total for metrics */
+        background-color: #e4f0f7; /* Slightly darker background for nested header */
     }
 
     /* Main TH for Candidate Management Header Title */
     .candidate-management-header-title {
         text-align: center;
         padding: 0.5rem 0.25rem;
-        border-left: 2px solid var(--kaauh-teal);
-        border-right: 1px solid var(--kaauh-border) !important;
-        font-weight: 600;
+        border-left: 2px solid var(--kaauh-teal-dark); /* Stronger separator line */
+        font-weight: 700;
         color: var(--kaauh-teal-dark);
+        background-color: #edf2f7;
     }
 
-    /* Candidate Management Data Cells (5 columns total for metrics) */
+    /* Candidate Management Data Cells */
     .candidate-data-cell {
         text-align: center;
         vertical-align: middle;
@@ -155,18 +155,25 @@
         font-size: 0.9rem;
         padding: 0;
     }
-    .table tbody td.candidate-data-cell:not(:first-child) {
-        border-left: 1px solid var(--kaauh-border);
+    
+    /* Strong visual separator before metrics data */
+    .table tbody tr td:nth-child(6) {
+        border-left: 2px solid var(--kaauh-teal-dark) !important; 
     }
-    /* Adds a distinctive vertical line before the metrics group (7th column) */
-    .table tbody tr td:nth-child(7) {
-        border-left: 2px solid var(--kaauh-teal);
+    
+    /* Subtle vertical lines between metric data cells */
+    .table tbody td.candidate-data-cell:not(:first-child) {
+        border-left: 1px solid #f0f4f7;
     }
 
     .candidate-data-cell a {
         display: block;
         text-decoration: none;
-        padding: 0.4rem 0.25rem;
+        padding: 0.6rem 0.25rem;
+        transition: background-color 0.1s;
+    }
+    .candidate-data-cell a:hover {
+        background-color: #e9ecef;
     }
 
     /* Fix action button sizing */
@@ -175,7 +182,7 @@
         font-size: 0.75rem;
     }
 
-    /* Additional CSS for Card View layout (rest of your styles...) */
+    /* Card View Enhancements */
     .card-view .card {
         height: 100%;
     }
@@ -189,26 +196,29 @@
         flex-direction: column;
         justify-content: space-between;
         flex-grow: 1;
+        padding: 1.25rem;
     }
     .card-view .list-unstyled li {
-        margin-bottom: 0.25rem;
+        margin-bottom: 0.5rem;
+        font-size: 0.9rem;
     }
 </style>
 {% endblock %}
 
 {% block content %}
 <div class="container-fluid py-4">
-    {# ... (Rest of the header and filter content) ... #}
+    
+    {# --- MAIN HEADER AND ACTION BUTTON --- #}
     <div class="d-flex justify-content-between align-items-center mb-4">
         <h1 style="color: var(--kaauh-teal-dark); font-weight: 700;">
             <i class="fas fa-briefcase me-2"></i> {% trans "Job Postings" %}
         </h1>
-        <a href="{% url 'job_create' %}" class="btn btn-main-action">
+        <a href="{% url 'job_create' %}" class="btn btn-main-action btn-lg">
             <i class="fas fa-plus me-1"></i> {% trans "Create New Job" %}
         </a>
     </div>
 
-    {# ... (Filter card) ... #}
+    {# --- FILTER CARD --- #}
     <div class="card mb-4 shadow-sm no-hover">
         <div class="card-body">
             <div class="row">
@@ -222,7 +232,7 @@
                 </div>
                 <div class="col-md-6">
                     <form method="GET" class="row g-3 align-items-end" >
-                        <div class="col-md-4">
+                        <div class="col-md-5">
                             <label for="status" class="form-label small text-muted">{% trans "Filter by Status" %}</label>
                             <select name="status" id="status" class="form-select form-select-sm">
                                 <option value="">{% trans "All Statuses" %}</option>
@@ -232,66 +242,63 @@
                                 <option value="ARCHIVED" {% if status_filter == 'ARCHIVED' %}selected{% endif %}>{% trans "Archived" %}</option>
                             </select>
                         </div>
-                        <div class="col-md-4">
+                        <div class="col-md-7">
                             <div class="filter-buttons">
                                 <button type="submit" class="btn btn-main-action btn-sm">
                                     <i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
                                 </button>
-                                {% if job_filter or search_query %}
-                                    <a href="{% url 'job_list' %}" class="btn btn-outline-secondary">
-                                        <i class="fas fa-times me-1"></i> {% trans "Clear" %}
+                                {% if status_filter or search_query %}
+                                    <a href="{% url 'job_list' %}" class="btn btn-outline-secondary btn-sm">
+                                        <i class="fas fa-times me-1"></i> {% trans "Clear Filters" %}
                                     </a>
                                 {% endif %}
-
-
                             </div>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
-    </div>
 
     {# --- START OF JOB LIST CONTAINER --- #}
     <div id="job-list">
         {% include "includes/_list_view_switcher.html" with list_id="job-list" %}
 
-        {# 1. TABLE VIEW (Default Active) #}
-        <div class="table-view active d-md-none">
+        {# 1. TABLE VIEW (Desktop Default) - Hidden on Mobile #}
+        <div class="table-view d-none d-lg-block active">
             <div class="card shadow-sm">
-                <div class="table-responsive ">
-                    <table class="table table-hover align-middle mb-0 table-sm">
+                <div class="table-responsive">
+                    <table class="table table-hover align-middle mb-0">
 
                         {# --- Corrected Multi-Row Header Structure --- #}
                         <thead>
-                            <tr>
+                            <tr style="border-bottom: none;">
                                 <th scope="col" rowspan="2">{% trans "Job Title / ID" %}</th>
                                 <th scope="col" rowspan="2">{% trans "Source" %}</th>
                                 <th scope="col" rowspan="2">{% trans "Max Apps" %}</th>
                                 <th scope="col" rowspan="2">{% trans "Deadline" %}</th>
-                                <th scope="col" rowspan="2">{% trans "Actions" %}</th>
-                                <th scope="col" rowspan="2" class="text-center">{% trans "Manage Forms" %}</th>
+                                <th scope="col" rowspan="2">{% trans "Submission" %}</th>
+                               
 
                                 <th scope="col" colspan="6" class="candidate-management-header-title">
-                                    {% trans "Applicants Metrics" %}
+                                    {% trans "Applicants Metrics (Current Stage Count)" %}
                                 </th>
                             </tr>
 
                             <tr class="nested-metrics-row">
-                                <th style="width: calc(50% / 7);">{% trans "All" %}</th>
-                                <th style="width: calc(50% / 7);">{% trans "Screened" %}</th>
-                                <th style="width: calc(50% / 7 * 2);">{% trans "Exam" %}</th>
-                                <th style="width: calc(50% / 7 * 2);">{% trans "Interview" %}</th>
-                                <th style="width: calc(50% / 7 * 2);">{% trans "Documets Review" %}</th>
-                                <th style="width: calc(50% / 7);">{% trans "Offer" %}</th>
+                                <th scope="col">{% trans "All" %}</th>
+                                <th scope="col">{% trans "Screened" %}</th>
+                                <th scope="col">{% trans "Exam" %}</th>
+                                <th scope="col">{% trans "Interview" %}</th>
+                                <th scope="col">{% trans "DOC Review" %}</th>
+                                <th scope="col">{% trans "Offer" %}</th>
                             </tr>
                         </thead>
 
                         <tbody>
                             {% for job in jobs %}
                             <tr>
-                                <td class="fw-medium text-primary-theme">
-                                    <a href="{% url 'job_detail' job.slug  %}" class="text-decoration-none">{{ job.title }}</a>
+                                <td class="fw-medium">
+                                    <a href="{% url 'job_detail' job.slug  %}" class="text-decoration-none text-primary-theme">{{ job.title }}</a>
                                     <br>
                                     <small class="text-muted">{{ job.pk }} / </small>
                                     <span class="badge bg-{{ job.status }} status-badge">{{ job.status }}</span>
@@ -300,32 +307,19 @@
                                 <td>{{ job.max_applications }}</td>
                                 <td>{{ job.application_deadline|date:"d-m-Y" }}</td>
                                 <td>
+                                    {% if job.form_template %}
                                     <div class="btn-group btn-group-sm" role="group">
-                                        <a href="{% url 'job_detail' job.slug %}" class="btn btn-outline-secondary" title="{% trans 'View' %}">
-                                            <i class="fas fa-eye"></i>
-                                        </a>
-                                        <a href="{% url 'job_update' job.slug %}" class="btn btn-outline-secondary" title="{% trans 'Edit' %}">
-                                            <i class="fas fa-edit"></i>
+                                        <a href="{% url 'form_template_submissions_list' job.form_template.slug %}" class="btn btn-outline-secondary" title="{% trans 'All Application Submissions' %}">
+                                                <i class="fas fa-file-alt text-primary-theme"></i>
                                         </a>
+                                        
                                     </div>
+                                    {% else %}
+                                        <span class="text-muted small"></span>
+                                    {% endif%}
                                 </td>
-                                <td class="text-center">
-                                    <div class="btn-group btn-group-sm" role="group">
-                                        {% if job.form_template %}
-                                            <a href="{% url 'application_submit_form' job.form_template.slug %}" class="btn btn-outline-secondary {% if job.status != 'ACTIVE' %}disabled{% endif %}" title="{% trans 'Preview' %}">
-                                                <i class="fas fa-eye"></i>
-                                            </a>
-                                            <a href="{% url 'form_builder' job.form_template.slug %}" class="btn btn-outline-secondary" title="{% trans 'Edit' %}">
-                                                <i class="fas fa-edit"></i>
-                                            </a>
-                                            <a href="{% url 'form_template_submissions_list' job.form_template.slug %}" class="btn btn-outline-secondary" title="{% trans 'Submissions' %}">
-                                                <i class="fas fa-file-alt"></i>
-                                            </a>
-                                        {% endif %}
-                                    </div>
-                                </td>
-
-                                {# CANDIDATE MANAGEMENT DATA - URLS NEUTRALIZED #}
+                                
+                                {# CANDIDATE MANAGEMENT DATA #}
                                 <td class="candidate-data-cell text-primary-theme"><a href="{% url 'candidate_screening_view' job.slug %}" class="text-primary-theme">{% if job.all_candidates.count %}{{ job.all_candidates.count }}{% else %}-{% endif %}</a></td>
                                 <td class="candidate-data-cell text-info"><a href="{% url 'candidate_screening_view' job.slug %}" class="text-info">{% if job.screening_candidates.count %}{{ job.screening_candidates.count }}{% else %}-{% endif %}</a></td>
                                 <td class="candidate-data-cell text-success"><a href="{% url 'candidate_exam_view' job.slug %}" class="text-success">{% if job.exam_candidates.count %}{{ job.exam_candidates.count }}{% else %}-{% endif %}</a></td>
@@ -340,23 +334,27 @@
             </div>
         </div>
 
-        {# ... (Card View and Paginator content) ... #}
-        <div class="card-view row g-4">
+        {# 2. CARD VIEW (Mobile Default) - Hidden on Desktop #}
+        <div class="card-view row g-4 d-lg-none">
             {% for job in jobs %}
-            <div class="col-xl-4 col-lg-6 col-md-6">
+            <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
                 <div class="card shadow-sm">
                     <div class="card-body">
                         <div class="d-flex justify-content-between align-items-start mb-2">
-                            <h5 class="card-title mb-0"><a href="{% url 'job_detail' job.slug %}" class="text-decoration-none text-primary-theme">{{ job.title }}</a></h5>
+                            <h5 class="card-title mb-0">
+                                <a href="{% url 'job_detail' job.slug %}" class="text-decoration-none text-primary-theme">{{ job.title }}</a>
+                            </h5>
                             <span class="badge bg-{{ job.status }} status-badge">{{ job.status }}</span>
                         </div>
                         <p class="text-muted small mb-3">ID: {{ job.pk }} | Source: {{ job.get_source }}</p>
 
                         <ul class="list-unstyled small mb-3">
-                            <li><i class="fas fa-users text-primary-theme me-2"></i>{% trans "Applicants" %}:{{ job.metrics.applied|default:"0" }}</li>
-                            <li><i class="fas fa-clipboard-check text-success me-2"></i> {% trans "Offers Made" %}: {{ job.metrics.offer|default:"0" }}</li>
-                            <li><i class="fas fa-file-alt text-info me-2"></i> {% trans "Form" %}:{% if job.form_template %}
-                                    <a href="{% url 'application_submit_form' job.form_template.pk %}" class="text-info">{{ job.form_template.name }}</a>
+                            <li><i class="fas fa-calendar-alt text-primary-theme me-2"></i>{% trans "Deadline" %}: {{ job.application_deadline|date:"d-m-Y" }}</li>
+                            <li><i class="fas fa-users text-primary-theme me-2"></i>{% trans "Total Applicants" %}: {{ job.all_candidates.count|default:"0" }}</li>
+                            <li><i class="fas fa-clipboard-check text-success me-2"></i> {% trans "Offers Made" %}: {{ job.offer_candidates.count|default:"0" }}</li>
+                            <li><i class="fas fa-file-alt text-info me-2"></i> {% trans "Form" %}:
+                                {% if job.form_template %}
+                                    <a href="{% url 'form_template_submissions_list' job.form_template.slug %}" class="text-info">{{ job.form_template.name }} ({{ job.form_template.submissions.count }} submissions)</a>
                                 {% else %}
                                     {% trans "N/A" %}
                                 {% endif %}
@@ -365,15 +363,13 @@
 
                         <div class="d-flex justify-content-between mt-auto pt-3 border-top">
                             <a href="{% url 'job_detail' job.slug %}" class="btn btn-outline-secondary btn-sm" title="{% trans 'View' %}">
-                                <i class="fas fa-eye me-1"></i> {% trans "Details" %}
+                                <i class="fas fa-eye me-1"></i> {% trans "View Job Details" %}
                             </a>
                             <div class="btn-group btn-group-sm">
-                                <a href="{% url 'job_update' job.slug %}" class="btn btn-outline-secondary" title="{% trans 'Edit Job' %}">
-                                    <i class="fas fa-edit"></i>
-                                </a>
+                                
                                 {% if job.form_template %}
                                 <a href="{% url 'form_template_submissions_list' job.form_template.slug %}" class="btn btn-outline-secondary" title="{% trans 'Submissions' %}">
-                                    <i class="fas fa-file-alt"></i>
+                                    <i class="fas fa-file-alt me-1"></i>{% trans "Submissions" %}
                                 </a>
                                 {% endif %}
                             </div>
@@ -386,7 +382,9 @@
         {# --- END CARD VIEW --- #}
     </div>
     {# --- END OF JOB LIST CONTAINER --- #}
+    
     {% include "includes/paginator.html" %}
+    
     {% if not jobs and not job_list_data and not page_obj %}
         <div class="text-center py-5 card shadow-sm mt-4">
             <div class="card-body">

templates/meetings/list_meetings.html

@@ -311,7 +311,7 @@
                                             </a>
                                         {% endif %}
                                         <a href="{% url 'meeting_details' meetings.first.interview_location.slug%}" class="btn btn-outline-primary" title="{% trans 'View' %}">
-                                            <i class="fas fa-eye"></i>{{meetings.first.interview_location.slug}}
+                                            <i class="fas fa-eye"></i>
                                         </a>
                                         {# CORRECTED: Passing the slug to the update URL #}
                                         <a href="" class="btn btn-outline-secondary" title="{% trans 'Update' %}">

templates/messages/message_form.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
-{% load static %}
+{% load static i18n %}
 
-{% block title %}{% if form.instance.pk %}Reply to Message{% else %}Compose Message{% endif %}{% endblock %}
+{% block title %}{% if form.instance.pk %}{% trans "Reply to Message" %}{% else %}{% trans "Compose Message" %}{% endif %}{% endblock %}
 
 {% block content %}
 <div class="container-fluid">
@@ -11,23 +11,23 @@
                 <div class="card-header">
                     <h5 class="mb-0">
                         {% if form.instance.pk %}
-                            <i class="fas fa-reply"></i> Reply to Message
+                            <i class="fas fa-reply"></i> {% trans "Reply to Message" %}
                         {% else %}
-                            <i class="fas fa-envelope"></i> Compose Message
+                            <i class="fas fa-envelope"></i> {% trans "Compose Message" %}
                         {% endif %}
                     </h5>
                 </div>
                 <div class="card-body">
                     {% if form.instance.parent_message %}
                         <div class="alert alert-info mb-4">
-                            <strong>Replying to:</strong> {{ form.instance.parent_message.subject }}
+                            <strong>{% trans "Replying to:" %}</strong> {{ form.instance.parent_message.subject }}
                             <br>
                             <small class="text-muted">
-                                From {{ form.instance.parent_message.sender.get_full_name|default:form.instance.parent_message.sender.username }}
-                                on {{ form.instance.parent_message.created_at|date:"M d, Y H:i" }}
+                                {% trans "From" %} {{ form.instance.parent_message.sender.get_full_name|default:form.instance.parent_message.sender.username }}
+                                {% trans "on" %} {{ form.instance.parent_message.created_at|date:"M d, Y H:i" }}
                             </small>
                             <div class="mt-2">
-                                <strong>Original message:</strong>
+                                <strong>{% trans "Original message:" %}</strong>
                                 <div class="border-start ps-3 mt-2">
                                     {{ form.instance.parent_message.content|linebreaks }}
                                 </div>
@@ -42,7 +42,7 @@
                             <div class="col-md-4">
                                 <div class="mb-3">
                                     <label for="{{ form.job.id_for_label }}" class="form-label">
-                                        Related Job <span class="text-danger">*</span>
+                                        {% trans "Related Job" %} <span class="text-danger">*</span>
                                     </label>
                                     {{ form.job }}
                                     {% if form.job.errors %}
@@ -51,14 +51,14 @@
                                         </div>
                                     {% endif %}
                                     <div class="form-text">
-                                        Select a job if this message is related to a specific position
+                                        {% trans "Select a job if this message is related to a specific position" %}
                                     </div>
                                 </div>
                             </div>
                             <div class="col-md-4">
                                 <div class="mb-3">
                                     <label for="{{ form.recipient.id_for_label }}" class="form-label">
-                                        Recipient <span class="text-danger">*</span>
+                                        {% trans "Recipient" %} <span class="text-danger">*</span>
                                     </label>
                                     {{ form.recipient }}
 
@@ -68,14 +68,14 @@
                                         </div>
                                     {% endif %}
                                     <div class="form-text">
-                                        Select the user who will receive this message
+                                        {% trans "Select the user who will receive this message" %}
                                     </div>
                                 </div>
                             </div>
                             <div class="col-md-4">
                                 <div class="mb-3">
                                     <label for="{{ form.message_type.id_for_label }}" class="form-label">
-                                        Message Type <span class="text-danger">*</span>
+                                        {% trans "Message Type" %} <span class="text-danger">*</span>
                                     </label>
                                     {{ form.message_type }}
                                     {% if form.message_type.errors %}
@@ -84,7 +84,7 @@
                                         </div>
                                     {% endif %}
                                     <div class="form-text">
-                                        Select the type of message you're sending
+                                        {% trans "Select the type of message you're sending" %}
                                     </div>
                                 </div>
                             </div>
@@ -94,7 +94,7 @@
                             <div class="col-md-6">
                                 <div class="mb-3">
                                     <label for="{{ form.subject.id_for_label }}" class="form-label">
-                                        Subject <span class="text-danger">*</span>
+                                        {% trans "Subject" %} <span class="text-danger">*</span>
                                     </label>
                                     {{ form.subject }}
                                     {% if form.subject.errors %}
@@ -108,7 +108,7 @@
 
                         <div class="mb-3">
                             <label for="{{ form.content.id_for_label }}" class="form-label">
-                                Message <span class="text-danger">*</span>
+                                {% trans "Message" %} <span class="text-danger">*</span>
                             </label>
                             {{ form.content }}
                             {% if form.content.errors %}
@@ -117,20 +117,20 @@
                                 </div>
                             {% endif %}
                             <div class="form-text">
-                                Write your message here. You can use line breaks and basic formatting.
+                                {% trans "Write your message here. You can use line breaks and basic formatting." %}
                             </div>
                         </div>
 
                         <div class="d-flex justify-content-between">
-                            <a href="{% url 'message_list' %}" class="btn btn-secondary">
-                                <i class="fas fa-times"></i> Cancel
+                            <a href="{% url 'message_list' %}" class="btn btn-outline-secondary">
+                                <i class="fas fa-times"></i> {% trans "Cancel" %}
                             </a>
                             <button type="submit" class="btn btn-main-action">
                                 <i class="fas fa-paper-plane"></i>
                                 {% if form.instance.pk %}
-                                    Send Reply
+                                    {% trans "Send Reply" %}
                                 {% else %}
-                                    Send Message
+                                    {% trans "Send Message" %}
                                 {% endif %}
                             </button>
                         </div>
@@ -216,19 +216,19 @@ document.addEventListener('DOMContentLoaded', function() {
 
             if (!recipient) {
                 e.preventDefault();
-                alert('Please select a recipient.');
+                alert("{% trans 'Please select a recipient.' %}");
                 return false;
             }
 
             if (!subject) {
                 e.preventDefault();
-                alert('Please enter a subject.');
+                alert("{% trans 'Please enter a subject.' %}");
                 return false;
             }
 
             if (!content) {
                 e.preventDefault();
-                alert('Please enter a message.');
+                alert("{% trans 'Please enter a message.' %}");
                 return false;
             }
         });

templates/messages/message_list.html

@@ -1,16 +1,16 @@
 {% extends "base.html" %}
-{% load static %}
+{% load static i18n %}
 
-{% block title %}Messages{% endblock %}
+{% block title %}{% trans "Messages" %}{% endblock %}
 
 {% block content %}
 <div class="container-fluid">
     <div class="row">
         <div class="col-12">
             <div class="d-flex justify-content-between align-items-center mb-4">
-                <h4 class="mb-0">Messages</h4>
+                <h4 class="mb-0">{% trans "Messages" %}</h4>
                 <a href="{% url 'message_create' %}" class="btn btn-main-action">
-                    <i class="fas fa-plus"></i> Compose Message
+                    <i class="fas fa-plus"></i> {% trans "Compose Message" %}
                 </a>
             </div>
 
@@ -19,28 +19,28 @@
                 <div class="card-body">
                     <form method="get" class="row g-3">
                         <div class="col-md-3">
-                            <label for="status" class="form-label">Status</label>
+                            <label for="status" class="form-label">{% trans "Status" %}</label>
                             <select name="status" id="status" class="form-select">
-                                <option value="">All Status</option>
-                                <option value="read" {% if status_filter == 'read' %}selected{% endif %}>Read</option>
-                                <option value="unread" {% if status_filter == 'unread' %}selected{% endif %}>Unread</option>
+                                <option value="">{% trans "All Status" %}</option>
+                                <option value="read" {% if status_filter == 'read' %}selected{% endif %}>{% trans "Read" %}</option>
+                                <option value="unread" {% if status_filter == 'unread' %}selected{% endif %}>{% trans "Unread" %}</option>
                             </select>
                         </div>
                         <div class="col-md-3">
-                            <label for="type" class="form-label">Type</label>
+                            <label for="type" class="form-label">{% trans "Type" %}</label>
                             <select name="type" id="type" class="form-select">
-                                <option value="">All Types</option>
-                                <option value="GENERAL" {% if type_filter == 'GENERAL' %}selected{% endif %}>General</option>
-                                <option value="JOB_RELATED" {% if type_filter == 'JOB_RELATED' %}selected{% endif %}>Job Related</option>
-                                <option value="INTERVIEW" {% if type_filter == 'INTERVIEW' %}selected{% endif %}>Interview</option>
-                                <option value="OFFER" {% if type_filter == 'OFFER' %}selected{% endif %}>Offer</option>
+                                <option value="">{% trans "All Types" %}</option>
+                                <option value="GENERAL" {% if type_filter == 'GENERAL' %}selected{% endif %}>{% trans "General" %}</option>
+                                <option value="JOB_RELATED" {% if type_filter == 'JOB_RELATED' %}selected{% endif %}>{% trans "Job Related" %}</option>
+                                <option value="INTERVIEW" {% if type_filter == 'INTERVIEW' %}selected{% endif %}>{% trans "Interview" %}</option>
+                                <option value="OFFER" {% if type_filter == 'OFFER' %}selected{% endif %}>{% trans "Offer" %}</option>
                             </select>
                         </div>
                         <div class="col-md-4">
-                            <label for="q" class="form-label">Search</label>
+                            <label for="q" class="form-label">{% trans "Search" %}</label>
                             <div class="input-group">
                                 <input type="text" name="q" id="q" class="form-control"
-                                       value="{{ search_query }}" placeholder="Search messages...">
+                                       value="{{ search_query }}" placeholder="{% trans 'Search messages...' %}">
                                 <button class="btn btn-outline-secondary" type="submit">
                                     <i class="fas fa-search"></i>
                                 </button>
@@ -48,7 +48,7 @@
                         </div>
                         <div class="col-md-2">
                             <label class="form-label">&nbsp;</label>
-                            <button type="submit" class="btn btn-secondary w-100">Filter</button>
+                            <button type="submit" class="btn btn-secondary w-100">{% trans "Filter" %}</button>
                         </div>
                     </form>
                 </div>
@@ -59,7 +59,7 @@
                 <div class="col-md-6">
                     <div class="card bg-light">
                         <div class="card-body">
-                            <h6 class="card-title">Total Messages</h6>
+                            <h6 class="card-title">{% trans "Total Messages" %}</h6>
                             <h3 class="text-primary">{{ total_messages }}</h3>
                         </div>
                     </div>
@@ -67,7 +67,7 @@
                 <div class="col-md-6">
                     <div class="card bg-light">
                         <div class="card-body">
-                            <h6 class="card-title">Unread Messages</h6>
+                            <h6 class="card-title">{% trans "Unread Messages" %}</h6>
                             <h3 class="text-warning">{{ unread_messages }}</h3>
                         </div>
                     </div>
@@ -82,13 +82,13 @@
                             <table class="table table-hover">
                                 <thead>
                                     <tr>
-                                        <th>Subject</th>
-                                        <th>Sender</th>
-                                        <th>Recipient</th>
-                                        <th>Type</th>
-                                        <th>Status</th>
-                                        <th>Created</th>
-                                        <th>Actions</th>
+                                        <th>{% trans "Subject" %}</th>
+                                        <th>{% trans "Sender" %}</th>
+                                        <th>{% trans "Recipient" %}</th>
+                                        <th>{% trans "Type" %}</th>
+                                        <th>{% trans "Status" %}</th>
+                                        <th>{% trans "Created" %}</th>
+                                        <th>{% trans "Actions" %}</th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -96,11 +96,11 @@
                                     <tr class="{% if not message.is_read %}table-secondary{% endif %}">
                                         <td>
                                             <a href="{% url 'message_detail' message.id %}"
-                                               class="{% if not message.is_read %}fw-bold{% endif %}">
+                                               class="{% if not message.is_read %}fw-bold {% endif %}">
                                                 {{ message.subject }}
                                             </a>
                                             {% if message.parent_message %}
-                                                <span class="badge bg-secondary ms-2">Reply</span>
+                                                <span class="badge bg-secondary  ms-2">{% trans "Reply" %}</span>
                                             {% endif %}
                                         </td>
                                         <td>{{ message.sender.get_full_name|default:message.sender.username }}</td>
@@ -112,35 +112,35 @@
                                         </td>
                                         <td>
                                             {% if message.is_read %}
-                                                <span class="badge bg-primary-theme">Read</span>
+                                                <span class="badge bg-primary-theme">{% trans "Read" %}</span>
                                             {% else %}
-                                                <span class="badge bg-warning">Unread</span>
+                                                <span class="badge bg-warning">{% trans "Unread" %}</span>
                                             {% endif %}
                                         </td>
                                         <td>{{ message.created_at|date:"M d, Y H:i" }}</td>
                                         <td>
                                             <div class="btn-group" role="group">
-                                                <a href="{% url 'message_detail' message.id %}"
-                                                   class="btn btn-sm btn-outline-primary" title="View">
+                                                                <a href="{% url 'message_detail' message.id %}"
+                                                                    class="btn btn-sm btn-outline-primary" title="{% trans 'View' %}">
                                                     <i class="fas fa-eye"></i>
                                                 </a>
                                                 {% if not message.is_read and message.recipient == request.user %}
                                                     <a href="{% url 'message_mark_read' message.id %}"
                                                        class="btn btn-sm btn-outline-success"
                                                        hx-post="{% url 'message_mark_read' message.id %}"
-                                                       title="Mark as Read">
+                                                       title="{% trans 'Mark as Read' %}">
                                                         <i class="fas fa-check"></i>
                                                     </a>
                                                 {% endif %}
                                                 <a href="{% url 'message_reply' message.id %}"
-                                                   class="btn btn-sm btn-outline-primary" title="Reply">
+                                                                    class="btn btn-sm btn-outline-primary" title="{% trans 'Reply' %}">
                                                     <i class="fas fa-reply"></i>
                                                 </a>
-                                                <a href="{% url 'message_delete' message.id %}"
-                                                   class="btn btn-sm btn-outline-danger"
-                                                   hx-get="{% url 'message_delete' message.id %}"
-                                                   hx-confirm="Are you sure you want to delete this message?"
-                                                   title="Delete">
+                                                                <a href="{% url 'message_delete' message.id %}"
+                                                                    class="btn btn-sm btn-outline-danger"
+                                                                    hx-get="{% url 'message_delete' message.id %}"
+                                                                    hx-confirm="{% trans 'Are you sure you want to delete this message?' %}"
+                                                                    title="{% trans 'Delete' %}">
                                                     <i class="fas fa-trash"></i>
                                                 </a>
                                             </div>
@@ -150,8 +150,8 @@
                                     <tr>
                                         <td colspan="7" class="text-center text-muted">
                                             <i class="fas fa-inbox fa-3x mb-3"></i>
-                                            <p class="mb-0">No messages found.</p>
-                                            <p class="small">Try adjusting your filters or compose a new message.</p>
+                                            <p class="mb-0">{% trans "No messages found." %}</p>
+                                            <p class="small">{% trans "Try adjusting your filters or compose a new message." %}</p>
                                         </td>
                                     </tr>
                                     {% endfor %}
@@ -196,10 +196,10 @@
                     {% else %}
                         <div class="text-center text-muted py-5">
                             <i class="fas fa-inbox fa-3x mb-3"></i>
-                            <p class="mb-0">No messages found.</p>
-                            <p class="small">Try adjusting your filters or compose a new message.</p>
+                            <p class="mb-0">{% trans "No messages found." %}</p>
+                            <p class="small">{% trans "Try adjusting your filters or compose a new message." %}</p>
                             <a href="{% url 'message_create' %}" class="btn btn-main-action">
-                                <i class="fas fa-plus"></i> Compose Message
+                                <i class="fas fa-plus"></i> {% trans "Compose Message" %}
                             </a>
                         </div>
                     {% endif %}

templates/participants/participants_list.html

@@ -163,7 +163,7 @@
                 </div>
 
                 <div class="col-md-6">
-                    {% url 'participant_list' as participant_list_url %}
+                   
 
                     <form method="GET" class="row g-3 align-items-end h-100">
                         {% if search_query %}<input type="hidden" name="q" value="{{ search_query }}">{% endif %}
@@ -186,7 +186,7 @@
                                     <i class="fas fa-filter me-1"></i> {% trans "Apply Filters" %}
                                 </button>
                                 {% if job_filter or search_query %}
-                                    <a href="{% url 'participant_list' %}" class="btn btn-outline-secondary btn-sm">
+                                    <a href="{% url 'participants_list' %}" class="btn btn-outline-secondary btn-sm">
                                         <i class="fas fa-times me-1"></i> {% trans "Clear" %}
                                     </a>
                                 {% endif %}

templates/people/create_person.html

@@ -146,18 +146,22 @@
         <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
                 <li class="breadcrumb-item">
-                    <a href="{% url 'person_list' %}" class="text-decoration-none">
-                        <i class="fas fa-user-friends me-1"></i> {% trans "People" %}
+                    <a href="{% url 'person_list' %}" class="text-secondary text-decoration-none">
+                        <i class="fas fa-user-friends me-1"></i> {% trans "Applicants" %}
                     </a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">{% trans "Create Person" %}</li>
+                <li class="breadcrumb-item active" aria-current="page"
+                style="
+                            color: #F43B5E; /* Rosy Accent Color */
+                            font-weight: 600;
+                        ">{% trans "Create Applicant" %}</li>
             </ol>
         </nav>
 
         <!-- Header -->
         <div class="d-flex justify-content-between align-items-center mb-4">
             <h1 style="color: var(--kaauh-teal-dark); font-weight: 700;">
-                <i class="fas fa-user-plus me-2"></i> {% trans "Create New Person" %}
+                <i class="fas fa-user-plus me-2"></i> {% trans "Create New Applicant" %}
             </h1>
             <a href="{% url 'person_list' %}" class="btn btn-outline-secondary">
                 <i class="fas fa-arrow-left me-1"></i> {% trans "Back to List" %}

templates/people/person_detail.html

@@ -215,11 +215,14 @@
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
-                <a href="{% url 'person_list' %}" class="text-decoration-none">
-                    <i class="fas fa-user-friends me-1"></i> {% trans "People" %}
+                <a href="{% url 'person_list' %}" class="text-secondary">
+                    <i class="fas fa-user-friends me-1"></i> {% trans "Applicants" %}
                 </a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">{{ person.get_full_name }}</li>
+            <li class="breadcrumb-item active" aria-current="page"
+             style=" color: #F43B5E; /* Rosy Accent Color */
+                            font-weight: 600;
+                        ">{{ person.full_name|title }}</li>
         </ol>
     </nav>
 
@@ -288,7 +291,7 @@
                         <div class="info-item">
                             <i class="fas fa-signature"></i>
                             <span class="info-label">{% trans "Full Name" %}:</span>
-                            <span class="info-value">{{ person.get_full_name }}</span>
+                            <span class="info-value">{{ person.full_name|title }}</span>
                         </div>
 
                         {% if person.first_name %}
@@ -411,7 +414,7 @@
                 <div class="card-body">
                     <h5 class="card-title">
                         <i class="fas fa-briefcase me-2"></i>{% trans "Applications" %}
-                        <span class="badge bg-primary ms-2">{{ person.applications.count }}</span>
+                        <span class="badge bg-primary-theme ms-2">{{ person.applications.count }}</span>
                     </h5>
 
                     {% if person.applications %}
@@ -429,7 +432,7 @@
                                             {% trans "Applied" %}: {{ application.created_at|date:"d M Y" }}
                                         </small>
                                     </div>
-                                    <span class="badge bg-primary">{{ application.stage }}</span>
+                                    <span class="badge bg-primary-theme">{{ application.stage }}</span>
                                 </div>
                             </div>
                         {% endfor %}
@@ -449,7 +452,7 @@
                 <div class="card-body">
                     <h5 class="card-title">
                         <i class="fas fa-file-alt me-2"></i>{% trans "Documents" %}
-                        <span class="badge bg-primary ms-2">{{ person.documents.count }}</span>
+                        <span class="badge bg-primary-theme ms-2">{{ person.documents.count }}</span>
                     </h5>
 
                     {% if person.documents %}

templates/people/person_list.html

@@ -256,25 +256,25 @@
                                             {{ person.full_name }}
                                         </a>
                                     </td>
-                                    <td>{{ person.email|default:"N/A" }}</td>
-                                    <td>{{ person.phone|default:"N/A" }}</td>
+                                    <td>{{ person.email|default:"" }}</td>
+                                    <td>{{ person.phone|default:"" }}</td>
                                     <td>
                                         {% if person.nationality %}
-                                            <span class="badge bg-primary">{{ person.nationality }}</span>
+                                            <span class="badge bg-primary-theme">{{ person.nationality }}</span>
                                         {% else %}
-                                            <span class="text-muted">N/A</span>
+                                            <span class="text-muted"></span>
                                         {% endif %}
                                     </td>
                                     <td>
                                         {% if person.gender %}
-                                            <span class="badge bg-info">
+                                            <span class="badge bg-primary-theme">
                                                 {% if person.gender == 'M' %}{% trans "Male" %}{% else %}{% trans "Female" %}{% endif %}
                                             </span>
                                         {% else %}
-                                            <span class="text-muted">N/A</span>
+                                            <span class="text-muted"></span>
                                         {% endif %}
                                     </td>
-                                    <td><span class="badge bg-secondary">{{ person.agency.name|default:"N/A" }}</span></td>
+                                    <td><span class="badge bg-primary-theme">{{ person.agency.name|default:"" }}</span></td>
                                     <td>{{ person.created_at|date:"d-m-Y" }}</td>
                                     <td class="text-end">
                                         <div class="btn-group btn-group-sm" role="group">
@@ -328,7 +328,7 @@
                                                 {{ person.get_full_name }}
                                             </a>
                                         </h5>
-                                        <p class="text-muted small mb-2">{{ person.email|default:"N/A" }}</p>
+                                        <p class="text-muted small mb-2">{{ person.email|default:"" }}</p>
                                     </div>
                                 </div>
 
@@ -341,13 +341,13 @@
                                     {% if person.nationality %}
                                         <div class="mb-2">
                                             <i class="fas fa-globe me-2"></i>
-                                            <span class="badge bg-primary">{{ person.nationality }}</span>
+                                            <span class="badge bg-primary-theme">{{ person.nationality }}</span>
                                         </div>
                                     {% endif %}
                                     {% if person.gender %}
                                         <div class="mb-2">
                                             <i class="fas fa-venus-mars me-2"></i>
-                                            <span class="badge bg-info">
+                                            <span class="badge bg-primary-theme">
                                                 {% if person.gender == 'M' %}{% trans "Male" %}{% else %}{% trans "Female" %}{% endif %}
                                             </span>
                                         </div>

templates/people/update_person.html

@@ -169,23 +169,26 @@
         <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
                 <li class="breadcrumb-item">
-                    <a href="{% url 'person_list' %}" class="text-decoration-none">
+                    <a href="{% url 'person_list' %}" class="text-decoration-none text-secondary">
                         <i class="fas fa-user-friends me-1"></i> {% trans "People" %}
                     </a>
                 </li>
                 <li class="breadcrumb-item">
-                    <a href="{% url 'person_detail' person.slug %}" class="text-decoration-none">
-                        {{ person.get_full_name }}
+                    <a href="{% url 'person_detail' person.slug %}" class="text-decoration-none text-secondary">
+                        {{ person.full_name }}
                     </a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">{% trans "Update" %}</li>
+                <li class="breadcrumb-item active" aria-current="page"
+                 style="
+                            color: #F43B5E; /* Rosy Accent Color */
+                            font-weight: 600;">{% trans "Update" %}</li>
             </ol>
         </nav>
 
         <!-- Header -->
         <div class="d-flex justify-content-between align-items-center mb-4">
             <h1 style="color: var(--kaauh-teal-dark); font-weight: 700;">
-                <i class="fas fa-user-edit me-2"></i> {% trans "Update Person" %}
+                <i class="fas fa-user-edit me-2"></i> {% trans "Update Applicant" %}
             </h1>
             <div class="d-flex gap-2">
                 <a href="{% url 'person_detail' person.slug %}" class="btn btn-outline-secondary">
@@ -383,7 +386,7 @@
                                         <i class="fas fa-undo me-1"></i> {% trans "Reset Changes" %}
                                     </button>
                                     <button type="submit" class="btn btn-main-action">
-                                        <i class="fas fa-save me-1"></i> {% trans "Update Person" %}
+                                        <i class="fas fa-save me-1"></i> {% trans "Update Applicant" %}
                                     </button>
                                 </div>
                             </div>

templates/portal_base.html

@@ -84,7 +84,7 @@
                             </li>
                             <li class="nav-item">
                                 <a class="nav-link text-white" href="{% url 'agency_portal_persons_list' %}">
-                                    <i class="fas fa-users me-1"></i> {% trans "Persons" %}
+                                    <i class="fas fa-users me-1"></i> {% trans "Applicants" %}
                                 </a>
                             </li>
                         {% elif request.user.user_type == 'candidate' %}

templates/recruitment/agency_assignment_detail.html

@@ -9,265 +9,285 @@
     :root {
         --kaauh-teal: #00636e;
         --kaauh-teal-dark: #004a53;
-        --kaauh-border: #eaeff3;
-        --kaauh-primary-text: #343a40;
-        --kaauh-success: #28a745;
-        --kaauh-info: #17a2b8;
+        --kaauh-border: #e9ecef;
+        --kaauh-primary-text: #212529;
+        --kaauh-success: #198754;
+        --kaauh-info: #0dcaf0;
         --kaauh-danger: #dc3545;
         --kaauh-warning: #ffc107;
+        --kaauh-bg-light: #f8f9fa;
+    }
+
+    .text-primary-teal {
+        color: var(--kaauh-teal) !important;
     }
 
     .kaauh-card {
-        border: 1px solid var(--kaauh-border);
+        border: none;
         border-radius: 0.75rem;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
         background-color: white;
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .kaauh-card:hover {
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     }
 
     .btn-main-action {
         background-color: var(--kaauh-teal);
         border-color: var(--kaauh-teal);
         color: white;
-        font-weight: 600;
+        font-weight: 500;
+        padding: 0.5rem 1.2rem;
         transition: all 0.2s ease;
     }
+
     .btn-main-action:hover {
         background-color: var(--kaauh-teal-dark);
         border-color: var(--kaauh-teal-dark);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        color: white;
+        transform: translateY(-1px);
+    }
+
+    .btn-white {
+        background-color: white;
+        border-color: var(--kaauh-border);
+        color: var(--kaauh-primary-text);
+    }
+
+    .btn-white:hover {
+        background-color: var(--kaauh-bg-light);
+        border-color: #dee2e6;
     }
 
     .status-badge {
         font-size: 0.75rem;
-        padding: 0.3em 0.7em;
-        border-radius: 0.35rem;
-        font-weight: 700;
+        font-weight: 600;
+        letter-spacing: 0.5px;
+        text-transform: uppercase;
+    }
+
+    .status-ACTIVE {
+        background-color: #d1e7dd;
+        color: #0f5132;
+    }
+
+    .status-EXPIRED {
+        background-color: #f8d7da;
+        color: #842029;
+    }
+
+    .status-COMPLETED {
+        background-color: #cff4fc;
+        color: #055160;
+    }
+
+    .status-CANCELLED {
+        background-color: #fff3cd;
+        color: #664d03;
+    }
+
+    .bg-soft-primary {
+        background-color: rgba(13, 110, 253, 0.1);
+    }
+
+    .bg-soft-info {
+        background-color: rgba(13, 202, 240, 0.1);
+    }
+
+    .bg-soft-success {
+        background-color: rgba(25, 135, 84, 0.1);
+    }
+
+    .avatar-circle {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+    }
+
+    .w-20 {
+        width: 20px;
+        text-align: center;
     }
-    .status-ACTIVE { background-color: var(--kaauh-success); color: white; }
-    .status-EXPIRED { background-color: var(--kaauh-danger); color: white; }
-    .status-COMPLETED { background-color: var(--kaauh-info); color: white; }
-    .status-CANCELLED { background-color: var(--kaauh-warning); color: #856404; }
 
     .progress-ring {
-        width: 120px;
-        height: 120px;
-        position: relative;
-    }
-
-    .progress-ring-circle {
-        transition: stroke-dashoffset 0.35s;
         transform: rotate(-90deg);
         transform-origin: 50% 50%;
     }
 
-    .progress-ring-text {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: var(--kaauh-teal-dark);
-    }
-
-    .message-item {
-        border-left: 4px solid var(--kaauh-teal);
-        background-color: #f8f9fa;
-        padding: 1rem;
-        margin-bottom: 1rem;
-        border-radius: 0 0.5rem 0.5rem 0;
-    }
-
-    .message-item.unread {
-        border-left-color: var(--kaauh-info);
-        background-color: #e7f3ff;
+    .progress-ring-circle {
+        transition: stroke-dashoffset 0.5s ease-in-out;
     }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid py-4">
+<div class="container-fluid py-5 bg-light">
     <!-- Header -->
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <div>
-            <h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
-                <i class="fas fa-tasks me-2"></i>
-                {{ assignment.agency.name }} - {{ assignment.job.title }}
-            </h1>
-            <p class="text-muted mb-0">
-                {% trans "Assignment Details and Management" %}
-            </p>
-        </div>
-        <div>
-            <a href="{% url 'agency_assignment_list' %}" class="btn btn-outline-secondary me-2">
-                <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Assignments" %}
-            </a>
-            <a href="{% url 'agency_assignment_update' assignment.slug %}" class="btn btn-main-action">
-                <i class="fas fa-edit me-1"></i> {% trans "Edit Assignment" %}
-            </a>
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="d-flex justify-content-between align-items-start">
+                <div>
+                    <nav aria-label="breadcrumb" class="mb-2">
+                        <ol class="breadcrumb mb-0 small">
+                            <li class="breadcrumb-item"><a href="{% url 'agency_assignment_list' %}"
+                                    class="text-decoration-none text-muted">{% trans "Assignments" %}</a></li>
+                            <li class="breadcrumb-item active" aria-current="page">{{ assignment.job.title }}</li>
+                        </ol>
+                    </nav>
+                    <h1 class="h2 fw-bold text-dark mb-2">
+                        {{ assignment.job.title }}
+                    </h1>
+                    <div class="d-flex align-items-center text-muted">
+                        <span class="me-3"><i class="fas fa-building me-1"></i> {{ assignment.agency.name }}</span>
+                        <span class="badge status-{{ assignment.status }} rounded-pill px-3">{{
+                            assignment.get_status_display }}</span>
+                    </div>
+                </div>
+                <div class="d-flex gap-2">
+                    <a href="{% url 'agency_assignment_list' %}" class="btn btn-white border shadow-sm">
+                        <i class="fas fa-arrow-left me-1"></i> {% trans "Back" %}
+                    </a>
+                    <a href="{% url 'agency_assignment_update' assignment.slug %}"
+                        class="btn btn-main-action shadow-sm">
+                        <i class="fas fa-edit me-1"></i> {% trans "Edit" %}
+                    </a>
+                </div>
+            </div>
         </div>
     </div>
 
-    <div class="row">
-        <!-- Assignment Overview -->
-        <div class="col-lg-8">
+    <div class="row g-4">
+        <!-- Left Column: Details & Candidates -->
+        <div class="col-lg-8 col-md-12">
             <!-- Assignment Details Card -->
-            <div class="kaauh-card p-4 mb-4">
-                <h5 class="mb-4" style="color: var(--kaauh-teal-dark);">
-                    <i class="fas fa-info-circle me-2"></i>
-                    {% trans "Assignment Details" %}
-                </h5>
-
-                <div class="row">
-                    <div class="col-md-6">
-                        <div class="mb-3">
-                            <label class="text-muted small">{% trans "Agency" %}</label>
-                            <div class="fw-bold">{{ assignment.agency.name }}</div>
-                            <div class="text-muted small">{{ assignment.agency.contact_person }}</div>
-                        </div>
-                        <div class="mb-3">
-                            <label class="text-muted small">{% trans "Job" %}</label>
-                            <div class="fw-bold">{{ assignment.job.title }}</div>
-                            <div class="text-muted small">{{ assignment.job.department }}</div>
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="mb-3">
-                            <label class="text-muted small">{% trans "Status" %}</label>
-                            <div>
-                                <span class="status-badge status-{{ assignment.status }}">
-                                    {{ assignment.get_status_display }}
-                                </span>
+            <div class="kaauh-card mb-4">
+                <div class="card-header bg-transparent border-bottom py-3 px-4">
+                    <h5 class="mb-0 fw-bold text-dark">
+                        <i class="fas fa-info-circle me-2 text-primary-teal"></i>
+                        {% trans "Assignment Details" %}
+                    </h5>
+                </div>
+                <div class="card-body p-4">
+                    <div class="row g-4">
+                        <div class="col-md-6">
+                            <div class="detail-group">
+                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Agency" %}</label>
+                                <div class="fs-6 fw-medium text-dark">{{ assignment.agency.name }}</div>
+                                <div class="text-muted small">{{ assignment.agency.contact_person }}</div>
                             </div>
                         </div>
-                        <div class="mb-3">
-                            <label class="text-muted small">{% trans "Deadline" %}</label>
-                            <div class="{% if assignment.is_expired %}text-danger{% else %}text-muted{% endif %}">
-                                <i class="fas fa-calendar-alt me-1"></i>
-                                {{ assignment.deadline_date|date:"Y-m-d H:i" }}
+                        <div class="col-md-6">
+                            <div class="detail-group">
+                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Department"
+                                    %}</label>
+                                <div class="fs-6 fw-medium text-dark">{{ assignment.job.department }}</div>
                             </div>
-                            {% if assignment.is_expired %}
-                                <small class="text-danger">
+                        </div>
+                        <div class="col-md-6">
+                            <div class="detail-group">
+                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Deadline"
+                                    %}</label>
+                                <div
+                                    class="fs-6 fw-medium {% if assignment.is_expired %}text-danger{% else %}text-dark{% endif %}">
+                                    {{ assignment.deadline_date|date:"M d, Y - H:i" }}
+                                </div>
+                                {% if assignment.is_expired %}
+                                <small class="text-danger fw-bold">
                                     <i class="fas fa-exclamation-triangle me-1"></i>{% trans "Expired" %}
                                 </small>
-                            {% endif %}
+                                {% endif %}
+                            </div>
                         </div>
-                    </div>
-                </div>
-
-                {% if assignment.admin_notes %}
-                    <div class="mt-3 pt-3 border-top">
-                        <label class="text-muted small">{% trans "Admin Notes" %}</label>
-                        <div class="text-muted">{{ assignment.admin_notes }}</div>
-                    </div>
-                {% endif %}
-
-
-            </div>
-
-            {% comment %} <div class="kaauh-card shadow-sm mb-4">
-                <div class="card-body my-2">
-                    <h5 class="card-title mb-3 mx-2">
-                        <i class="fas fa-key me-2 text-warning"></i>
-                        {% trans "Access Credentials" %}
-                    </h5>
-
-                    <div class="mb-3 mx-2">
-                        <label class="form-label text-muted small">{% trans "Login URL" %}</label>
-                        <div class="input-group">
-                            <input type="text" readonly value="{{ request.scheme }}://{{ request.get_host }}{% url 'agency_portal_login' %}"
-                                   class="form-control font-monospace" id="loginUrl">
-                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('loginUrl')">
-                                <i class="fas fa-copy"></i>
-                            </button>
+                        <div class="col-md-6">
+                            <div class="detail-group">
+                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Created At"
+                                    %}</label>
+                                <div class="fs-6 fw-medium text-dark">{{ assignment.created_at|date:"M d, Y" }}</div>
+                            </div>
                         </div>
                     </div>
 
-                    <div class="mb-3 mx-2">
-                        <label class="form-label text-muted small">{% trans "Access Token" %}</label>
-                        <div class="input-group">
-                            <input type="text" readonly value="{{ access_link.unique_token }}"
-                                   class="form-control font-monospace" id="accessToken">
-                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('accessToken')">
-                                <i class="fas fa-copy"></i>
-                            </button>
+                    {% if assignment.admin_notes %}
+                    <div class="mt-4 pt-4 border-top">
+                        <label class="text-uppercase text-muted small fw-bold mb-2">{% trans "Admin Notes" %}</label>
+                        <div class="p-3 bg-light rounded border-start border-4 border-info text-muted">
+                            {{ assignment.admin_notes }}
                         </div>
                     </div>
-
-                    <div class="mb-3 mx-2">
-                        <label class="form-label text-muted small">{% trans "Password" %}</label>
-                        <div class="input-group">
-                            <input type="text" readonly value="{{ access_link.access_password }}"
-                                   class="form-control font-monospace" id="accessPassword">
-                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('accessPassword')">
-                                <i class="fas fa-copy"></i>
-                            </button>
-                        </div>
-                    </div>
-
-                    <div class="alert alert-info mx-2">
-                        <i class="fas fa-info-circle me-2"></i>
-                        {% trans "Share these credentials securely with the agency. They can use this information to log in and submit candidates." %}
-                    </div>
-
-                    {% if access_link %}
-                    <a href="{% url 'agency_access_link_detail' access_link.slug %}"
-                        class="btn btn-outline-info btn-sm mx-2">
-                        <i class="fas fa-eye me-1"></i> {% trans "View Access Links Details" %}
-                    </a>
-                {% endif %}
-                </div>
-            </div> {% endcomment %}
-
-            <!-- Candidates Card -->
-            <div class="kaauh-card p-4">
-                <div class="d-flex justify-content-between align-items-center mb-4">
-                    <h5 class="mb-0" style="color: var(--kaauh-teal-dark);">
-                        <i class="fas fa-users me-2"></i>
-                        {% trans "Submitted Candidates" %} ({{ total_candidates }})
-                    </h5>
-                    {% if access_link %}
-                        <a href="{% url 'agency_portal_login' %}" target="_blank" class="btn btn-outline-info btn-sm">
-                            <i class="fas fa-external-link-alt me-1"></i> {% trans "Preview Portal" %}
-                        </a>
                     {% endif %}
                 </div>
+            </div>
 
-                {% if candidates %}
+            <!-- Candidates Card -->
+            <div class="kaauh-card">
+                <div
+                    class="card-header bg-transparent border-bottom py-3 px-4 d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0 fw-bold text-dark">
+                        <i class="fas fa-users me-2 text-primary-teal"></i>
+                        {% trans "Submitted Candidates" %}
+                        <span class="badge bg-light text-dark border ms-2">{{ total_candidates }}</span>
+                    </h5>
+                    {% if access_link %}
+                    <a href="{% url 'agency_portal_login' %}" target="_blank" class="btn btn-sm btn-outline-info">
+                        <i class="fas fa-external-link-alt me-1"></i> {% trans "Portal Preview" %}
+                    </a>
+                    {% endif %}
+                </div>
+                <div class="card-body p-0">
+                    {% if candidates %}
                     <div class="table-responsive">
-                        <table class="table table-hover">
-                            <thead>
+                        <table class="table table-hover align-middle mb-0">
+                            <thead class="bg-light">
                                 <tr>
-                                    <th>{% trans "Name" %}</th>
-                                    <th>{% trans "Contact" %}</th>
-                                    <th>{% trans "Stage" %}</th>
-                                    <th>{% trans "Submitted" %}</th>
-                                    <th>{% trans "Actions" %}</th>
+                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Candidate"
+                                        %}</th>
+                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Contact" %}
+                                    </th>
+                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Stage" %}
+                                    </th>
+                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Submitted"
+                                        %}</th>
+                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted text-end">{% trans
+                                        "Actions" %}</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 {% for candidate in candidates %}
                                 <tr>
-                                    <td>
-                                        <div class="fw-bold">{{ candidate.name }}</div>
-                                    </td>
-                                    <td>
-                                        <div class="small">
-                                            <div><i class="fas fa-envelope me-1"></i> {{ candidate.email }}</div>
-                                            <div><i class="fas fa-phone me-1"></i> {{ candidate.phone }}</div>
+                                    <td class="px-4">
+                                        <div class="d-flex align-items-center">
+                                            <div class="avatar-circle me-3 bg-soft-primary text-primary fw-bold">
+                                                {{ candidate.name|slice:":2"|upper }}
+                                            </div>
+                                            <div>
+                                                <div class="fw-bold text-dark">{{ candidate.name }}</div>
+                                            </div>
                                         </div>
                                     </td>
-                                    <td>
-                                        <span class="badge bg-info">{{ candidate.get_stage_display }}</span>
-                                    </td>
-                                    <td>
+                                    <td class="px-4">
                                         <div class="small text-muted">
-                                            {{ candidate.created_at|date:"Y-m-d H:i" }}
+                                            <div class="mb-1"><i class="fas fa-envelope me-2 w-20"></i>{{
+                                                candidate.email }}</div>
+                                            <div><i class="fas fa-phone me-2 w-20"></i>{{ candidate.phone }}</div>
                                         </div>
                                     </td>
-                                    <td>
+                                    <td class="px-4">
+                                        <span class="badge bg-soft-info text-info rounded-pill px-3">{{
+                                            candidate.get_stage_display }}</span>
+                                    </td>
+                                    <td class="px-4">
+                                        <span class="small text-muted">{{ candidate.created_at|date:"M d, Y" }}</span>
+                                    </td>
+                                    <td class="px-4 text-end">
                                         <a href="{% url 'candidate_detail' candidate.slug %}"
-                                           class="btn btn-sm btn-outline-primary" title="{% trans 'View Details' %}">
+                                            class="btn btn-sm btn-white border shadow-sm text-primary"
+                                            title="{% trans 'View Details' %}">
                                             <i class="fas fa-eye"></i>
                                         </a>
                                     </td>
@@ -276,130 +296,103 @@
                             </tbody>
                         </table>
                     </div>
-                {% else %}
-                    <div class="text-center py-4">
-                        <i class="fas fa-users fa-2x text-muted mb-3"></i>
-                        <h6 class="text-muted">{% trans "No candidates submitted yet" %}</h6>
-                        <p class="text-muted small">
-                            {% trans "Candidates will appear here once the agency submits them through their portal." %}
+                    {% else %}
+                    <div class="text-center py-5">
+                        <div class="mb-3">
+                            <div class="avatar-circle bg-light text-muted mx-auto"
+                                style="width: 64px; height: 64px; font-size: 24px;">
+                                <i class="fas fa-user-plus"></i>
+                            </div>
+                        </div>
+                        <h6 class="fw-bold text-dark">{% trans "No candidates yet" %}</h6>
+                        <p class="text-muted small mb-0">
+                            {% trans "Candidates submitted by the agency will appear here." %}
                         </p>
                     </div>
-                {% endif %}
+                    {% endif %}
+                </div>
             </div>
         </div>
 
-        <!-- Sidebar -->
-        <div class="col-lg-4">
+        <!-- Right Column: Sidebar -->
+        <div class="col-lg-4 col-md-12">
             <!-- Progress Card -->
-            <div class="kaauh-card p-4 mb-4">
-                <h5 class="mb-4 text-center" style="color: var(--kaauh-teal-dark);">
-                    {% trans "Submission Progress" %}
-                </h5>
+            <div class="kaauh-card mb-4">
+                <div class="card-body p-4 text-center">
+                    <h6 class="text-uppercase text-muted small fw-bold mb-4">{% trans "Submission Goal" %}</h6>
 
-                <div class="text-center mb-3">
-                    <div class="progress-ring">
-                        <svg width="120" height="120">
-                            <circle class="progress-ring-circle"
-                                    stroke="#e9ecef"
-                                    stroke-width="8"
-                                    fill="transparent"
-                                    r="52"
-                                    cx="60"
-                                    cy="60"/>
-                            <circle class="progress-ring-circle"
-                                    stroke="var(--kaauh-teal)"
-                                    stroke-width="8"
-                                    fill="transparent"
-                                    r="52"
-                                    cx="60"
-                                    cy="60"
-                                    style="stroke-dasharray: 326.73; stroke-dashoffset: {{ stroke_dashoffset }};"/>
+                    <div class="position-relative d-inline-block mb-3">
+                        <svg class="progress-ring" width="140" height="140">
+                            <circle class="progress-ring-bg" stroke="#f1f3f5" stroke-width="10" fill="transparent"
+                                r="60" cx="70" cy="70" />
+                            <circle class="progress-ring-circle" stroke="var(--kaauh-teal)" stroke-width="10"
+                                fill="transparent" r="60" cx="70" cy="70"
+                                style="stroke-dasharray: 376.99; stroke-dashoffset: {{ stroke_dashoffset }};" />
                         </svg>
-                        <div class="progress-ring-text">
-                            {% widthratio total_candidates assignment.max_candidates 100 as progress %}
-                            {{ progress|floatformat:0 }}%
+                        <div class="position-absolute top-50 start-50 translate-middle text-center">
+                            <div class="h3 fw-bold mb-0 text-dark">{{ total_candidates }}</div>
+                            <div class="small text-muted text-uppercase">{% trans "of" %} {{ assignment.max_candidates
+                                }}</div>
                         </div>
                     </div>
-                </div>
 
-               <div class="text-center">
-                    <div class="h4 mb-1">{{ total_candidates }}</div>
-                    <div class="text-muted">/ {{ assignment.max_candidates }} {% trans "candidates" %}</div>
-                </div>
-
-                <div class="progress mt-3" style="height: 8px;">
-                    {% widthratio total_candidates assignment.max_candidates 100 as progress %}
-                    <div class="progress-bar" style="width: {{ progress }}%"></div>
+                    <p class="text-muted small mb-0">
+                        {% trans "Candidates submitted" %}
+                    </p>
                 </div>
             </div>
 
-
             <!-- Actions Card -->
-            <div class="kaauh-card p-4">
-                <h5 class="mb-4" style="color: var(--kaauh-teal-dark);">
-                    <i class="fas fa-cog me-2"></i>
-                    {% trans "Actions" %}
-                </h5>
-
-                <div class="d-grid gap-2">
-                    <a href=""
-                       class="btn btn-outline-primary">
-                        <i class="fas fa-envelope me-1"></i> {% trans "Send Message" %}
-                    </a>
-
-                    {% if assignment.is_active and not assignment.is_expired %}
-                        <button type="button" class="btn btn-outline-warning"
-                                data-bs-toggle="modal" data-bs-target="#extendDeadlineModal">
-                            <i class="fas fa-clock me-1"></i> {% trans "Extend Deadline" %}
-                        </button>
-                    {% endif %}
-
-                    <a href="{% url 'agency_assignment_update' assignment.slug %}"
-                       class="btn btn-outline-secondary">
-                        <i class="fas fa-edit me-1"></i> {% trans "Edit Assignment" %}
-                    </a>
+            <div class="kaauh-card mb-4">
+                <div class="card-header bg-transparent border-bottom py-3 px-4">
+                    <h6 class="mb-0 fw-bold text-dark">{% trans "Quick Actions" %}</h6>
                 </div>
-            </div>
-        </div>
-    </div>
+                <div class="card-body p-4">
+                    <div class="d-grid gap-3">
+                        <a href="" class="btn btn-outline-primary">
+                            <i class="fas fa-envelope me-2"></i> {% trans "Send Message" %}
+                        </a>
 
-    <!-- Messages Section -->
-    {% if messages_ %}
-        <div class="kaauh-card p-4 mt-4">
-            <h5 class="mb-4" style="color: var(--kaauh-teal-dark);">
-                <i class="fas fa-comments me-2"></i>
-                {% trans "Recent Messages" %}
-            </h5>
-
-            <div class="row">
-                {% for message in messages_|slice:":6" %}
-                <div class="col-lg-6 mb-3">
-                    <div class="message-item {% if not message.is_read %}unread{% endif %}">
-                        <div class="d-flex justify-content-between align-items-start mb-2">
-                            <div class="fw-bold">{{ message.subject }}</div>
-                            <small class="text-muted">{{ message.created_at|date:"Y-m-d H:i" }}</small>
-                        </div>
-                        <div class="small text-muted mb-2">
-                            {% trans "From" %}: {{ message.sender.get_full_name }}
-                        </div>
-                        <div class="small">{{ message.message|truncatewords:30 }}</div>
-                        {% if not message.is_read %}
-                            <span class="badge bg-info mt-2">{% trans "New" %}</span>
+                        {% if assignment.is_active and not assignment.is_expired %}
+                        <button type="button" class="btn btn-outline-warning" data-bs-toggle="modal"
+                            data-bs-target="#extendDeadlineModal">
+                            <i class="fas fa-clock me-2"></i> {% trans "Extend Deadline" %}
+                        </button>
                         {% endif %}
                     </div>
                 </div>
-                {% endfor %}
             </div>
 
-            {% if messages_.count > 6 %}
-                <div class="text-center mt-3">
-                    <a href="#" class="btn btn-outline-primary btn-sm">
-                        {% trans "View All Messages" %}
-                    </a>
+            <!-- Recent Messages -->
+            {% if messages_ %}
+            <div class="kaauh-card">
+                <div
+                    class="card-header bg-transparent border-bottom py-3 px-4 d-flex justify-content-between align-items-center">
+                    <h6 class="mb-0 fw-bold text-dark">{% trans "Recent Messages" %}</h6>
+                    {% if messages_.count > 3 %}
+                    <a href="#" class="small text-decoration-none">{% trans "View All" %}</a>
+                    {% endif %}
                 </div>
+                <div class="card-body p-0">
+                    <div class="list-group list-group-flush">
+                        {% for message in messages_|slice:":3" %}
+                        <div
+                            class="list-group-item p-3 border-bottom-0 {% if not message.is_read %}bg-soft-info{% endif %}">
+                            <div class="d-flex justify-content-between mb-1">
+                                <span class="fw-bold text-dark small">{{ message.sender.get_full_name }}</span>
+                                <small class="text-muted" style="font-size: 0.7rem;">{{ message.created_at|date:"M d"
+                                    }}</small>
+                            </div>
+                            <div class="fw-medium small text-dark mb-1">{{ message.subject }}</div>
+                            <div class="text-muted small text-truncate">{{ message.message }}</div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
             {% endif %}
         </div>
-    {% endif %}
+    </div>
 </div>
 
 <!-- Extend Deadline Modal -->
@@ -420,8 +413,8 @@
                         <label for="new_deadline" class="form-label">
                             {% trans "New Deadline" %} <span class="text-danger">*</span>
                         </label>
-                        <input type="datetime-local" class="form-control" id="new_deadline"
-                               name="new_deadline" required>
+                        <input type="datetime-local" class="form-control" id="new_deadline" name="new_deadline"
+                            required>
                         <small class="form-text text-muted">
                             {% trans "Current deadline:" %} {{ assignment.deadline_date|date:"Y-m-d H:i" }}
                         </small>
@@ -443,13 +436,13 @@
 
 {% block customJS %}
 <script>
-function copyToClipboard(text) {
-    navigator.clipboard.writeText(text).then(function() {
-        // Show success message
-        const toast = document.createElement('div');
-        toast.className = 'position-fixed top-0 end-0 p-3';
-        toast.style.zIndex = '1050';
-        toast.innerHTML = `
+    function copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(function () {
+            // Show success message
+            const toast = document.createElement('div');
+            toast.className = 'position-fixed top-0 end-0 p-3';
+            toast.style.zIndex = '1050';
+            toast.innerHTML = `
             <div class="toast show" role="alert">
                 <div class="toast-header">
                     <strong class="me-auto">{% trans "Success" %}</strong>
@@ -460,61 +453,61 @@ function copyToClipboard(text) {
                 </div>
             </div>
         `;
-        document.body.appendChild(toast);
+            document.body.appendChild(toast);
+
+            setTimeout(() => {
+                toast.remove();
+            }, 3000);
+        });
+    }
+
+    function copyToClipboard(elementId) {
+        const element = document.getElementById(elementId);
+        element.select();
+        document.execCommand('copy');
+
+        // Show feedback
+        const button = element.nextElementSibling;
+        const originalHTML = button.innerHTML;
+        button.innerHTML = '<i class="fas fa-check"></i>';
+        button.classList.add('btn-success');
+        button.classList.remove('btn-outline-secondary');
 
         setTimeout(() => {
-            toast.remove();
-        }, 3000);
+            button.innerHTML = originalHTML;
+            button.classList.remove('btn-success');
+            button.classList.add('btn-outline-secondary');
+        }, 2000);
+    }
+
+    function confirmDeactivate() {
+        if (confirm('{% trans "Are you sure you want to deactivate this access link? Agencies will no longer be able to use it." %}')) {
+            // Submit form to deactivate
+            window.location.href = '';
+        }
+    }
+
+    function confirmReactivate() {
+        if (confirm('{% trans "Are you sure you want to reactivate this access link?" %}')) {
+            // Submit form to reactivate
+            window.location.href = '';
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        // Set minimum datetime for new deadline
+        const deadlineInput = document.getElementById('new_deadline');
+        if (deadlineInput) {
+            const currentDeadline = new Date('{{ assignment.deadline_date|date:"Y-m-d\\TH:i" }}');
+            const now = new Date();
+            const minDateTime = new Date(Math.max(currentDeadline, now));
+
+            const localDateTime = new Date(minDateTime.getTime() - minDateTime.getTimezoneOffset() * 60000)
+                .toISOString()
+                .slice(0, 16);
+            deadlineInput.min = localDateTime;
+            deadlineInput.value = localDateTime;
+        }
     });
-}
-
-function copyToClipboard(elementId) {
-    const element = document.getElementById(elementId);
-    element.select();
-    document.execCommand('copy');
-
-    // Show feedback
-    const button = element.nextElementSibling;
-    const originalHTML = button.innerHTML;
-    button.innerHTML = '<i class="fas fa-check"></i>';
-    button.classList.add('btn-success');
-    button.classList.remove('btn-outline-secondary');
-
-    setTimeout(() => {
-        button.innerHTML = originalHTML;
-        button.classList.remove('btn-success');
-        button.classList.add('btn-outline-secondary');
-    }, 2000);
-}
-
-function confirmDeactivate() {
-    if (confirm('{% trans "Are you sure you want to deactivate this access link? Agencies will no longer be able to use it." %}')) {
-        // Submit form to deactivate
-        window.location.href = '';
-    }
-}
-
-function confirmReactivate() {
-    if (confirm('{% trans "Are you sure you want to reactivate this access link?" %}')) {
-        // Submit form to reactivate
-        window.location.href = '';
-    }
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-    // Set minimum datetime for new deadline
-    const deadlineInput = document.getElementById('new_deadline');
-    if (deadlineInput) {
-        const currentDeadline = new Date('{{ assignment.deadline_date|date:"Y-m-d\\TH:i" }}');
-        const now = new Date();
-        const minDateTime = new Date(Math.max(currentDeadline, now));
-
-        const localDateTime = new Date(minDateTime.getTime() - minDateTime.getTimezoneOffset() * 60000)
-            .toISOString()
-            .slice(0, 16);
-        deadlineInput.min = localDateTime;
-        deadlineInput.value = localDateTime;
-    }
-});
 </script>
-{% endblock %}
+{% endblock %}

templates/recruitment/agency_detail.html

@@ -275,44 +275,32 @@
         border-bottom: 1px solid var(--kaauh-border); /* Consistent thin bottom border for the entire row */
     }
 
-    /* Default tab link styling */
+     /* Tabs Theming - Applies to the right column */
+    .nav-tabs {
+        border-bottom: 1px solid var(--kaauh-border);
+        background-color: #f8f9fa;
+        padding: 0;
+    }
+
     .nav-tabs .nav-link {
-        color: var(--kaauh-primary-text); /* Default text color */
-        border: 1px solid var(--kaauh-border); /* Add border to all sides */
-        border-bottom: none; /* Remove tab's own bottom border */
-        border-radius: 0.5rem 0.5rem 0 0; /* Slightly smaller radius for tabs */
-        margin-right: 0.25rem;
-        padding: 0.75rem 1.25rem;
-        transition: all 0.2s ease-in-out;
-        background-color: #f8f9fa; /* Visible light background for inactive tabs */
+        border: none;
+        border-bottom: 3px solid transparent;
+        color: var(--kaauh-primary-text);
+        font-weight: 500;
+        padding: 0.75rem 1rem;
+        margin-right: 0.5rem;
+        transition: all 0.2s;
     }
-
-    /* Tab link hover state */
-    .nav-tabs .nav-link:hover:not(.active) {
-        color: var(--kaauh-teal);
-        background-color: #e9ecef; /* Slightly darker on hover */
-        border-color: var(--kaauh-teal); /* Use teal border on hover */
-        border-bottom: none; /* Keep the bottom flat */
-    }
-
-    /* Active tab link styling */
+    /* Active Link */
     .nav-tabs .nav-link.active {
-        color: var(--kaauh-teal-dark);
-        background-color: white; /* White background for active */
-        border-color: var(--kaauh-border); /* Use border color for all three sides */
-        border-bottom: 2px solid white; /* Override the tab strip border with white to lift the tab */
-        margin-bottom: -1px; /* Overlap slightly with the card border for a cleaner look */
+        color: var(--kaauh-teal-dark) !important;
+        background-color: white !important;
+        border-bottom: 3px solid var(--kaauh-teal) !important;
         font-weight: 600;
+        z-index: 2;
+        border-right-color: transparent !important;
+        margin-bottom: -1px;
     }
-
-    /* Tab pane styling for border consistency */
-    .tab-content .tab-pane {
-        border: 1px solid var(--kaauh-border); /* Consistent border for the content */
-        border-top: none; /* The nav tabs handle the top border */
-        border-radius: 0 0 0.75rem 0.75rem;
-        background-color: white;
-    }
-
 </style>
 {% endblock %}
 
@@ -487,7 +475,7 @@
                             <i class="fas fa-key me-2" style="color: var(--kaauh-teal);"></i>
                             {% trans "Agency Login Information" %}
                         </h5>
-                        <div class="alert alert-info" role="alert">
+                        <div class="alert " role="alert">
                             <h6 class="alert-heading">
                                 <i class="fas fa-info-circle me-2"></i>
                                 {% trans "Important Security Notice" %}

templates/recruitment/agency_form.html

@@ -191,7 +191,7 @@
 
                         <!-- Form Actions -->
                         <div class="d-flex justify-content-between">
-                            <a href="{% url 'agency_list' %}" class="btn btn-secondary">
+                            <a href="{% url 'agency_list' %}" class="btn btn-outline-secondary">
                                 <i class="fas fa-times me-1"></i> {% trans "Cancel" %}
                             </a>
                             <button type="submit" class="btn btn-main-action">

templates/recruitment/agency_list.html

@@ -199,10 +199,10 @@
                                     <td>
                                         {% if agency.email %}
                                             <a href="mailto:{{ agency.email }}"
-                                               class="text-decoration-none"
+                                               class="text-decoration-none text-dark smal"
                                                title="{{ agency.email }}">
                                                 <i class="fas fa-envelope me-1"></i>
-                                                {{ agency.email|truncatechars:20 }}
+                                                {{ agency.email|truncatechars:30 }}
                                             </a>
                                         {% else %}
                                             -

templates/recruitment/agency_portal_persons_list.html

@@ -63,16 +63,16 @@
         <div class="px-2 py-2">
             <h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
                 <i class="fas fa-users me-2"></i>
-                {% trans "All Persons" %}
+                {% trans "All Applicants" %}
             </h1>
             <p class="text-muted mb-0">
-                {% trans "All persons who come through" %} {{ agency.name }}
+                {% trans "All applicants who come through" %} {{ agency.name }}
             </p>
         </div>
         <div>
 	            <!-- Add Person Button -->
             <button type="button" class="btn btn-main-action" data-bs-toggle="modal" data-bs-target="#personModal">
-                <i class="fas fa-plus me-1"></i> {% trans "Add New Person" %}
+                <i class="fas fa-plus me-1"></i> {% trans "Add New Applicant" %}
             </button>
 	        </div>
     </div>
@@ -120,7 +120,7 @@
     <!-- Results Summary -->
     <div class="row mb-3">
         <div class="col-md-6">
-            <div class="kaauh-card shadow-sm h-100">
+            <div class="kaauh-card shadow-sm h-100 p-3">
                 <div class="card-body text-center">
                     <div class="text-info mb-2">
                         <i class="fas fa-users fa-2x"></i>
@@ -131,7 +131,7 @@
             </div>
         </div>
         <div class="col-md-6">
-            <div class="kaauh-card shadow-sm h-100">
+            <div class="kaauh-card shadow-sm h-100 p-3">
                 <div class="card-body text-center">
                     <div class="text-success mb-2">
                         <i class="fas fa-check-circle fa-2x"></i>
@@ -297,7 +297,7 @@
             <div class="modal-header">
                 <h5 class="modal-title" id="personModalLabel">
                     <i class="fas fa-users me-2"></i>
-                    {% trans "Person Details" %}
+                    {% trans "Applicant Details" %}
                 </h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>

templates/recruitment/candidate_application_detail.html

@@ -5,31 +5,66 @@
 
 {% block customCSS %}
 <style>
-/* Application Progress Timeline - Using Kaauh Theme Colors */
+/* Kaauh Theme Variables - Assuming these are defined in portal_base */
+:root {
+    /* Assuming these are carried from your global CSS/base template */
+    --kaauh-teal: #00636e; 
+    --kaauh-teal-dark: #004a53;
+    --kaauh-border: #eaeff3;
+    --kaauh-primary-text: #343a40;
+    --kaauh-success: #28a745;
+    --kaauh-info: #17a2b8;
+    --kaauh-danger: #dc3545;
+    --kaauh-warning: #ffc107;
+    --kaauh-secondary: #6c757d; /* Added secondary color for general use */
+}
+
+/* Theme Utilities */
+.bg-primary-theme {
+    background-color: var(--kaauh-teal) !important;
+}
+.text-primary-theme {
+    color: var(--kaauh-teal) !important;
+}
+
+/* 1. Application Progress Timeline (Improved Spacing) */
 .application-progress {
     position: relative;
-    display: flex;
-    justify-content: space-between;
-    margin: 2rem 0;
+    /* Use flexbox for layout */
+    display: flex; 
+    /* Use gap for consistent space between elements */
+    gap: 1.5rem; 
+    /* Center the timeline content */
+    justify-content: center; 
+    margin: 2rem 0 3rem; /* Extra spacing below timeline */
+    padding: 0 1rem;
+    overflow-x: auto; /* Allow horizontal scroll for small screens */
 }
 
 .progress-step {
-    flex: 1;
-    text-align: center;
+    /* Use fixed width or rely on content width for cleaner flow */
     position: relative;
+    text-align: center;
+    /* Prevent shrinking */
+    flex-shrink: 0; 
+    /* Added min-width for label spacing */
+    min-width: 100px; 
 }
 
+/* Timeline Connector Line */
 .progress-step::before {
     content: '';
     position: absolute;
     top: 20px;
-    left: 50%;
-    width: 100%;
+    /* Adjust position to connect centered steps */
+    left: calc(-50% + 20px); 
+    width: calc(100% - 40px);
     height: 2px;
     background: var(--kaauh-border);
     z-index: -1;
 }
 
+/* Hide line for the first step */
 .progress-step:first-child::before {
     display: none;
 }
@@ -39,7 +74,8 @@
 }
 
 .progress-step.active::before {
-    background: var(--kaauh-teal);
+    /* Line leading up to the active step should be completed/success color */
+    background: var(--kaauh-success); 
 }
 
 .progress-icon {
@@ -54,7 +90,7 @@
     font-weight: bold;
     color: #6c757d;
     position: relative;
-    z-index: 1;
+    z-index: 2; /* Ensure icon covers the line */
 }
 
 .progress-step.completed .progress-icon {
@@ -65,12 +101,15 @@
 .progress-step.active .progress-icon {
     background: var(--kaauh-teal);
     color: white;
+    /* Add a subtle shadow for focus */
+    box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.2); 
 }
 
 .progress-label {
     font-size: 0.875rem;
     color: #6c757d;
     margin-top: 0.5rem;
+    line-height: 1.2;
 }
 
 .progress-step.completed .progress-label,
@@ -87,70 +126,84 @@
     font-weight: 600;
 }
 
-.status-applied { background: #e3f2fd; color: #1976d2; }
-.status-screening { background: #fff3e0; color: #f57c00; }
-.status-document_review { background: #f3e5f5; color: #7b1fa2; }
-.status-exam { background: #f3e5f5; color: #7b1fa2; }
-.status-interview { background: #e8f5e8; color: #388e3c; }
-.status-offer { background: #fff8e1; color: #f9a825; }
-.status-hired { background: #e8f5e8; color: #2e7d32; }
-.status-rejected { background: #ffebee; color: #c62828; }
-
-/* AI Score Circle - Using Theme Colors */
-.ai-score-circle {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: white;
-    margin: 0 auto 1rem;
-}
-
-.ai-score-high { background: linear-gradient(135deg, var(--kaauh-success), #20c997); }
-.ai-score-medium { background: linear-gradient(135deg, var(--kaauh-warning), #fd7e14); }
-.ai-score-low { background: linear-gradient(135deg, var(--kaauh-danger), #e83e8c); }
-
-/* Alert Purple - Using Theme Colors */
-.alert-purple {
-    color: #4a148c;
-    background-color: #f3e5f5;
-    border-color: #ce93d8;
-}
+/* Card Header Consistency */
 .card-header{
-    padding: 0.75rem 1.25rem;
+    padding: 1rem 1.5rem; /* Increased padding */
+    border-top-left-radius: 0.75rem;
+    border-top-right-radius: 0.75rem;
+    border-bottom: none;
+}
+
+/* Table Actions Theme */
+.table .btn-primary {
+    background-color: var(--kaauh-teal);
+    border-color: var(--kaauh-teal);
+}
+.table .btn-primary:hover {
+    background-color: var(--kaauh-teal-dark);
+    border-color: var(--kaauh-teal-dark);
+}
+
+.btn-main-action {
+    background-color: var(--kaauh-teal);
+    border-color: var(--kaauh-teal);
+    color: white;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+.btn-main-action:hover {
+    background-color: var(--kaauh-teal-dark);
+    border-color: var(--kaauh-teal-dark);
+}
+
+/* Style for action cards to make text smaller */
+.action-card .card-body h6 {
+    font-size: 1rem;
+}
+.action-card .card-body p {
+    font-size: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+.action-card .card-body {
+    padding: 1.5rem 1rem;
+}
+
+/* Custom Alert for Document Review */
+.alert-purple {
+    background-color: #e5e0ff;
+    border-color: #c9c0ff;
+    color: #5d49a3;
 }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-    <!-- Breadcrumb Navigation -->
+<div class="container-fluid py-4">
     <nav aria-label="breadcrumb" class="mb-4">
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
-                <a href="{% url 'candidate_portal_dashboard' %}">{% trans "Dashboard" %}</a>
+                <a href="{% url 'candidate_portal_dashboard' %}" class=" text-decoration-none text-secondary">{% trans "Dashboard" %}</a>
             </li>
             <li class="breadcrumb-item">
-                <a href="{% url 'candidate_portal_dashboard' %}#applications">{% trans "My Applications" %}</a>
+                <a href="{% url 'candidate_portal_dashboard' %}#applications" class="text-secondary text-decoration">{% trans "My Applications" %}</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
+            <li class="breadcrumb-item active" aria-current="page"  style="
+                            color: #F43B5E; /* Rosy Accent Color */
+                            font-weight: 600;
+                        ">
                 {% trans "Application Details" %}
             </li>
         </ol>
     </nav>
 
-    <!-- Application Header with Progress -->
-    <div class="row mb-4">
+    
+    <div class="row mb-4"> 
         <div class="col-12">
             <div class="kaauh-card">
-                <div class="card-header bg-primary-theme text-white">
+                <div class="card-header bg-primary-theme text-white"> 
                     <div class="row align-items-center">
                         <div class="col-md-8">
-                            <h4 class="mb-2">
+                            <h4 class="mb-1">
                                 <i class="fas fa-briefcase me-2"></i>
                                 {{ application.job.title }}
                             </h4>
@@ -159,26 +212,25 @@
                             </p>
                         </div>
                         <div class="col-md-4 text-end">
-                            <span class="status-badge status-{{ application.stage }}">
-                                {{ application.get_stage_display }}
-                            </span>
+                            <div class="d-inline-block p-1 rounded-pill" style="background-color: rgba(255, 255, 255, 0.2);">
+                                <span class="status-badge status-{{ application.stage }}">
+                                    {{ application.get_stage_display }}
+                                </span>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="card-body">
-                    <!-- Application Progress Timeline -->
+                <div class="card-body pt-5"> 
                     <div class="application-progress">
-                        <!-- Applied Stage - Always shown -->
-                        <div class="progress-step {% if application.stage != 'Applied' %}completed{% else %}active{% endif %}">
+                        <div class="progress-step {% if application.stage != 'Applied' and application.stage != 'Rejected' %}completed{% else %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
                                 <i class="fas fa-paper-plane"></i>
                             </div>
                             <div class="progress-label">{% trans "Applied" %}</div>
                         </div>
 
-                        <!-- Exam Stage - Show if current stage is Exam or beyond -->
                         {% if application.stage in 'Exam,Interview,Document Review,Offer,Hired,Rejected' %}
-                        <div class="progress-step {% if application.stage not in 'Applied,Exam' %}completed{% elif application.stage == 'Exam' %}active{% endif %}">
+                        <div class="progress-step {% if application.stage not in 'Applied,Exam' and application.stage != 'Rejected' %}completed{% elif application.stage == 'Exam' %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
                                 <i class="fas fa-clipboard-check"></i>
                             </div>
@@ -186,9 +238,8 @@
                         </div>
                         {% endif %}
 
-                        <!-- Interview Stage - Show if current stage is Interview or beyond -->
                         {% if application.stage in 'Interview,Document Review,Offer,Hired,Rejected' %}
-                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview' %}completed{% elif application.stage == 'Interview' %}active{% endif %}">
+                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview' and application.stage != 'Rejected' %}completed{% elif application.stage == 'Interview' %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
                                 <i class="fas fa-video"></i>
                             </div>
@@ -196,9 +247,8 @@
                         </div>
                         {% endif %}
 
-                        <!-- Document Review Stage - Show if current stage is Document Review or beyond -->
                         {% if application.stage in 'Document Review,Offer,Hired,Rejected' %}
-                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview,Document Review' %}completed{% elif application.stage == 'Document Review' %}active{% endif %}">
+                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview,Document Review' and application.stage != 'Rejected' %}completed{% elif application.stage == 'Document Review' %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
                                 <i class="fas fa-file-alt"></i>
                             </div>
@@ -206,9 +256,8 @@
                         </div>
                         {% endif %}
 
-                        <!-- Offer Stage - Show if current stage is Offer or beyond -->
                         {% if application.stage in 'Offer,Hired,Rejected' %}
-                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview,Document Review,Offer' %}completed{% elif application.stage == 'Offer' %}active{% endif %}">
+                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview,Document Review,Offer' and application.stage != 'Rejected' %}completed{% elif application.stage == 'Offer' %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
                                 <i class="fas fa-handshake"></i>
                             </div>
@@ -216,44 +265,42 @@
                         </div>
                         {% endif %}
 
-                        <!-- Hired Stage - Show only if current stage is Hired or Rejected -->
                         {% if application.stage in 'Hired,Rejected' %}
-                        <div class="progress-step {% if application.stage == 'Hired' %}completed{% elif application.stage == 'Rejected' %}active{% endif %}">
+                        <div class="progress-step {% if application.stage == 'Hired' %}completed{% elif application.stage == 'Rejected' %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
-                                <i class="fas fa-trophy"></i>
+                                <i class="fas {% if application.stage == 'Hired' %}fa-trophy{% else %}fa-times-circle{% endif %}"></i>
                             </div>
-                            <div class="progress-label">{% trans "Hired" %}</div>
+                            <div class="progress-label">{% trans "Final Status" %}</div>
                         </div>
                         {% endif %}
                     </div>
 
-                    <!-- Application Details Grid -->
-                    <div class="row mt-4">
+                    <div class="row mt-4 g-4"> 
                         <div class="col-md-3">
-                            <div class="text-center p-3 bg-light rounded">
+                            <div class="text-center p-3 bg-light rounded h-100 shadow-sm"> 
                                 <i class="fas fa-calendar-alt text-primary-theme fa-2x mb-2"></i>
-                                <h6 class="text-muted">{% trans "Applied Date" %}</h6>
+                                <h6 class="text-muted small">{% trans "Applied Date" %}</h6>
                                 <p class="mb-0 fw-bold">{{ application.created_at|date:"M d, Y" }}</p>
                             </div>
                         </div>
                         <div class="col-md-3">
-                            <div class="text-center p-3 bg-light rounded">
+                            <div class="text-center p-3 bg-light rounded h-100 shadow-sm">
                                 <i class="fas fa-building text-info fa-2x mb-2"></i>
-                                <h6 class="text-muted">{% trans "Department" %}</h6>
+                                <h6 class="text-muted small">{% trans "Department" %}</h6>
                                 <p class="mb-0 fw-bold">{{ application.job.department|default:"-" }}</p>
                             </div>
                         </div>
                         <div class="col-md-3">
-                            <div class="text-center p-3 bg-light rounded">
+                            <div class="text-center p-3 bg-light rounded h-100 shadow-sm">
                                 <i class="fas fa-briefcase text-success fa-2x mb-2"></i>
-                                <h6 class="text-muted">{% trans "Job Type" %}</h6>
+                                <h6 class="text-muted small">{% trans "Job Type" %}</h6>
                                 <p class="mb-0 fw-bold">{{ application.get_job_type_display }}</p>
                             </div>
                         </div>
                         <div class="col-md-3">
-                            <div class="text-center p-3 bg-light rounded">
+                            <div class="text-center p-3 bg-light rounded h-100 shadow-sm">
                                 <i class="fas fa-map-marker-alt text-warning fa-2x mb-2"></i>
-                                <h6 class="text-muted">{% trans "Location" %}</h6>
+                                <h6 class="text-muted small">{% trans "Location" %}</h6>
                                 <p class="mb-0 fw-bold">{{ application.get_workplace_type_display }}</p>
                             </div>
                         </div>
@@ -262,11 +309,44 @@
             </div>
         </div>
     </div>
+    
+    <div class="row mb-5"> 
+        <div class="col-md-6 col-6"> 
+            <div class="kaauh-card h-50 shadow-sm action-card">
+                <div class="card-body text-center mb-4">
+                    <i class="fas fa-arrow-left fa-2x text-primary-theme mb-3"></i>
+                    <h6>{% trans "Go to Dashboard" %}</h6>
+                    <p class="text-muted small">{% trans "View all applications" %}</p>
+                    <a href="{% url 'candidate_portal_dashboard' %}" class="btn btn-main-action btn-sm w-100">
+                        {% trans "Dashboard" %}
+                    </a>
+                </div>
+            </div>
+        </div>
 
-
-    <!-- Interview Details -->
+        {% if application.resume %}
+        <div class="col-md-6 col-6"> 
+            <div class="kaauh-card h-50 shadow-sm action-card">
+                <div class="card-body text-center mb-4">
+                    <i class="fas fa-file-download fa-2x text-success mb-3"></i>
+                    <h6>{% trans "Download Resume" %}</h6>
+                    <p class="text-muted small">{% trans "Get your submitted file" %}</p>
+                    <a href="{{ application.resume.url }}"
+                       target="_blank"
+                       class="btn btn-main-action btn-sm w-100">
+                        <i class="fas fa-download me-2"></i>
+                        {% trans "Download" %}
+                    </a>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        
+       
+        
+    </div>
     {% if interviews %}
-    <div class="row mb-4">
+    <div class="row mb-5"> 
         <div class="col-12">
             <div class="kaauh-card">
                 <div class="card-header bg-success text-white">
@@ -275,11 +355,11 @@
                         {% trans "Interview Schedule" %}
                     </h5>
                 </div>
-                <div class="card-body">
+                <div class="card-body p-4"> 
                     {% if interviews %}
                         <div class="table-responsive">
-                            <table class="table table-hover">
-                                <thead>
+                            <table class="table table-hover align-middle"> 
+                                <thead class="table-light">
                                     <tr>
                                         <th>{% trans "Date" %}</th>
                                         <th>{% trans "Time" %}</th>
@@ -296,7 +376,7 @@
                                         <td>{{ interview.interview_time|time:"H:i" }}</td>
                                         <td>
                                             {% if interview.zoom_meeting %}
-                                                <span class="badge bg-primary">
+                                                <span class="badge bg-primary-theme"> 
                                                     <i class="fas fa-laptop me-1"></i>
                                                     {% trans "Remote" %}
                                                 </span>
@@ -349,9 +429,8 @@
     </div>
     {% endif %}
 
-    <!-- Documents Section -->
     {% if application.stage == "Document Review" %}
-        <div class="row mb-4">
+        <div class="row mb-5"> 
             <div class="col-12">
                 <div class="kaauh-card">
                     <div class="card-header bg-primary-theme text-white">
@@ -370,11 +449,11 @@
                             </div>
                         </div>
                     </div>
-                    <div class="card-body">
+                    <div class="card-body p-4"> 
                         {% if documents %}
                             <div class="table-responsive">
-                                <table class="table table-hover">
-                                    <thead>
+                                <table class="table table-hover align-middle">
+                                    <thead class="table-light">
                                         <tr>
                                             <th>{% trans "Document Name" %}</th>
                                             <th>{% trans "Type" %}</th>
@@ -390,7 +469,7 @@
                                                 {% if document.file %}
                                                     <a href="{{ document.file.url }}"
                                                     target="_blank"
-                                                    class="text-decoration-none">
+                                                    class="text-decoration-none text-primary-theme"> 
                                                         <i class="fas fa-file-pdf text-danger me-2"></i>
                                                         {{ document.get_document_type_display }}
                                                     </a>
@@ -446,79 +525,17 @@
             </div>
         </div>
     {% endif %}
-    <!-- Action Cards -->
+
     <div class="row mb-4">
-        <div class="col-md-3 mb-3">
-            <div class="kaauh-card h-100">
-                <div class="card-body text-center">
-                    <i class="fas fa-arrow-left fa-2x text-primary-theme mb-3"></i>
-                    <h6>{% trans "Back to Dashboard" %}</h6>
-                    <p class="text-muted small">{% trans "View all your applications" %}</p>
-                    <a href="{% url 'candidate_portal_dashboard' %}" class="btn btn-main-action w-100">
-                        {% trans "Go to Dashboard" %}
-                    </a>
-                </div>
-            </div>
-        </div>
-
-        {% if application.resume %}
-        <div class="col-md-3 mb-3">
-            <div class="kaauh-card h-100">
-                <div class="card-body text-center">
-                    <i class="fas fa-download fa-2x text-success mb-3"></i>
-                    <h6>{% trans "Download Resume" %}</h6>
-                    <p class="text-muted small">{% trans "Get your submitted resume" %}</p>
-                    <a href="{{ application.resume.url }}"
-                       target="_blank"
-                       class="btn btn-main-action w-100">
-                        <i class="fas fa-download me-2"></i>
-                        {% trans "Download" %}
-                    </a>
-                </div>
-            </div>
-        </div>
-        {% endif %}
-
-        <div class="col-md-3 mb-3">
-            <div class="kaauh-card h-100">
-                <div class="card-body text-center">
-                    <i class="fas fa-print fa-2x text-info mb-3"></i>
-                    <h6>{% trans "Print Application" %}</h6>
-                    <p class="text-muted small">{% trans "Get a printable version" %}</p>
-                    <button class="btn btn-main-action w-100" onclick="window.print()">
-                        <i class="fas fa-print me-2"></i>
-                        {% trans "Print" %}
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        {% comment %} <div class="col-md-3 mb-3">
-            <div class="kaauh-card h-100">
-                <div class="card-body text-center">
-                    <i class="fas fa-edit fa-2x text-warning mb-3"></i>
-                    <h6>{% trans "Update Profile" %}</h6>
-                    <p class="text-muted small">{% trans "Edit your personal information" %}</p>
-                    <a href="" class="btn btn-main-action w-100">
-                        <i class="fas fa-edit me-2"></i>
-                        {% trans "Update" %}
-                    </a>
-                </div>
-            </div>
-        </div> {% endcomment %}
-    </div>
-
-    <!-- Next Steps Section -->
-    {% comment %} <div class="row">
         <div class="col-12">
             <div class="kaauh-card">
-                <div class="card-header bg-primary text-white">
+                <div class="card-header bg-primary-theme text-white">
                     <h5 class="mb-0">
                         <i class="fas fa-info-circle me-2"></i>
                         {% trans "Next Steps" %}
                     </h5>
                 </div>
-                <div class="card-body">
+                <div class="card-body p-4"> 
                     {% if application.stage == 'Applied' %}
                         <div class="alert alert-info">
                             <i class="fas fa-clock me-2"></i>
@@ -563,10 +580,9 @@
                 </div>
             </div>
         </div>
-    </div> {% endcomment %}
+    </div>
 </div>
 
-<!-- Upload Document Modal -->
 <div class="modal fade" id="uploadDocumentModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content">
@@ -612,6 +628,7 @@
     </div>
 </div>
 
+
 <script>
 function addToCalendar(year, month, day, time, title) {
     // Create Google Calendar URL
@@ -667,4 +684,5 @@ function getCookie(name) {
     return cookieValue;
 }
 </script>
-{% endblock content %}
+
+{% endblock %}

templates/recruitment/candidate_detail.html

@@ -268,12 +268,12 @@
     <div class="row g-4">
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
-            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-secondary">Home</a></li>
-            <li class="breadcrumb-item"><a href="{% url 'job_detail' candidate.job.slug  %}" class="text-secondary">Job:({{candidate.job.title}})</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-secondary text-decoration-none">Home</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'job_detail' candidate.job.slug  %}" class="text-secondary text-decoration-none">Job:({{candidate.job.title}})</a></li>
             <li class="breadcrumb-item active" aria-current="page" class="text-secondary"  style="
                             color: #F43B5E; /* Rosy Accent Color */
                             font-weight: 600;
-                        ">Applicant Detail</li>
+                        ">{% trans "Applicant Detail" %}</li>
         </ol>
        </nav>
 
@@ -683,7 +683,7 @@
                         {% if days > 0 %}
                             {{ days }} day{{ days|pluralize }}
                         {% else %}
-                            N/A
+                            0
                         {% endif %}
                     {% endwith %}
                 </h5>
@@ -704,7 +704,7 @@
         <div style="display: flex; justify-content: center; align-items: center; height: 100%;" class="mb-2">
             <div class="ai-loading-container">
                 <i class="fas fa-robot ai-robot-icon"></i>
-                <span>Resume is been Scoring...</span>
+                <span>{% trans "Resume is been Scoring..." %}</span>
             </div>
         </div>
     {% else %}

templates/recruitment/candidate_list.html

@@ -12,6 +12,12 @@
         --kaauh-border: #eaeff3;
         --kaauh-primary-text: #343a40;
         --kaauh-gray-light: #f8f9fa; /* Added for hover/background consistency */
+        --kaauh-success: #28a745;
+        --kaauh-danger: #dc3545;
+    }
+    
+    body {
+        font-family: 'Inter', sans-serif;
     }
 
     /* Primary Color Overrides */
@@ -60,6 +66,7 @@
     .btn-outline-secondary {
         color: var(--kaauh-teal-dark);
         border-color: var(--kaauh-teal);
+        transition: all 0.2s ease;
     }
     .btn-outline-secondary:hover {
         background-color: var(--kaauh-teal-dark);
@@ -76,6 +83,7 @@
     .candidate-card .card-text i {
         color: var(--kaauh-teal);
         width: 1.25rem;
+        margin-right: 0.25rem; /* Space for icon */
     }
 
     /* Table & Card Badge Styling (Unified) */
@@ -134,33 +142,27 @@
 
 
 /* ------------------------------------------- */
-/* 1. Base Spinner Styling */
+/* Spinner Styling for Resume Parsing */
 /* ------------------------------------------- */
 .kaats-spinner {
-    animation: kaats-spinner-rotate 1.5s linear infinite; /* Faster rotation */
-    width: 40px; /* Standard size */
-    height: 40px;
-    display: inline-block; /* Useful for table cells */
+    animation: kaats-spinner-rotate 1.5s linear infinite;
+    width: 20px; 
+    height: 20px;
+    display: inline-block; 
     vertical-align: middle;
 }
 
 .kaats-spinner .path {
-    stroke: var(--kaauh-teal, #00636e); /* Use Teal color, fallback to dark teal */
+    stroke: var(--kaauh-teal, #00636e);
     stroke-linecap: round;
-    /* Optional: Add a lighter background circle for contrast */
-    /* stroke-dashoffset will be reset by the dash animation */
 }
 
-/* Optional: Background circle for better contrast (similar to Bootstrap) */
 .kaats-spinner circle {
-    stroke: var(--kaauh-border, #e9ecef); /* Light gray background */
+    stroke: var(--kaauh-border, #e9ecef);
     fill: none;
-    stroke-width: 5; /* Keep stroke-width on both circles */
+    stroke-width: 5; 
 }
 
-/* ------------------------------------------- */
-/* 2. Keyframe Animations */
-/* ------------------------------------------- */
 @keyframes kaats-spinner-rotate {
     100% {
         transform: rotate(360deg);
@@ -228,7 +230,7 @@
                         </div>
 
                         <div class="col-md-4">
-                            <label for="job_filter" class="form-label small text-muted">{% trans "Filter by Stages" %}</label>
+                            <label for="stage_filter" class="form-label small text-muted">{% trans "Filter by Stages" %}</label>
                             <div class="d-flex gap-2">
                                
                             <select name="stage" id="stage_filter" class="form-select form-select-sm">
@@ -265,15 +267,14 @@
             {# View Switcher - list_id must match the container ID #}
             {% include "includes/_list_view_switcher.html" with list_id="candidate-list" %}
 
-            {# Table View (Default) #}
-            <div class="table-view">
+            {# Table View (Default for Desktop) #}
+            <div class="table-view active d-none d-lg-block">
                 <div class="table-responsive">
                     <table class="table table-hover align-middle mb-0">
                         <thead>
                             <tr>
                                 <th scope="col" >{% trans "Name" %}</th>
                                 <th scope="col">{% trans "Email" %}</th>
-                                {% comment %} <th scope="col" style="width: 8%;">{% trans "Phone" %}</th> {% endcomment %}
                                 <th scope="col">{% trans "Job" %}</th>
                                 <th scope="col" >{% trans "Major" %}</th>
                                 <th scope="col" >{% trans "Stage" %}</th>
@@ -287,7 +288,6 @@
                                 <tr>
                                     <td class="fw-medium"><a href="{% url 'candidate_detail' candidate.slug %}" class="text-decoration-none link-secondary">{{ candidate.name }}<a></td>
                                     <td>{{ candidate.email }}</td>
-                                    {% comment %} <td>{{ candidate.phone }}</td> {% endcomment %}
                                     <td> <span class="badge bg-primary"><a href="{% url 'job_detail' candidate.job.slug %}" class="text-decoration-none text-white">{{ candidate.job.title }}</a></span></td>
                                     <td>
                                     {% if candidate.is_resume_parsed %}
@@ -333,7 +333,7 @@
                                                     <i class="fas fa-edit"></i>
                                                 </a>
                                                 <button type="button" class="btn btn-outline-danger" title="{% trans 'Delete' %}"
-                                                        data-bs-toggle="modal" data-bs-target="#deleteModal" {# Updated to standard Bootstrap usage #}
+                                                        data-bs-toggle="modal" data-bs-target="#deleteModal"
                                                         data-delete-url="{% url 'candidate_delete' candidate.slug %}"
                                                         data-item-name="{{ candidate.name }}">
                                                     <i class="fas fa-trash-alt"></i>
@@ -348,29 +348,36 @@
                 </div>
             </div>
 
-            {# Card View #}
-            <div class="card-view row"> {# Added 'row' class for grid structure #}
-                {% for candidate in candidates %}
-                    <div class="col-md-6 col-lg-4 mb-4"> {# Column wrapper for grid #}
+            {# Card View (Default for Mobile) #}
+            <div class="card-view row g-4 d-lg-none">
+                {% for candidate in applications %}
+                    <div class="col-md-6 col-sm-12">
                         <div class="card candidate-card h-100 shadow-sm">
                             <div class="card-body d-flex flex-column">
-                                <div class="d-flex justify-content-between align-items-start mb-2">
-                                    <h5 class="card-title flex-grow-1 me-3"><a href="{% url 'candidate_detail' candidate.slug %}" class="text-decoration-none text-primary-theme ">{{ candidate.name }}</a></h5>
+                                <div class="d-flex justify-content-between align-items-start mb-3">
+                                    <h5 class="card-title flex-grow-1 me-3">
+                                        <a href="{% url 'candidate_detail' candidate.slug %}" class="text-decoration-none text-primary-theme ">{{ candidate.name }}</a>
+                                    </h5>
                                     <span class="badge bg-primary">{{ candidate.stage }}</span>
                                 </div>
 
-                                <p class="card-text text-muted small">
-                                    <i class="fas fa-envelope"></i> {{ candidate.email }}<br>
-                                    <i class="fas fa-phone-alt"></i> {{ candidate.phone|default:"N/A" }}<br>
-                                    <i class="fas fa-briefcase"></i> <span class="badge bg-primary"><a href="{% url 'job_detail' candidate.job.slug %}" class="text-decoration-none text-white">{{ candidate.job.title }}</a></span><br>
+                                <p class="card-text text-muted small flex-grow-1">
+                                    <span class="d-block mb-1"><i class="fas fa-envelope"></i> {{ candidate.email }}</span>
+                                    <span class="d-block mb-1"><i class="fas fa-phone-alt"></i> {{ candidate.phone|default:"N/A" }}</span>
+                                    <span class="d-block mb-1"><i class="fas fa-calendar-alt"></i> {{ candidate.created_at|date:"d-m-Y" }}</span>
+                                    <span class="d-block mt-2"><i class="fas fa-briefcase"></i> 
+                                        <span class="badge bg-primary"><a href="{% url 'job_detail' candidate.job.slug %}" class="text-decoration-none text-white">{{ candidate.job.title }}</a></span>
+                                    </span>
                                     {% if candidate.hiring_agency %}
-                                        <i class="fas fa-building"></i> <a href="{% url 'agency_detail' candidate.hiring_agency.slug %}" class="text-decoration-none">
-                                            <span class="badge bg-info">{{ candidate.hiring_agency.name }}</span>
-                                        </a>
+                                        <span class="d-block mt-2"><i class="fas fa-building"></i> 
+                                            <a href="{% url 'agency_detail' candidate.hiring_agency.slug %}" class="text-decoration-none">
+                                                <span class="badge bg-info">{{ candidate.hiring_agency.name }}</span>
+                                            </a>
+                                        </span>
                                     {% endif %}
                                 </p>
 
-                                <div class="mt-auto pt-2 border-top">
+                                <div class="mt-auto pt-3 border-top">
                                    <div class="d-flex gap-2">
                                         <a href="{% url 'candidate_detail' candidate.slug %}" class="btn btn-sm btn-main-action">
                                             <i class="fas fa-eye"></i> {% trans "View" %}
@@ -412,4 +419,4 @@
         </div>
     {% endif %}
 </div>
-{% endblock %}
+{% endblock %}

templates/recruitment/candidate_profile.html

@@ -117,7 +117,7 @@
 }
 
 /* Tabs styling */
-.nav-tabs {
+{% comment %} .nav-tabs {
     border-bottom: 1px solid var(--kaauh-border);
 }
 .nav-tabs .nav-link.active {
@@ -142,7 +142,35 @@
 }
 .nav-tabs .nav-link i {
     color: var(--kaauh-teal) !important;
-}
+} {% endcomment %}
+
+ /* Tabs Theming - Applies to the right column */
+    .nav-tabs {
+        border-bottom: 1px solid var(--kaauh-border);
+        background-color: #f8f9fa;
+        padding: 0;
+    }
+
+    .nav-tabs .nav-link {
+        border: none;
+        border-bottom: 3px solid transparent;
+        color: var(--kaauh-primary-text);
+        font-weight: 500;
+        padding: 0.75rem 1rem;
+        margin-right: 0.5rem;
+        transition: all 0.2s;
+    }
+    /* Active Link */
+    .nav-tabs .nav-link.active {
+        color: var(--kaauh-teal-dark) !important;
+        background-color: white !important;
+        border-bottom: 3px solid var(--kaauh-teal) !important;
+        font-weight: 600;
+        z-index: 2;
+        border-right-color: transparent !important;
+        margin-bottom: -1px;
+    }
+
 .nav-scroll {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;

templates/recruitment/partials/stage_update_modal.html

@@ -48,7 +48,7 @@
 
                             <!-- Form Actions -->
                             <div class="d-flex justify-content-between mt-4">
-                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                                     <i class="fas fa-times me-1"></i>Cancel
                                 </button>
 

templates/recruitment/source_form.html

@@ -11,7 +11,7 @@
             <div class="d-flex justify-content-between align-items-center mb-4">
                 <h1 class="h3 mb-0">{{ title }}</h1>
                 <a href="{% url 'source_list' %}" class="btn btn-outline-secondary">
-                    <i class="fas fa-arrow-left"></i> Back to Sources
+                    <i class="fas fa-arrow-left"></i> {% trans "Back to Sources" %}
                 </a>
             </div>
 
@@ -115,7 +115,7 @@
                             <div class="col-md-6">
                                 <div class="mb-3">
                                     <div class="form-check">
-                                        {{ form.is_active|add_class:"form-check-input" }}
+                                        {{ form.is_active|add_class:"form-check-input bg-primary-theme" }}
                                         <label for="{{ form.is_active.id_for_label }}" class="form-check-label">
                                             {{ form.is_active.label }}
                                         </label>
@@ -137,19 +137,19 @@
                         {% if source %}
                             <div class="card bg-light mb-4">
                                 <div class="card-header">
-                                    <h6 class="mb-0">API Credentials</h6>
+                                    <h6 class="mb-0">{% trans "API Credentials" %}</h6>
                                 </div>
                                 <div class="card-body">
                                     <div class="row">
                                         <div class="col-md-6">
                                             <div class="mb-3">
-                                                <label class="form-label">API Key</label>
+                                                <label class="form-label">{% trans "API Key" %}</label>
                                                 <div class="input-group">
                                                     <input type="text" class="form-control" value="{{ source.api_key }}" readonly>
                                                     <button type="button" class="btn btn-outline-secondary"
                                                             hx-post="{% url 'copy_to_clipboard' %}"
                                                             hx-vals='{"text": "{{ source.api_key }}"}'
-                                                            title="Copy to clipboard">
+                                                            title="{% trans 'Copy to clipboard' %}">
                                                         <i class="fas fa-copy"></i>
                                                     </button>
                                                 </div>
@@ -157,7 +157,7 @@
                                         </div>
                                         <div class="col-md-6">
                                             <div class="mb-3">
-                                                <label class="form-label">API Secret</label>
+                                                <label class="form-label">{% trans "API Secret" %}</label>
                                                 <div class="input-group">
                                                     <input type="password" class="form-control" value="{{ source.api_secret }}" readonly id="api-secret">
                                                     <button type="button" class="btn btn-outline-secondary" onclick="toggleSecretVisibility()">
@@ -166,7 +166,7 @@
                                                     <button type="button" class="btn btn-outline-secondary"
                                                             hx-post="{% url 'copy_to_clipboard' %}"
                                                             hx-vals='{"text": "{{ source.api_secret }}"}'
-                                                            title="Copy to clipboard">
+                                                            title="{% trans 'Copy to clipboard' %}">
                                                         <i class="fas fa-copy"></i>
                                                     </button>
                                                 </div>
@@ -175,7 +175,7 @@
                                     </div>
                                     <div class="text-end">
                                         <a href="{% url 'generate_api_keys' source.pk %}" class="btn btn-warning">
-                                            <i class="fas fa-key"></i> Generate New Keys
+                                            <i class="fas fa-key"></i> {% trans "Generate New Keys" %}
                                         </a>
                                     </div>
                                 </div>
@@ -184,7 +184,7 @@
 
                         <div class="d-flex justify-content-between">
                             <a href="{% url 'source_list' %}" class="btn btn-outline-secondary">
-                                <i class="fas fa-times"></i> Cancel
+                                <i class="fas fa-times me-1"></i>{% trans "Cancel" %}
                             </a>
                             <button type="submit" class="btn btn-main-action">
                                 <i class="fas fa-save me-1"></i> {% trans "Save" %}

templates/recruitment/staff_assignment_view.html

@@ -156,7 +156,7 @@
                     <h5 class="mb-0"><i class="fas fa-briefcase me-2"></i>Job Information</h5>
                 </div>
                 <div class="card-body">
-                    <div class="row">
+                    <div class="row mx-2 my-2">
                         <div class="col-md-6">
                             <p><strong>Department:</strong> {{ job.get_department_display|default:job.department }}</p>
                             <p><strong>Job Type:</strong> {{ job.get_job_type_display }}</p>
@@ -190,10 +190,11 @@
                         {% endfor %}
                     {% endif %}
 
-                    <form method="post" id="staffAssignmentForm">
+                    <form method="post" id="staffAssignmentForm" class="mx-2 my-2" action=".">
                         {% csrf_token %}
+                        {{form.as_p}}
 
-                        <div class="row mb-3">
+                        {% comment %} <div class="row mb-3 ">
                             <div class="col-md-12">
                                 <label for="{{ form.staff.id_for_label }}" class="form-label fw-bold">
                                     {{ form.staff.label }} <span class="text-danger">*</span>
@@ -242,7 +243,7 @@
                                 {% endif %}
                                 <div class="form-text">Optional notes about this staff assignment.</div>
                             </div>
-                        </div>
+                        </div> {% endcomment %}
 
                         <div class="row">
                             <div class="col-12">