Merge branch 'main' of http://10.10.1.136:3000/marwan/kaauh_ats into frontend

This reverts commit 47807ace90d52a389399f9c926da61c49505615d.

recruitment/forms.py

@@ -1634,7 +1634,7 @@ class CandidateEmailForm(forms.Form):
             message_parts = [
                 f"Than you, for your interest in the {self.job.title} role.",
                 f"We're pleased to inform you that you have cleared your exam!",
-                f"The next step is the mandatory online assessment exam.",
+                f"The next step is the mandatory interview.",
                 f"Please complete the assessment by using the following link:",
                 f"https://kaauh/hire/exam",
                 f"We look forward to reviewing your results.",
@@ -1659,6 +1659,8 @@ class CandidateEmailForm(forms.Form):
                 f"If you have any questions before your start date, please contact [Onboarding Contact].",
                 f"Best regards, The KAAUH Hiring team"
             ]
+        elif candidate:
+            message_parts=""
 
 
 

recruitment/migrations/0004_alter_interviewschedule_template_location.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.2.7 on 2025-11-23 09:22
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('recruitment', '0003_jobposting_cv_zip_file_jobposting_zip_created'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='interviewschedule',
+            name='template_location',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='schedule_templates', to='recruitment.interviewlocation', verbose_name='Location Template (Zoom/Onsite)'),
+        ),
+    ]

recruitment/migrations/0005_alter_interviewschedule_template_location.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.2.7 on 2025-11-23 09:41
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('recruitment', '0004_alter_interviewschedule_template_location'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='interviewschedule',
+            name='template_location',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='schedule_templates', to='recruitment.interviewlocation', verbose_name='Location Template (Zoom/Onsite)'),
+        ),
+    ]

recruitment/models.py

@@ -997,6 +997,18 @@ class Application(Base):
         else:
             return False
         
+    @property
+    def is_active(self):
+        deadline=self.job.application_deadline
+        now=timezone.now().date()
+        if deadline>now:
+            return True
+        else:
+            return False
+            
+
+
+
 
 
 class TrainingMaterial(Base):
@@ -1162,6 +1174,9 @@ class OnsiteLocationDetails(InterviewLocation):
         verbose_name_plural = _("Onsite Location Details")
 
 
+        
+
+
 # --- 2. Scheduling Models ---
 
 class InterviewSchedule(Base):

recruitment/tasks.py

@@ -761,6 +761,7 @@ from django.utils.html import strip_tags
 def _task_send_individual_email(subject, body_message, recipient, attachments,sender,job):
     """Internal helper to create and send a single email."""
     
+
     from_email = getattr(settings, 'DEFAULT_FROM_EMAIL', 'noreply@kaauh.edu.sa')
     is_html = '<' in body_message and '>' in body_message
 
@@ -780,7 +781,8 @@ def _task_send_individual_email(subject, body_message, recipient, attachments,se
     try:
         result=email_obj.send(fail_silently=False)
 
-        if result==1:
+        if result==1 and sender and job: # job is none when email sent after message creation
+            
             try:
                 user=get_object_or_404(User,email=recipient)
                 new_message = Message.objects.create(
@@ -798,7 +800,7 @@ def _task_send_individual_email(subject, body_message, recipient, attachments,se
 
 
         else:
-            logger.error("fialed to send email")
+            logger.error("failed to send email")
 
 
     except Exception as e:

recruitment/views.py

@@ -4674,55 +4674,40 @@ def message_create(request):
             message.sender = request.user
             message.save()
             # Send email if message_type is 'email' and recipient has email
-            if message.message_type == 'email' and message.recipient and message.recipient.email:
+            
+            if message.recipient and message.recipient.email:
+                
                 try:
-                    from .email_service import send_bulk_email
                 
-                    email_result = send_bulk_email(
+
+                    email_result = async_task('recruitment.tasks._task_send_individual_email',
                         subject=message.subject,
-                        message=message.content,
-                        recipient_list=[message.recipient.email],
-                        request=request,
+                        body_message=message.content,
+                        recipient=message.recipient.email,
                         attachments=None,
-                        async_task_=True,
-                        from_interview=False
+                        sender=False,
+                        job=False
                     )
-
-                    if email_result["success"]:
-                        message.is_email_sent = True
-                        message.email_address = message.recipient.email
-                        message.save(update_fields=['is_email_sent', 'email_address'])
+                    if email_result:
                         messages.success(request, "Message sent successfully via email!")
                     else:
-                        messages.warning(request, f"Message saved but email failed: {email_result.get('message', 'Unknown error')}")
+                        
+                        messages.warning(request, f"email failed: {email_result.get('message', 'Unknown error')}")
 
                 except Exception as e:
+                
                     messages.warning(request, f"Message saved but email sending failed: {str(e)}")
             else:
+                
                 messages.success(request, "Message sent successfully!")
 
-            ["recipient", "job", "subject", "content", "message_type"]
-            recipient_email = form.cleaned_data['recipient'].email # Assuming recipient is a User or Model with an 'email' field
-            subject = form.cleaned_data['subject']
-            custom_message = form.cleaned_data['content']
-            job_id = form.cleaned_data['job'].id if 'job' in form.cleaned_data and form.cleaned_data['job'] else None
-            sender_user_id = request.user.id
             
-            task_id = async_task(
-                        'recruitment.tasks.send_bulk_email_task',
-                        subject,
-                        custom_message, # Pass the custom message
-                        [recipient_email], # Pass the specific recipient as a list of one
-
-                        sender_user_id=sender_user_id,
-                        job_id=job_id,
-                        hook='recruitment.tasks.email_success_hook')
-
-            logger.info(f"{task_id} queued.")
             return redirect("message_list")
         else:
+            
             messages.error(request, "Please correct the errors below.")
     else:
+        
         form = MessageForm(request.user)
 
     context = {
@@ -4759,27 +4744,21 @@ def message_reply(request, message_id):
             message.save()
 
             # Send email if message_type is 'email' and recipient has email
-            if message.message_type == 'email' and message.recipient and message.recipient.email:
+            if message.recipient and message.recipient.email:
                 try:
-                    from .email_service import send_bulk_email
-
-                    email_result = send_bulk_email(
+                    email_result = async_task('recruitment.tasks._task_send_individual_email',
                         subject=message.subject,
-                        message=message.content,
-                        recipient_list=[message.recipient.email],
-                        request=request,
+                        body_message=message.content,
+                        recipient=message.recipient.email,
                         attachments=None,
-                        async_task_=True,
-                        from_interview=False
+                        sender=False,
+                        job=False
                     )
-
-                    if email_result["success"]:
-                        message.is_email_sent = True
-                        message.email_address = message.recipient.email
-                        message.save(update_fields=['is_email_sent', 'email_address'])
-                        messages.success(request, "Reply sent successfully via email!")
+                    if email_result:
+                        messages.success(request, "Message sent successfully via email!")
                     else:
-                        messages.warning(request, f"Reply saved but email failed: {email_result.get('message', 'Unknown error')}")
+                        
+                        messages.warning(request, f"email failed: {email_result.get('message', 'Unknown error')}")
 
                 except Exception as e:
                     messages.warning(request, f"Reply saved but email sending failed: {str(e)}")
@@ -5763,15 +5742,15 @@ def send_interview_email(request, slug):
     return redirect("meeting_details", slug=meeting.slug)
 
 
-# def schedule_interview_location_form(request,slug):
-#     schedule=get_object_or_404(InterviewSchedule,slug=slug)
-#     if request.method=='POST':
-#         form=InterviewScheduleLocationForm(request.POST,instance=schedule)
-#         form.save()
-#         return redirect('list_meetings')
-#     else:
-#         form=InterviewScheduleLocationForm(instance=schedule)
-#         return render(request,'interviews/schedule_interview_location_form.html',{'form':form,'schedule':schedule})
+def schedule_interview_location_form(request,slug):
+    schedule=get_object_or_404(InterviewSchedule,slug=slug)
+    if request.method=='POST':
+        form=InterviewScheduleLocationForm(request.POST,instance=schedule)
+        form.save()
+        return redirect('list_meetings')
+    else:
+        form=InterviewScheduleLocationForm(instance=schedule)
+        return render(request,'interviews/schedule_interview_location_form.html',{'form':form,'schedule':schedule})
 
 
 class MeetingListView(ListView):
@@ -5783,6 +5762,7 @@ class MeetingListView(ListView):
     context_object_name = "meetings"
     paginate_by = 100
     
+
     def get_queryset(self):
         # Start with a base queryset, ensuring an InterviewLocation link exists.
         queryset = super().get_queryset().filter(interview_location__isnull=False).select_related(
@@ -5794,6 +5774,7 @@ class MeetingListView(ListView):
             'interview_location__zoommeetingdetails',
             'interview_location__onsitelocationdetails',
         )
+
         # Note: Printing the queryset here can consume memory for large sets.
         
         # Get filters from GET request
@@ -5807,11 +5788,10 @@ class MeetingListView(ListView):
         if type_filter:
             # Use .title() to handle case variations from URL (e.g., 'remote' -> 'Remote')
             normalized_type = type_filter.title()
-            print(normalized_type)
+           
             # Assuming InterviewLocation.LocationType is accessible/defined
             if normalized_type in ['Remote', 'Onsite']:
                 queryset = queryset.filter(interview_location__location_type=normalized_type)
-                print(queryset)
               
         # 3. Search by Topic (stored on InterviewLocation)
         if search_query:
@@ -5886,6 +5866,28 @@ class MeetingListView(ListView):
 
         return context
 
+
+# class MeetingListView(ListView):
+#     """
+#     A unified view to list both Remote and Onsite Scheduled Interviews.
+#     """
+#     model = InterviewLocation
+#     template_name = "meetings/list_meetings.html"
+#     context_object_name = "meetings"
+   
+    
+
+#     def get_queryset(self):
+#         # Start with a base queryset, ensuring an InterviewLocation link exists.
+#         queryset = super().get_queryset().prefetch_related(
+#             'zoommeetingdetails',
+#             'onsitelocationdetails',
+#         )
+#         print(queryset)
+
+#         return queryset
+    
+
 def reschedule_onsite_meeting(request, slug, candidate_id, meeting_id):
     """Handles the rescheduling of an Onsite Interview (updates OnsiteLocationDetails)."""
     job = get_object_or_404(JobPosting, slug=slug)

templates/base.html

@@ -295,6 +295,18 @@
                             </span>
                         </a>
                     </li>
+
+                    <li class="nav-item me-lg-4">
+                        <a class="nav-link {% if request.resolver_match.url_name == 'kaauh_career' %}active{% endif %}" href="{% url 'kaauh_career' %}">
+                            <span class="d-flex align-items-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+                                </svg>
+
+                                {% trans "Career Page" %}
+                            </span>
+                        </a>
+                    </li>
                     {% comment %} <li class="nav-item dropdown ms-lg-2">
                         <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                         data-bs-offset="0, 8" data-bs-auto-close="outside">

templates/jobs/job_detail.html

@@ -326,15 +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>
-                               {% 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" %}
+                                    <i class="fa-solid fa-download me-1"></i> {% trans "Generate All CVs" %}
                                </a>
-                               {% else %}
-                               <a href="{% url 'download_ready_cvs' job.slug %}" class="btn btn-main-action">
+                               
+                               <a href="{% url 'download_ready_cvs' job.slug %}" class="btn btn-outline-primary">
                                     <i class="fa-solid fa-eye me-1"></i> {% trans "View All CVs" %}
                                </a>
-                               {% endif %}
+                               
                         </div>
                     </div>
 

templates/recruitment/agency_assignment_detail.html

@@ -9,285 +9,265 @@
     :root {
         --kaauh-teal: #00636e;
         --kaauh-teal-dark: #004a53;
-        --kaauh-border: #e9ecef;
-        --kaauh-primary-text: #212529;
-        --kaauh-success: #198754;
-        --kaauh-info: #0dcaf0;
+        --kaauh-border: #eaeff3;
+        --kaauh-primary-text: #343a40;
+        --kaauh-success: #28a745;
+        --kaauh-info: #17a2b8;
         --kaauh-danger: #dc3545;
         --kaauh-warning: #ffc107;
-        --kaauh-bg-light: #f8f9fa;
-    }
-
-    .text-primary-teal {
-        color: var(--kaauh-teal) !important;
     }
 
     .kaauh-card {
-        border: none;
+        border: 1px solid var(--kaauh-border);
         border-radius: 0.75rem;
-        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
         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: 500;
-        padding: 0.5rem 1.2rem;
+        font-weight: 600;
         transition: all 0.2s ease;
     }
-
     .btn-main-action:hover {
         background-color: var(--kaauh-teal-dark);
         border-color: var(--kaauh-teal-dark);
-        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;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
     }
 
     .status-badge {
         font-size: 0.75rem;
-        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;
+        padding: 0.3em 0.7em;
+        border-radius: 0.35rem;
+        font-weight: 700;
     }
+    .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-circle {
-        transition: stroke-dashoffset 0.5s ease-in-out;
+    .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;
     }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid py-5 bg-light">
+<div class="container-fluid py-4">
     <!-- Header -->
-    <div class="row mb-4">
-        <div class="col-12">
-            <div class="d-flex justify-content-between align-items-start">
+    <div class="d-flex justify-content-between align-items-center mb-4">
         <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 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>
-                    <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>
+            <p class="text-muted mb-0">
+                {% trans "Assignment Details and Management" %}
+            </p>
         </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" %}
+        <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 shadow-sm">
-                        <i class="fas fa-edit me-1"></i> {% trans "Edit" %}
+            <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>
     </div>
-        </div>
-    </div>
 
-    <div class="row g-4">
-        <!-- Left Column: Details & Candidates -->
-        <div class="col-lg-8 col-md-12">
+    <div class="row">
+        <!-- Assignment Overview -->
+        <div class="col-lg-8">
             <!-- Assignment Details Card -->
-            <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>
+            <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>
-                <div class="card-body p-4">
-                    <div class="row g-4">
+
+                <div class="row">
                     <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="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>
-                        <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 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="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 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>
+                        </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>
                             {% if assignment.is_expired %}
-                                <small class="text-danger fw-bold">
+                                <small class="text-danger">
                                     <i class="fas fa-exclamation-triangle me-1"></i>{% trans "Expired" %}
                                 </small>
                             {% endif %}
                         </div>
                     </div>
-                        <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>
 
                 {% 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 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>
                     </div>
 
-            <!-- 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>
+                    <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>
+                        </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_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 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 class="card-body p-0">
+            </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>
+
                 {% if candidates %}
                     <div class="table-responsive">
-                        <table class="table table-hover align-middle mb-0">
-                            <thead class="bg-light">
+                        <table class="table table-hover">
+                            <thead>
                                 <tr>
-                                    <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>
+                                    <th>{% trans "Name" %}</th>
+                                    <th>{% trans "Contact" %}</th>
+                                    <th>{% trans "Stage" %}</th>
+                                    <th>{% trans "Submitted" %}</th>
+                                    <th>{% trans "Actions" %}</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 {% for candidate in candidates %}
                                 <tr>
-                                    <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>
+                                    <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>
                                         </div>
                                     </td>
-                                    <td class="px-4">
+                                    <td>
+                                        <span class="badge bg-info">{{ candidate.get_stage_display }}</span>
+                                    </td>
+                                    <td>
                                         <div class="small text-muted">
-                                            <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>
+                                            {{ candidate.created_at|date:"Y-m-d H:i" }}
                                         </div>
                                     </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">
+                                    <td>
                                         <a href="{% url 'candidate_detail' candidate.slug %}"
-                                            class="btn btn-sm btn-white border shadow-sm text-primary"
-                                            title="{% trans 'View Details' %}">
+                                           class="btn btn-sm btn-outline-primary" title="{% trans 'View Details' %}">
                                             <i class="fas fa-eye"></i>
                                         </a>
                                     </td>
@@ -297,102 +277,129 @@
                         </table>
                     </div>
                 {% 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." %}
+                    <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." %}
                         </p>
                     </div>
                 {% endif %}
             </div>
         </div>
-        </div>
 
-        <!-- Right Column: Sidebar -->
-        <div class="col-lg-4 col-md-12">
+        <!-- Sidebar -->
+        <div class="col-lg-4">
             <!-- Progress Card -->
-            <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="kaauh-card p-4 mb-4">
+                <h5 class="mb-4 text-center" style="color: var(--kaauh-teal-dark);">
+                    {% trans "Submission Progress" %}
+                </h5>
 
-                    <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 }};" />
+                <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 }};"/>
                         </svg>
-                        <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 class="progress-ring-text">
+                            {% widthratio total_candidates assignment.max_candidates 100 as progress %}
+                            {{ progress|floatformat:0 }}%
+                        </div>
                     </div>
                 </div>
 
-                    <p class="text-muted small mb-0">
-                        {% trans "Candidates submitted" %}
-                    </p>
+               <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>
                 </div>
             </div>
 
+
             <!-- Actions Card -->
-            <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 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" %}
+            <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-2"></i> {% trans "Extend Deadline" %}
+                        <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>
             </div>
         </div>
     </div>
 
-            <!-- Recent Messages -->
+    <!-- Messages Section -->
     {% 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>
+        <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>
                         {% 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>
+
+            {% if messages_.count > 6 %}
+                <div class="text-center mt-3">
+                    <a href="#" class="btn btn-outline-primary btn-sm">
+                        {% trans "View All Messages" %}
+                    </a>
                 </div>
             {% endif %}
         </div>
-    </div>
+    {% endif %}
 </div>
 
 <!-- Extend Deadline Modal -->
@@ -413,8 +420,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>
@@ -436,8 +443,8 @@
 
 {% block customJS %}
 <script>
-    function copyToClipboard(text) {
-        navigator.clipboard.writeText(text).then(function () {
+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';
@@ -459,9 +466,9 @@
             toast.remove();
         }, 3000);
     });
-    }
+}
 
-    function copyToClipboard(elementId) {
+function copyToClipboard(elementId) {
     const element = document.getElementById(elementId);
     element.select();
     document.execCommand('copy');
@@ -478,23 +485,23 @@
         button.classList.remove('btn-success');
         button.classList.add('btn-outline-secondary');
     }, 2000);
-    }
+}
 
-    function confirmDeactivate() {
+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() {
+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 () {
+document.addEventListener('DOMContentLoaded', function() {
     // Set minimum datetime for new deadline
     const deadlineInput = document.getElementById('new_deadline');
     if (deadlineInput) {
@@ -508,6 +515,6 @@
         deadlineInput.min = localDateTime;
         deadlineInput.value = localDateTime;
     }
-    });
+});
 </script>
 {% endblock %}

templates/recruitment/agency_portal_persons_list.html

@@ -165,7 +165,7 @@
                                 <tr class="person-row">
                                     <td>
                                         <div class="d-flex align-items-center">
-                                            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-2"
+                                            <div class="rounded-circle bg-primary-theme text-white d-flex align-items-center justify-content-center me-2"
                                                  style="width: 32px; height: 32px; font-size: 14px; font-weight: 600;">
                                                 {{ person.first_name|first|upper }}{{ person.last_name|first|upper }}
                                             </div>
@@ -178,7 +178,7 @@
                                         </div>
                                     </td>
                                     <td>
-                                        <a href="mailto:{{ person.email }}" class="text-decoration-none">
+                                        <a href="mailto:{{ person.email }}" class="text-decoration-none text-dark">
                                             {{ person.email }}
                                         </a>
                                     </td>

templates/recruitment/candidate_application_detail.html

@@ -5,8 +5,8 @@
 
 {% block customCSS %}
 <style>
-    /* Kaauh Theme Variables - Assuming these are defined in portal_base */
-    :root {
+/* 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;
@@ -16,21 +16,19 @@
     --kaauh-info: #17a2b8;
     --kaauh-danger: #dc3545;
     --kaauh-warning: #ffc107;
-        --kaauh-secondary: #6c757d;
-        /* Added secondary color for general use */
-    }
+    --kaauh-secondary: #6c757d; /* Added secondary color for general use */
+}
 
-    /* Theme Utilities */
-    .bg-primary-theme {
+/* Theme Utilities */
+.bg-primary-theme {
     background-color: var(--kaauh-teal) !important;
-    }
-
-    .text-primary-theme {
+}
+.text-primary-theme {
     color: var(--kaauh-teal) !important;
-    }
+}
 
-    /* 1. Application Progress Timeline (Improved Spacing) */
-    .application-progress {
+/* 1. Application Progress Timeline (Improved Spacing) */
+.application-progress {
     position: relative;
     /* Use flexbox for layout */
     display: flex; 
@@ -38,25 +36,12 @@
     gap: 1.5rem; 
     /* Center the timeline content */
     justify-content: center; 
-        margin: 2rem 0 3rem;
-        /* Extra spacing below timeline */
+    margin: 2rem 0 3rem; /* Extra spacing below timeline */
     padding: 0 1rem;
-        overflow-x: auto;
-        /* Allow horizontal scroll for small screens */
-        -webkit-overflow-scrolling: touch;
-        /* Smooth scrolling on iOS */
-        padding-bottom: 1rem;
-        /* Space for scrollbar if needed */
-    }
+    overflow-x: auto; /* Allow horizontal scroll for small screens */
+}
 
-    @media (max-width: 768px) {
-        .application-progress {
-            justify-content: flex-start;
-            /* Align start to allow scrolling */
-        }
-    }
-
-    .progress-step {
+.progress-step {
     /* Use fixed width or rely on content width for cleaner flow */
     position: relative;
     text-align: center;
@@ -64,10 +49,10 @@
     flex-shrink: 0; 
     /* Added min-width for label spacing */
     min-width: 100px; 
-    }
+}
 
-    /* Timeline Connector Line */
-    .progress-step::before {
+/* Timeline Connector Line */
+.progress-step::before {
     content: '';
     position: absolute;
     top: 20px;
@@ -77,23 +62,23 @@
     height: 2px;
     background: var(--kaauh-border);
     z-index: -1;
-    }
+}
 
-    /* Hide line for the first step */
-    .progress-step:first-child::before {
+/* Hide line for the first step */
+.progress-step:first-child::before {
     display: none;
-    }
+}
 
-    .progress-step.completed::before {
+.progress-step.completed::before {
     background: var(--kaauh-success);
-    }
+}
 
-    .progress-step.active::before {
+.progress-step.active::before {
     /* Line leading up to the active step should be completed/success color */
     background: var(--kaauh-success); 
-    }
+}
 
-    .progress-icon {
+.progress-icon {
     width: 40px;
     height: 40px;
     border-radius: 50%;
@@ -105,96 +90,90 @@
     font-weight: bold;
     color: #6c757d;
     position: relative;
-        z-index: 2;
-        /* Ensure icon covers the line */
-    }
+    z-index: 2; /* Ensure icon covers the line */
+}
 
-    .progress-step.completed .progress-icon {
+.progress-step.completed .progress-icon {
     background: var(--kaauh-success);
     color: white;
-    }
+}
 
-    .progress-step.active .progress-icon {
+.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 {
+.progress-label {
     font-size: 0.875rem;
     color: #6c757d;
     margin-top: 0.5rem;
     line-height: 1.2;
-    }
+}
 
-    .progress-step.completed .progress-label,
-    .progress-step.active .progress-label {
+.progress-step.completed .progress-label,
+.progress-step.active .progress-label {
     color: var(--kaauh-primary-text);
     font-weight: 600;
-    }
+}
 
-    /* Status Badges - Using Kaauh Theme */
-    .status-badge {
+/* Status Badges - Using Kaauh Theme */
+.status-badge {
     font-size: 0.875rem;
     padding: 0.5rem 1rem;
     border-radius: 20px;
     font-weight: 600;
-    }
+}
 
-    /* Card Header Consistency */
-    .card-header {
-        padding: 1rem 1.5rem;
-        /* Increased padding */
+/* Card Header Consistency */
+.card-header{
+    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 {
+/* Table Actions Theme */
+.table .btn-primary {
     background-color: var(--kaauh-teal);
     border-color: var(--kaauh-teal);
-    }
-
-    .table .btn-primary:hover {
+}
+.table .btn-primary:hover {
     background-color: var(--kaauh-teal-dark);
     border-color: var(--kaauh-teal-dark);
-    }
+}
 
-    .btn-main-action {
+.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 {
+}
+.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 {
+/* Style for action cards to make text smaller */
+.action-card .card-body h6 {
     font-size: 1rem;
-    }
-
-    .action-card .card-body p {
+}
+.action-card .card-body p {
     font-size: 0.75rem;
     margin-bottom: 0.75rem;
-    }
-
-    .action-card .card-body {
+}
+.action-card .card-body {
     padding: 1.5rem 1rem;
-    }
+}
 
-    /* Custom Alert for Document Review */
-    .alert-purple {
+/* Custom Alert for Document Review */
+.alert-purple {
     background-color: #e5e0ff;
     border-color: #c9c0ff;
     color: #5d49a3;
-    }
+}
 </style>
 {% endblock %}
 
@@ -206,8 +185,7 @@
                 <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"
-                    class="text-secondary text-decoration-none">{% trans "My Applications" %}</a>
+                <a href="{% url 'candidate_portal_dashboard' %}#applications" class="text-secondary text-decoration-none">{% trans "My Applications" %}</a>
             </li>
             <li class="breadcrumb-item active" aria-current="page"  style="
                             color: #F43B5E; /* Rosy Accent Color */
@@ -223,7 +201,7 @@
         <div class="col-12">
             <div class="kaauh-card">
                 <div class="card-header bg-primary-theme text-white"> 
-                    <div class="row align-items-center gy-2">
+                    <div class="row align-items-center">
                         <div class="col-md-8">
                             <h4 class="mb-1">
                                 <i class="fas fa-briefcase me-2"></i>
@@ -233,9 +211,8 @@
                                 <small>{% trans "Application ID:" %} {{ application.slug }}</small>
                             </p>
                         </div>
-                        <div class="col-md-4 text-md-end text-start">
-                            <div class="d-inline-block p-1 rounded-pill"
-                                style="background-color: rgba(255, 255, 255, 0.2);">
+                        <div class="col-md-4 text-end">
+                            <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>
@@ -245,8 +222,7 @@
                 </div>
                 <div class="card-body pt-5"> 
                     <div class="application-progress">
-                        <div class="progress-step {% if application.stage != 'Applied' and application.stage != 'Rejected' %}completed{% else %}active{% endif %}"
-                            style="flex: 0 0 auto;">
+                        <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>
@@ -254,8 +230,7 @@
                         </div>
 
                         {% if application.stage in 'Exam,Interview,Document Review,Offer,Hired,Rejected' %}
-                        <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-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>
@@ -264,8 +239,7 @@
                         {% endif %}
 
                         {% if application.stage in 'Interview,Document Review,Offer,Hired,Rejected' %}
-                        <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-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>
@@ -274,8 +248,7 @@
                         {% endif %}
 
                         {% if application.stage in 'Document Review,Offer,Hired,Rejected' %}
-                        <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-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>
@@ -284,8 +257,7 @@
                         {% endif %}
 
                         {% if application.stage in 'Offer,Hired,Rejected' %}
-                        <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-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>
@@ -294,42 +266,40 @@
                         {% endif %}
 
                         {% if application.stage in 'Hired,Rejected' %}
-                        <div class="progress-step {% if application.stage == 'Hired' %}completed{% elif application.stage == 'Rejected' %}active{% endif %}"
-                            style="flex: 0 0 auto;">
+                        <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 {% if application.stage == 'Hired' %}fa-trophy{% else %}fa-times-circle{% endif %}"></i>
+                                <i class="fas {% if application.stage == 'Hired' %}fa-trophy{% else %}fa-times-circle{% endif %}"></i>
                             </div>
                             <div class="progress-label">{% trans "Final Status" %}</div>
                         </div>
                         {% endif %}
                     </div>
 
-                    <div class="row mt-4 g-3">
-                        <div class="col-6 col-md-3">
+                    <div class="row mt-4 g-4"> 
+                        <div class="col-md-3">
                             <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 small">{% trans "Applied Date" %}</h6>
                                 <p class="mb-0 fw-bold">{{ application.created_at|date:"M d, Y" }}</p>
                             </div>
                         </div>
-                        <div class="col-6 col-md-3">
+                        <div class="col-md-3">
                             <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>
+                                <i class="fas fa-building text-primary-theme fa-2x mb-2"></i>
                                 <h6 class="text-muted small">{% trans "Department" %}</h6>
                                 <p class="mb-0 fw-bold">{{ application.job.department|default:"-" }}</p>
                             </div>
                         </div>
-                        <div class="col-6 col-md-3">
+                        <div class="col-md-3">
                             <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>
+                                <i class="fas fa-briefcase text-primary-theme fa-2x mb-2"></i>
                                 <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-6 col-md-3">
+                        <div class="col-md-3">
                             <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>
+                                <i class="fas fa-map-marker-alt text-primary-theme fa-2x mb-2"></i>
                                 <h6 class="text-muted small">{% trans "Location" %}</h6>
                                 <p class="mb-0 fw-bold">{{ application.get_workplace_type_display }}</p>
                             </div>
@@ -340,9 +310,10 @@
         </div>
     </div>
      
-    <div class="row mb-5 g-3">
-        <div class="col-12 col-md-6">
-            <div class="kaauh-card h-100 shadow-sm action-card">
+    <div class="row mb-5"> 
+        <div class="col-md-6 col-6">
+            <a href="{% url 'candidate_portal_dashboard' %}" class="text-decoration-none text-dark">
+            <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>
@@ -352,26 +323,33 @@
                     </a>
                 </div>
             </div>
+           </a>
         </div>
 
         {% if application.resume %}
-        <div class="col-12 col-md-6">
-            <div class="kaauh-card h-100 shadow-sm action-card">
+        <div class="col-md-6 col-6"> 
+            <a href="{{ application.resume.url }}" 
+                       target="_blank" class="text-decoration-none text-dark">
+            <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>
+                    <i class="fas fa-file-download fa-2x text-primary-theme 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">
+                    <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>
+          </a>
         </div>
         {% endif %}
         
         
        
+        
     </div>
     {% if interviews %}
     <div class="row mb-5"> 
@@ -422,7 +400,8 @@
                                         </td>
                                         <td>
                                             {% if interview.zoom_meeting and interview.zoom_meeting.join_url %}
-                                        <a href="{{ interview.zoom_meeting.join_url }}" target="_blank"
+                                                <a href="{{ interview.zoom_meeting.join_url }}"
+                                                   target="_blank"
                                                    class="btn btn-sm btn-primary">
                                                     <i class="fas fa-video me-1"></i>
                                                     {% trans "Join" %}
@@ -433,8 +412,7 @@
                                         </td>
                                         <td>
                                             {% if interview.zoom_meeting and interview.zoom_meeting.join_url %}
-                                        <button class="btn btn-sm btn-outline-primary"
-                                            onclick="addToCalendar({{ interview.interview_date|date:'Y' }}, {{ interview.interview_date|date:'m' }}, {{ interview.interview_date|date:'d' }}, '{{ interview.interview_time|time:'H:i' }}', '{{ application.job.title }}')">
+                                                <button class="btn btn-sm btn-outline-primary" onclick="addToCalendar({{ interview.interview_date|date:'Y' }}, {{ interview.interview_date|date:'m' }}, {{ interview.interview_date|date:'d' }}, '{{ interview.interview_time|time:'H:i' }}', '{{ application.job.title }}')">
                                                     <i class="fas fa-calendar-plus me-1"></i>
                                                     {% trans "Add to Calendar" %}
                                                 </button>
@@ -470,8 +448,7 @@
                                 </h5>
                             </div>
                             <div class="col-auto">
-                            <button class="btn btn-sm btn-light" data-bs-toggle="modal"
-                                data-bs-target="#uploadDocumentModal">
+                                <button class="btn btn-outline-secondary text-white" data-bs-toggle="modal" data-bs-target="#uploadDocumentModal">
                                     <i class="fas fa-plus me-1"></i>
                                     {% trans "Upload Document" %}
                                 </button>
@@ -496,7 +473,8 @@
                                         <tr>
                                             <td>
                                                 {% if document.file %}
-                                        <a href="{{ document.file.url }}" target="_blank"
+                                                    <a href="{{ document.file.url }}"
+                                                    target="_blank"
                                                     class="text-decoration-none text-primary-theme"> 
                                                         <i class="fas fa-file-pdf text-danger me-2"></i>
                                                         {{ document.get_document_type_display }}
@@ -522,13 +500,13 @@
                                             </td>
                                             <td>
                                                 {% if document.file %}
-                                        <a href="{{ document.file.url }}" class="btn btn-sm btn-outline-primary me-1"
+                                                    <a href="{{ document.file.url }}"
+                                                    class="btn btn-sm btn-outline-primary me-1"
                                                     target="_blank">
                                                         <i class="fas fa-download"></i>
                                                         {% trans "Download" %}
                                                     </a>
-                                        <button class="btn btn-sm btn-outline-danger"
-                                            onclick="deleteDocument({{ document.id }})">
+                                                    <button class="btn btn-sm btn-outline-danger" onclick="deleteDocument({{ document.id }})">
                                                         <i class="fas fa-trash"></i>
                                                     </button>
                                                 {% endif %}
@@ -542,8 +520,7 @@
                             <div class="text-center py-4">
                                 <i class="fas fa-file-upload fa-3x text-muted mb-3"></i>
                                 <p class="text-muted">{% trans "No documents uploaded." %}</p>
-                        <button class="btn btn-main-action" data-bs-toggle="modal"
-                            data-bs-target="#uploadDocumentModal">
+                                <button class="btn btn-main-action" data-bs-toggle="modal" data-bs-target="#uploadDocumentModal">
                                     <i class="fas fa-plus me-2"></i>
                                     {% trans "Upload Your First Document" %}
                                 </button>
@@ -566,51 +543,44 @@
                 </div>
                 <div class="card-body p-4"> 
                     {% if application.stage == 'Applied' %}
-                    <div class="alert alert-info">
+                        <div class="alert bg-primary-theme text-white">
                             <i class="fas fa-clock me-2"></i>
-                        {% trans "Your application is being reviewed by our recruitment team. You will receive an update
-                        within 3-5 business days." %}
+                            {% trans "Your application is being reviewed by our recruitment team. You will receive an update within 3-5 business days." %}
                         </div>
                     {% elif application.stage == 'Screening' %}
-                    <div class="alert alert-warning">
+                        <div class="alert bg-primary-theme text-white">
                             <i class="fas fa-search me-2"></i>
-                        {% trans "Your application is currently under screening. We are evaluating your qualifications
-                        against the job requirements." %}
+                            {% trans "Your application is currently under screening. We are evaluating your qualifications against the job requirements." %}
                         </div>
                     {% elif application.stage == 'Document Review' %}
-                    <div class="alert alert-purple">
+                        <div class="alert bg-primary-theme text-white">
                             <i class="fas fa-file-alt me-2"></i>
-                        {% trans "Please upload the required documents for review. Our team will evaluate your submitted
-                        materials." %}
+                            {% trans "Please upload the required documents for review. Our team will evaluate your submitted materials." %}
                         </div>
                     {% elif application.stage == 'Exam' %}
-                    <div class="alert alert-purple">
+                        <div class="alert bg-primary-theme text-white">
                             <i class="fas fa-clipboard-check me-2"></i>
-                        {% trans "You have been shortlisted for an assessment. Please check your email for exam details
-                        and preparation materials." %}
+                            {% trans "You have been shortlisted for an assessment. Please check your email for exam details and preparation materials." %}
                         </div>
                     {% elif application.stage == 'Interview' %}
-                    <div class="alert alert-success">
+                        <div class="alert bg-primary-theme text-white">
                             <i class="fas fa-video me-2"></i>
-                        {% trans "Congratulations! You have been selected for an interview. Please check the interview
-                        schedule above and prepare accordingly." %}
+                            {% trans "Congratulations! You have been selected for an interview. Please check the interview schedule above and prepare accordingly." %}
                         </div>
                     {% elif application.stage == 'Offer' %}
-                    <div class="alert alert-warning">
+                        <div class="alert bg-primary-theme text-white">
                             <i class="fas fa-handshake me-2"></i>
-                        {% trans "You have received a job offer! Please check your email for the detailed offer letter
-                        and next steps." %}
+                            {% trans "You have received a job offer! Please check your email for the detailed offer letter and next steps." %}
                         </div>
                     {% elif application.stage == 'Hired' %}
-                    <div class="alert alert-success">
+                        <div class="alert bg-primary-theme text-white">
                             <i class="fas fa-trophy me-2"></i>
                             {% trans "Welcome to the team! You will receive onboarding information shortly." %}
                         </div>
                     {% elif application.stage == 'Rejected' %}
-                    <div class="alert alert-danger">
+                        <div class="alert bg-primary-theme text-white">
                             <i class="fas fa-times-circle me-2"></i>
-                        {% trans "Thank you for your interest. Unfortunately, your application was not selected at this
-                        time. We encourage you to apply for other positions." %}
+                            {% trans "Thank you for your interest. Unfortunately, your application was not selected at this time. We encourage you to apply for other positions." %}
                         </div>
                     {% endif %}
                 </div>
@@ -647,15 +617,13 @@
                     </div>
                     <div class="mb-3">
                         <label for="documentFile" class="form-label">{% trans "Choose File" %}</label>
-                        <input type="file" class="form-control" id="documentFile" name="file"
-                            accept=".pdf,.doc,.docx,.jpg,.png" required>
+                        <input type="file" class="form-control" id="documentFile" name="file" accept=".pdf,.doc,.docx,.jpg,.png" required>
                         <div class="form-text">{% trans "Accepted formats: PDF, DOC, DOCX, JPG, PNG (Max 5MB)" %}</div>
                     </div>
                     <input type="hidden" name="application_slug" value="{{ application.slug }}">
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel"
-                        %}</button>
+                    <button type="button" class="btn btn-outline-secondary btn-lg" 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" %}
@@ -668,7 +636,7 @@
 
 
 <script>
-    function addToCalendar(year, month, day, time, title) {
+function addToCalendar(year, month, day, time, title) {
     // Create Google Calendar URL
     const startDate = new Date(year, month - 1, day, time.split(':')[0], time.split(':')[1]);
     const endDate = new Date(startDate.getTime() + 60 * 60 * 1000); // Add 1 hour
@@ -680,9 +648,9 @@
     const googleCalendarUrl = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${formatDate(startDate)}/${formatDate(endDate)}&details=${encodeURIComponent('Interview scheduled via ATS')}`;
 
     window.open(googleCalendarUrl, '_blank');
-    }
+}
 
-    function deleteDocument(documentId) {
+function deleteDocument(documentId) {
     if (confirm('{% trans "Are you sure you want to delete this document?" %}')) {
         fetch(`/documents/${documentId}/delete/`, {
             method: 'POST',
@@ -704,10 +672,10 @@
             alert('{% trans "Error deleting document. Please try again." %}');
         });
     }
-    }
+}
 
-    // Helper function to get CSRF token
-    function getCookie(name) {
+// Helper function to get CSRF token
+function getCookie(name) {
     let cookieValue = null;
     if (document.cookie && document.cookie !== '') {
         const cookies = document.cookie.split(';');
@@ -720,7 +688,7 @@
         }
     }
     return cookieValue;
-    }
+}
 </script>
 
 {% endblock %}

templates/recruitment/candidate_detail.html

@@ -662,6 +662,7 @@
                         <i class="fas fa-eye me-1"></i>
                         {% trans "View Actual Resume" %}
                     </a> {% endcomment %}
+                    
                     <a href="{{ candidate.resume.url }}" download class="btn btn-outline-primary">
                         <i class="fas fa-download me-1"></i>
                         {% trans "Download Resume" %}

templates/recruitment/candidate_document_review_view.html

@@ -395,14 +395,13 @@
                                 {% endwith %}
                             </td>
                             <td class="text-center">
-                                <button type="button"
-                                        class="btn btn-sm btn-main-action"
+                               <button type="button" class="btn btn-outline-secondary btn-sm"
                                 data-bs-toggle="modal"
-                                        data-bs-target="#documentModal"
-                                        hx-get="{% url 'candidate_application_detail' candidate.slug %}"
-                                        hx-target="#documentModalBody"
-                                        title="{% trans 'View Candidate Details' %}">
-                                    <i class="fas fa-eye me-1"></i> {% trans "View Details" %}
+                                data-bs-target="#candidateviewModal"
+                                hx-get="{% url 'candidate_criteria_view_htmx' candidate.pk %}"
+                                hx-target="#candidateviewModalBody"
+                                title="View Profile">
+                                 <i class="fas fa-eye ms-1"></i>
                             </button>
                             </td>
                         </tr>
@@ -419,26 +418,45 @@
         </form>
     </div>
 
-    <!-- Modal for viewing candidate details -->
-    <div class="modal fade modal-xl" id="documentModal" tabindex="-1" aria-labelledby="documentModalLabel" aria-hidden="true">
+    
+</div>
+
+<div class="modal fade modal-xl" id="candidateviewModal" tabindex="-1" aria-labelledby="candidateviewModalLabel" aria-hidden="true">
     <div class="modal-dialog">
-            <div class="modal-content kaauh-card">
-                <div class="modal-header" style="border-bottom: 1px solid var(--kaauh-border);">
-                    <h5 class="modal-title" id="documentModalLabel" style="color: var(--kaauh-teal-dark);">
-                        {% trans "Candidate Details" %}
+        <div class="modal-content kaauh-card"> <div class="modal-header" style="border-bottom: 1px solid var(--kaauh-border);">
+                <h5 class="modal-title" id="candidateviewModalLabel" style="color: var(--kaauh-teal-dark);">
+                    {% trans "Candidate Details / Bulk Action Form" %}
                 </h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-                <div id="documentModalBody" class="modal-body">
+            <div id="candidateviewModalBody" class="modal-body">
                 <div class="text-center py-5 text-muted">
                     <i class="fas fa-spinner fa-spin fa-2x"></i><br>
-                        {% trans "Loading candidate details..." %}
+                    {% trans "Loading content..." %}
                 </div>
             </div>
-                <div class="modal-footer" style="border-top: 1px solid var(--kaauh-border);">
-                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
-                        {% trans "Close" %}
-                    </button>
+
+        </div>
+    </div>
+
+</div>
+
+
+<!-- Email Modal -->
+<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content kaauh-card">
+      <div class="modal-header" style="border-bottom: 1px solid var(--kaauh-border);">
+        <h5 class="modal-title" id="emailModalLabel" style="color: var(--kaauh-teal-dark);">
+          <i class="fas fa-envelope me-2"></i>{% trans "Compose Email" %}
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div id="emailModalBody" class="modal-body">
+        <div class="text-center py-5 text-muted">
+          <i class="fas fa-spinner fa-spin fa-2x"></i><br>
+          {% trans "Loading email form..." %}
+
         </div>
       </div>
     </div>

templates/recruitment/candidate_profile.html

@@ -5,21 +5,21 @@
 
 {% block customCSS %}
 <style>
-    /* Application Progress Timeline - Using Kaauh Theme Colors */
-    .application-progress {
+/* Application Progress Timeline - Using Kaauh Theme Colors */
+.application-progress {
     position: relative;
     display: flex;
     justify-content: space-between;
     margin: 2rem 0;
-    }
+}
 
-    .progress-step {
+.progress-step {
     flex: 1;
     text-align: center;
     position: relative;
-    }
+}
 
-    .progress-step::before {
+.progress-step::before {
     content: '';
     position: absolute;
     top: 20px;
@@ -28,21 +28,21 @@
     height: 2px;
     background: var(--kaauh-border);
     z-index: -1;
-    }
+}
 
-    .progress-step:first-child::before {
+.progress-step:first-child::before {
     display: none;
-    }
+}
 
-    .progress-step.completed::before {
+.progress-step.completed::before {
     background: var(--kaauh-success);
-    }
+}
 
-    .progress-step.active::before {
+.progress-step.active::before {
     background: var(--kaauh-teal);
-    }
+}
 
-    .progress-icon {
+.progress-icon {
     width: 40px;
     height: 40px;
     border-radius: 50%;
@@ -55,135 +55,94 @@
     color: #6c757d;
     position: relative;
     z-index: 1;
-    }
+}
 
-    .progress-step.completed .progress-icon {
+.progress-step.completed .progress-icon {
     background: var(--kaauh-success);
     color: white;
-    }
+}
 
-    .progress-step.active .progress-icon {
+.progress-step.active .progress-icon {
     background: var(--kaauh-teal);
     color: white;
-    }
+}
 
-    .progress-label {
+.progress-label {
     font-size: 0.875rem;
     color: #6c757d;
     margin-top: 0.5rem;
-    }
+}
 
-    .progress-step.completed .progress-label,
-    .progress-step.active .progress-label {
+.progress-step.completed .progress-label,
+.progress-step.active .progress-label {
     color: var(--kaauh-primary-text);
     font-weight: 600;
-    }
+}
 
-    /* Status Badges - Using Kaauh Theme */
-    .status-badge {
+/* Status Badges - Using Kaauh Theme */
+.status-badge {
     font-size: 0.875rem;
     padding: 0.5rem 1rem;
     border-radius: 20px;
     font-weight: 600;
-    }
+}
 
-    .status-applied {
-        background: #e3f2fd;
-        color: #1976d2;
-    }
+.status-applied { background: #e3f2fd; color: #1976d2; }
+.status-screening { background: #fff3e0; color: #f57c00; }
+.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; }
 
-    .status-screening {
-        background: #fff3e0;
-        color: #f57c00;
-    }
-
-    .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;
-    }
-
-    /* Alert Purple - Using Theme Colors */
-    .alert-purple {
+/* Alert Purple - Using Theme Colors */
+.alert-purple {
     color: #4a148c;
     background-color: #f3e5f5;
     border-color: #ce93d8;
-    }
+}
 
-    /* Profile specific styles */
-    .profile-data-list li {
+/* Profile specific styles */
+.profile-data-list li {
     padding: 1rem 0;
     border-bottom: 1px dashed var(--kaauh-border);
     font-size: 0.95rem;
     font-weight: 500;
-    }
-
-    .profile-data-list li strong {
+}
+.profile-data-list li strong {
     font-weight: 700;
     color: var(--kaauh-teal-dark);
     min-width: 120px;
     display: inline-block;
-    }
+}
 
-    /* Tabs styling */
-        {
-        % comment %
-    }
-
-    .nav-tabs {
+/* Tabs styling */
+{% comment %} .nav-tabs {
     border-bottom: 1px solid var(--kaauh-border);
-    }
-
-    .nav-tabs .nav-link.active {
+}
+.nav-tabs .nav-link.active {
     color: var(--kaauh-primary-text);
-    }
-
-    .nav-tabs .nav-link {
+}
+.nav-tabs .nav-link {
     color: var(--kaauh-teal);
     border: none;
     border-bottom: 3px solid transparent;
     padding: 1rem 1.75rem;
     font-weight: 600;
-    }
-
-    .nav-tabs .nav-link:hover {
+}
+.nav-tabs .nav-link:hover {
     color: var(--kaauh-teal-dark);
     border-color: var(--kaauh-teal-light);
-    }
-
-    .nav-tabs .nav-link.active {
+}
+.nav-tabs .nav-link.active {
     color: #000000;
     border-color: var(--kaauh-teal);
     background-color: transparent;
     font-weight: 700;
-    }
-
-    .nav-tabs .nav-link i {
+}
+.nav-tabs .nav-link i {
     color: var(--kaauh-teal) !important;
-    }
-
-        {
-        % endcomment %
-    }
+} {% endcomment %}
 
  /* Tabs Theming - Applies to the right column */
     .nav-tabs {
@@ -200,10 +159,7 @@
         padding: 0.75rem 1rem;
         margin-right: 0.5rem;
         transition: all 0.2s;
-        white-space: nowrap;
-        /* Ensure text doesn't wrap in tabs */
     }
-
     /* Active Link */
     .nav-tabs .nav-link.active {
         color: var(--kaauh-teal-dark) !important;
@@ -215,93 +171,49 @@
         margin-bottom: -1px;
     }
 
-    .nav-scroll {
+.nav-scroll {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     white-space: nowrap;
-        /* Hide scrollbar for cleaner look but keep functionality */
-        scrollbar-width: none;
-        /* Firefox */
-        -ms-overflow-style: none;
-        /* IE 10+ */
-        position: relative;
-    }
+}
+.nav-scroll .nav-tabs { flex-wrap: nowrap; border-bottom: none; }
+.nav-scroll .nav-tabs .nav-item { flex-shrink: 0; }
 
-    .nav-scroll::-webkit-scrollbar {
-        display: none;
-        /* Chrome/Safari */
-    }
-
-    .nav-scroll .nav-tabs {
-        flex-wrap: nowrap;
-        border-bottom: none;
-        padding-bottom: 5px;
-        /* Space for active border */
-    }
-
-    .nav-scroll .nav-tabs .nav-item {
-        flex-shrink: 0;
-    }
-
-    /* Add a subtle fade effect to indicate more content */
-    .nav-scroll-container {
-        position: relative;
-    }
-
-    .nav-scroll-container::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        height: 100%;
-        width: 30px;
-        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-        pointer-events: none;
-    }
-
-    /* Application table styling */
-    .application-table thead th {
+/* Application table styling */
+.application-table thead th {
     background-color: var(--kaauh-teal-light);
     color: var(--kaauh-teal-dark);
     font-weight: 700;
     border-bottom: 1px solid var(--kaauh-border);
     padding: 1rem 1.5rem;
-    }
-
-    .application-table tbody tr {
+}
+.application-table tbody tr {
     transition: background-color 0.2s ease;
-    }
-
-    .application-table tbody tr:hover {
+}
+.application-table tbody tr:hover {
     background-color: var(--kaauh-teal-light);
-    }
-
-    .badge-stage {
+}
+.badge-stage {
     font-weight: 600;
     padding: 0.4em 0.8em;
     border-radius: 50rem;
-    }
-
-    /* Responsive table for mobile */
-    @media (max-width: 767.98px) {
-        .application-table thead {
-            display: none;
-        }
+}
 
+/* Responsive table for mobile */
+@media (max-width: 767.98px) {
+    .application-table thead { display: none; }
     .application-table tr {
         margin-bottom: 1rem;
         border: 1px solid var(--kaauh-border);
         border-radius: 8px;
         box-shadow: var(--kaauh-shadow-sm);
     }
-
     .application-table td {
         text-align: right !important;
         padding: 0.75rem 1rem;
         padding-left: 50%;
         position: relative;
     }
-
     .application-table td::before {
         content: attr(data-label);
         position: absolute;
@@ -310,101 +222,67 @@
         font-weight: 700;
         color: var(--gray-text);
     }
+}
 
-        /* Profile Data List Mobile Optimization */
-        .profile-data-list li {
-            flex-direction: column;
-            align-items: flex-start !important;
-        }
-
-        .profile-data-list li>div {
-            margin-bottom: 0.25rem;
-            color: var(--kaauh-secondary);
-        }
-
-        .profile-data-list li>span {
-            width: 100%;
-            text-align: left !important;
-            word-break: break-word;
-            /* Handle long emails/addresses */
-        }
-
-        /* Adjust padding for mobile */
-        .tab-content {
-            padding: 1.5rem !important;
-        }
-
-        .nav-tabs .nav-link {
-            padding: 0.75rem 1rem;
-            font-size: 0.9rem;
-        }
-    }
-
-    /* Document management list */
-    .list-group-item {
+/* Document management list */
+.list-group-item {
     border-radius: 8px;
     margin-bottom: 0.5rem;
     border: 1px solid var(--kaauh-border);
     transition: all 0.2s ease;
-    }
-
-    .list-group-item:hover {
+}
+.list-group-item:hover {
     background-color: var(--kaauh-teal-light);
     border-color: var(--kaauh-teal-accent);
-    }
+}
 
-    /* Action tiles */
-    .btn-action-tile {
+/* Action tiles */
+.btn-action-tile {
     background-color: white;
     border: 1px solid var(--kaauh-border);
     border-radius: 12px;
     padding: 1.5rem 1rem;
     transition: all 0.3s ease;
     box-shadow: var(--kaauh-shadow-sm);
-    }
-
-    .btn-action-tile:hover {
+}
+.btn-action-tile:hover {
     background-color: var(--kaauh-teal-light);
     border-color: var(--kaauh-teal-accent);
     transform: translateY(-2px);
     box-shadow: var(--kaauh-shadow-lg);
-    }
-
-    .action-tile-icon {
+}
+.action-tile-icon {
     font-size: 2rem;
     color: var(--kaauh-teal-accent);
     display: block;
-    }
+}
 
-    /* Application Cards Styling */
-    .hover-lift {
+/* Application Cards Styling */
+.hover-lift {
     transition: all 0.3s ease;
-    }
-
-    .hover-lift:hover {
+}
+.hover-lift:hover {
     transform: translateY(-4px);
     box-shadow: var(--kaauh-shadow-lg);
     border-color: var(--kaauh-teal-accent);
-    }
+}
 
-    .application-card .card-title a {
+.application-card .card-title a {
     transition: color 0.2s ease;
-    }
-
-    .application-card .card-title a:hover {
+}
+.application-card .card-title a:hover {
     color: var(--kaauh-teal-dark) !important;
-    }
+}
 
-    /* Responsive adjustments for application cards */
-    @media (max-width: 768px) {
+/* Responsive adjustments for application cards */
+@media (max-width: 768px) {
     .application-card .card-body {
         padding: 1.25rem;
     }
-
     .application-card .card-title {
         font-size: 1.1rem;
     }
-    }
+}
 </style>
 {% endblock %}
 
@@ -412,22 +290,21 @@
 <div class="container-fluid">
 
     {# Header: Larger, more dynamic on large screens. Stacks cleanly on mobile. #}
-    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 mb-md-5">
-        <h1 class="display-6 display-md-5 fw-extrabold mb-3 mb-md-0 text-center text-md-start"
-            style="color: var(--kaauh-teal-dark);">
+    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5">
+        <h1 class="display-6 display-md-5 fw-extrabold mb-3 mb-md-0" style="color: var(--kaauh-teal-dark);">
             {% trans "Your Candidate Dashboard" %}
         </h1>
-        {% comment %} <a href="#profile-details" data-bs-toggle="tab"
-            class="btn btn-main-action btn-sm btn-md-lg px-4 py-2 rounded-pill shadow-sm shadow-md-lg">
+        {% comment %} <a href="#profile-details" data-bs-toggle="tab" class="btn btn-main-action btn-sm btn-md-lg px-4 py-2 rounded-pill shadow-sm shadow-md-lg">
             <i class="fas fa-edit me-2"></i> {% trans "Update Profile" %}
         </a> {% endcomment %}
     </div>
 
     {# Candidate Quick Overview Card: Use a softer background color #}
-    <div class="card kaauh-card mb-4 mb-md-5 p-3 p-md-4 bg-white">
+    <div class="card kaauh-card mb-5 p-4 bg-white">
         <div class="d-flex align-items-center flex-column flex-sm-row text-center text-sm-start">
             <img src="{% if candidate.user.profile_image %}{{ candidate.user.profile_image.url }}{% else %}{% static 'image/default_avatar.png' %}{% endif %}"
-                alt="{% trans 'Profile Picture' %}" class="rounded-circle me-sm-4 mb-3 mb-sm-0 shadow-lg"
+                 alt="{% trans 'Profile Picture' %}"
+                 class="rounded-circle me-sm-4 mb-3 mb-sm-0 shadow-lg"
                  style="width: 80px; height: 80px; object-fit: cover; border: 4px solid var(--kaauh-teal-accent);">
             <div>
                 <h3 class="card-title mb-1 fw-bold text-dark">{{ candidate.full_name|default:"Candidate Name" }}</h3>
@@ -442,36 +319,33 @@
     <div class="card kaauh-card p-0 bg-white">
 
         {# Tab Navigation: Used nav-scroll for responsiveness #}
-        <div class="nav-scroll-container px-3 px-md-4 pt-3">
-            <div class="nav-scroll">
+        <div class="nav-scroll px-4 pt-3">
             <ul class="nav nav-tabs" id="candidateTabs" role="tablist">
                 <li class="nav-item" role="presentation">
-                        <button class="nav-link active" id="profile-tab" data-bs-toggle="tab"
-                            data-bs-target="#profile-details" type="button" role="tab" aria-controls="profile-details"
-                            aria-selected="true">
+                    <button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-details" type="button" role="tab" aria-controls="profile-details" aria-selected="true">
                         <i class="fas fa-user-circle me-2"></i> {% trans "Profile Details" %}
                     </button>
                 </li>
                 <li class="nav-item" role="presentation">
-                        <button class="nav-link" id="applications-tab" data-bs-toggle="tab"
-                            data-bs-target="#applications-history" type="button" role="tab"
-                            aria-controls="applications-history" aria-selected="false">
+                    <button class="nav-link" id="applications-tab" data-bs-toggle="tab" data-bs-target="#applications-history" type="button" role="tab" aria-controls="applications-history" aria-selected="false">
                         <i class="fas fa-list-alt me-2"></i> {% trans "My Applications" %}
                     </button>
                 </li>
                 <li class="nav-item" role="presentation">
-                        <button class="nav-link" id="documents-tab" data-bs-toggle="tab"
-                            data-bs-target="#document-management" type="button" role="tab"
-                            aria-controls="document-management" aria-selected="false">
+                    <button class="nav-link" id="documents-tab" data-bs-toggle="tab" data-bs-target="#document-management" type="button" role="tab" aria-controls="document-management" aria-selected="false">
                         <i class="fas fa-file-upload me-2"></i> {% trans "Documents" %}
                     </button>
                 </li>
+                {% comment %} <li class="nav-item" role="presentation">
+                    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#account-settings" type="button" role="tab" aria-controls="account-settings" aria-selected="false">
+                        <i class="fas fa-cogs me-2"></i> {% trans "Settings" %}
+                    </button>
+                </li> {% endcomment %}
             </ul>
         </div>
-        </div>
 
         {# Tab Content #}
-        <div class="tab-content p-3 p-md-5" id="candidateTabsContent">
+        <div class="tab-content p-4 p-md-5" id="candidateTabsContent">
 
             <div class="tab-pane fade show active" id="profile-details" role="tabpanel" aria-labelledby="profile-tab">
                 <!-- Basic Information Section -->
@@ -480,27 +354,23 @@
                         <i class="fas fa-user me-2 text-primary-theme"></i>{% trans "Basic Information" %}
                     </h4>
                     <ul class="list-unstyled profile-data-list p-0">
-                        <li
-                            class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
+                        <li class="d-flex justify-content-between align-items-center">
                             <div><i class="fas fa-id-card me-2 text-primary-theme"></i> <strong>{% trans "First Name" %}</strong></div>
-                            <span class="text-start text-sm-end">{{ candidate.first_name|default:"" }}</span>
+                            <span class="text-end">{{ candidate.first_name|default:"" }}</span>
                         </li>
-                        <li
-                            class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
+                        <li class="d-flex justify-content-between align-items-center">
                             <div><i class="fas fa-id-card me-2 text-primary-theme"></i> <strong>{% trans "Last Name" %}</strong></div>
-                            <span class="text-start text-sm-end">{{ candidate.last_name|default:"" }}</span>
+                            <span class="text-end">{{ candidate.last_name|default:"" }}</span>
                         </li>
                         {% if candidate.middle_name %}
-                        <li
-                            class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
+                        <li class="d-flex justify-content-between align-items-center">
                             <div><i class="fas fa-id-card me-2 text-primary-theme"></i> <strong>{% trans "Middle Name" %}</strong></div>
-                            <span class="text-start text-sm-end">{{ candidate.middle_name }}</span>
+                            <span class="text-end">{{ candidate.middle_name }}</span>
                         </li>
                         {% endif %}
-                        <li
-                            class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
+                        <li class="d-flex justify-content-between align-items-center">
                             <div><i class="fas fa-envelope me-2 text-primary-theme"></i> <strong>{% trans "Email" %}</strong></div>
-                            <span class="text-start text-sm-end text-break">{{ candidate.email|default:"" }}</span>
+                            <span class="text-end">{{ candidate.email|default:"" }}</span>
                         </li>
                     </ul>
                 </div>
@@ -511,24 +381,21 @@
                         <i class="fas fa-address-book me-2 text-primary-theme"></i>{% trans "Contact Information" %}
                     </h4>
                     <ul class="list-unstyled profile-data-list p-0">
-                        <li
-                            class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
+                        <li class="d-flex justify-content-between align-items-center">
                             <div><i class="fas fa-phone-alt me-2 text-primary-theme"></i> <strong>{% trans "Phone" %}</strong></div>
-                            <span class="text-start text-sm-end">{{ candidate.phone|default:"" }}</span>
+                            <span class="text-end">{{ candidate.phone|default:"" }}</span>
                         </li>
                         {% if candidate.address %}
-                        <li class="d-flex flex-column flex-sm-row align-items-start">
-                            <div class="mb-1"><i class="fas fa-map-marker-alt me-2 text-primary-theme"></i> <strong>{%trans "Address" %}</strong></div>
-                            <span class="text-start text-sm-end text-break">{{ candidate.address|linebreaksbr }}</span>
+                        <li class="d-flex align-items-start">
+                            <div class="mb-1"><i class="fas fa-map-marker-alt me-2 text-primary-theme"></i> <strong>{% trans "Address" %}</strong></div>
+                            <span class="text-end text-break">{{ candidate.address|linebreaksbr }}</span>
                         </li>
                         {% endif %}
                         {% if candidate.linkedin_profile %}
-                        <li
-                            class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
+                        <li class="d-flex justify-content-between align-items-center">
                             <div><i class="fab fa-linkedin me-2 text-primary-theme"></i> <strong>{% trans "LinkedIn Profile" %}</strong></div>
-                            <span class="text-start text-sm-end">
-                                <a href="{{ candidate.linkedin_profile }}" target="_blank"
-                                    class="text-primary-theme text-decoration-none">
+                            <span class="text-end">
+                                <a href="{{ candidate.linkedin_profile }}" target="_blank" class="text-primary-theme text-decoration-none">
                                     {% trans "View Profile" %} <i class="fas fa-external-link-alt ms-1"></i>
                                 </a>
                             </span>
@@ -543,20 +410,17 @@
                         <i class="fas fa-user-circle me-2 text-primary-theme"></i>{% trans "Personal Details" %}
                     </h4>
                     <ul class="list-unstyled profile-data-list p-0">
-                        <li
-                            class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
+                        <li class="d-flex justify-content-between align-items-center">
                             <div><i class="fas fa-calendar-alt me-2 text-primary-theme"></i> <strong>{% trans "Date of Birth" %}</strong></div>
-                            <span class="text-start text-sm-end">{{ candidate.date_of_birth|date:"M d, Y"|default:"" }}</span>
+                            <span class="text-end">{{ candidate.date_of_birth|date:"M d, Y"|default:"" }}</span>
                         </li>
-                        <li
-                            class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
+                        <li class="d-flex justify-content-between align-items-center">
                             <div><i class="fas fa-venus-mars me-2 text-primary-theme"></i> <strong>{% trans "Gender" %}</strong></div>
-                            <span class="text-start text-sm-end">{{ candidate.get_gender_display|default:"" }}</span>
+                            <span class="text-end">{{ candidate.get_gender_display|default:"" }}</span>
                         </li>
-                        <li
-                            class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
+                        <li class="d-flex justify-content-between align-items-center">
                             <div><i class="fas fa-globe me-2 text-primary-theme"></i> <strong>{% trans "Nationality" %}</strong></div>
-                            <span class="text-start text-sm-end">{{ candidate.get_nationality_display|default:"" }}</span>
+                            <span class="text-end">{{ candidate.get_nationality_display|default:"" }}</span>
                         </li>
                     </ul>
                 </div>
@@ -568,22 +432,51 @@
                     </h4>
                     <ul class="list-unstyled profile-data-list p-0">
                         {% if candidate.user.designation %}
-                        <li
-                            class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
-                            <div><i class="fas fa-user-tie me-2 text-primary-theme"></i> <strong>{% trans "Designation"
-                                    %}</strong></div>
-                            <span class="text-start text-sm-end">{{ candidate.user.designation }}</span>
+                        <li class="d-flex justify-content-between align-items-center">
+                            <div><i class="fas fa-user-tie me-2 text-primary-theme"></i> <strong>{% trans "Designation" %}</strong></div>
+                            <span class="text-end">{{ candidate.user.designation }}</span>
                         </li>
                         {% endif %}
                         {% if candidate.gpa %}
-                        <li
-                            class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
+                        <li class="d-flex justify-content-between align-items-center">
                             <div><i class="fas fa-graduation-cap me-2 text-primary-theme"></i> <strong>{% trans "GPA" %}</strong></div>
-                            <span class="text-start text-sm-end">{{ candidate.gpa }}</span>
+                            <span class="text-end">{{ candidate.gpa }}</span>
                         </li>
                         {% endif %}
                     </ul>
                 </div>
+
+                {% comment %} <div class="alert alert-info mt-4">
+                    <i class="fas fa-info-circle me-2"></i>
+                    <small>{% trans "Use the 'Update Profile' button above to edit these details." %}</small>
+                </div> {% endcomment %}
+
+                {% comment %} <hr class="my-5"> {% endcomment %}
+
+                {% comment %} <h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Quick Actions" %}</h4>
+                <div class="row g-3 g-md-4">
+                    <div class="col-6 col-sm-4 col-md-4">
+                         <a href="#applications-history" data-bs-toggle="tab" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
+                            <span class="action-tile-icon mb-2"><i class="fas fa-list-check"></i></span>
+                            <span class="fw-bold">{% trans "Track Jobs" %}</span>
+                            <span class="small text-muted d-none d-sm-block">{% trans "View stages" %}</span>
+                        </a>
+                    </div>
+                    <div class="col-6 col-sm-4 col-md-4">
+                        <a href="#document-management" data-bs-toggle="tab" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
+                            <span class="action-tile-icon mb-2"><i class="fas fa-cloud-upload-alt"></i></span>
+                            <span class="fw-bold">{% trans "Manage Documents" %}</span>
+                            <span class="small text-muted d-none d-sm-block">{% trans "Upload/View files" %}</span>
+                        </a>
+                    </div>
+                    <div class="col-12 col-sm-4 col-md-4">
+                        <a href="{% url 'kaauh_career' %}" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
+                            <span class="action-tile-icon mb-2"><i class="fas fa-search"></i></span>
+                            <span class="fw-bold">{% trans "Find New Careers" %}</span>
+                            <span class="small text-muted d-none d-sm-block">{% trans "Explore open roles" %}</span>
+                        </a>
+                    </div>
+                </div> {% endcomment %}
             </div>
 
             <div class="tab-pane fade" id="applications-history" role="tabpanel" aria-labelledby="applications-tab">
@@ -606,7 +499,7 @@
                                             </h5>
                                             <p class="text-muted small mb-0">
                                                 <i class="fas fa-calendar-alt me-1"></i>
-                                            {% trans "Applied" %}: {{ application.applied_date|date:"d M Y" }}
+                                                {% trans "Applied" %}: {{ application.created_at|date:"d M Y" }}
                                             </p>
                                         </div>
                                     </div>
@@ -615,16 +508,16 @@
                                     <div class="mb-3">
                                         <div class="d-flex justify-content-between align-items-center mb-2">
                                             <span class="text-muted small fw-medium">{% trans "Current Stage" %}</span>
-                                        <span class="badge badge-stage bg-info text-white">
+                                            <span class="badge badge-stage bg-primary-theme text-white">
                                                 {{ application.stage }}
                                             </span>
                                         </div>
                                         <div class="d-flex justify-content-between align-items-center">
                                             <span class="text-muted small fw-medium">{% trans "Status" %}</span>
                                             {% if application.is_active %}
-                                        <span class="badge badge-stage bg-success">{% trans "Active" %}</span>
+                                                <span class="badge badge-stage bg-primary-theme">{% trans "Active" %}</span>
                                             {% else %}
-                                        <span class="badge badge-stage bg-warning text-dark">{% trans "Closed" %}</span>
+                                                <span class="badge badge-stage bg-danger text-dark">{% trans "Closed" %}</span>
                                             {% endif %}
                                         </div>
                                     </div>
@@ -643,8 +536,7 @@
                     </div>
 
                 {% else %}
-                <div class="alert alert-info text-center p-5 rounded-3"
-                    style="border: 1px dashed var(--kaauh-border); background-color: var(--kaauh-teal-light);">
+                    <div class="alert alert-info text-center p-5 rounded-3" style="border: 1px dashed var(--kaauh-border); background-color: var(--kaauh-teal-light);">
                         <i class="fas fa-info-circle fa-2x mb-3 text-primary-theme"></i>
                         <h5 class="mb-3 fw-bold text-primary-theme">{% trans "You haven't submitted any applications yet." %}</h5>
                         <a href="{% url 'kaauh_career' %}" class="ms-3 btn btn-main-action mt-2 rounded-pill px-4">
@@ -659,9 +551,7 @@
 
                 <p class="text-gray-subtle">{% trans "You can upload and manage your resume, certificates, and professional documents here. These documents will be attached to your applications." %}</p>
 
-                <button type="button"
-                    class="btn btn-main-action rounded-pill px-4 me-3 d-block d-sm-inline-block w-100 w-sm-auto mb-4"
-                    data-bs-toggle="modal" data-bs-target="#documentUploadModal">
+                <button type="button" class="btn btn-main-action rounded-pill px-4 me-3 d-block d-sm-inline-block w-100 w-sm-auto mb-4" data-bs-toggle="modal" data-bs-target="#documentUploadModal">
                     <i class="fas fa-cloud-upload-alt me-2"></i> {% trans "Upload New Document" %}
                 </button>
 
@@ -670,18 +560,15 @@
                 {# Document List #}
                 <ul class="list-group list-group-flush">
                     {% for document in documents %}
-                    <li
-                        class="list-group-item d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center bg-white p-3">
+                    <li class="list-group-item d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center bg-white p-3">
                         <div class="mb-2 mb-sm-0 fw-medium">
-                            <i class="fas fa-file-pdf me-2 text-primary-theme"></i> <strong>{{document.document_type|title }}</strong>
+                            <i class="fas fa-file-pdf me-2 text-primary-theme"></i> <strong>{{ document.document_type|title }}</strong>
                             <span class="text-muted small">({{ document.file.name|split:"/"|last }})</span>
                         </div>
-                        <div class="d-flex align-items-center mt-2 mt-sm-0">
-                            <span class="text-muted small me-3 d-none d-sm-inline">{% trans "Uploaded:" %} {{document.uploaded_at|date:"d M Y" }}</span>
-                            <a href="{{ document.file.url }}" target="_blank"
-                                class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-eye"></i></a>
-                            <a href="{% url 'candidate_document_delete' document.id %}"
-                                class="btn btn-sm btn-outline-danger" onclick="return confirm('{% trans " Are you sure you want to delete this document?" %}')"><i class="fas fa-trash-alt"></i></a>
+                        <div class="d-flex align-items-center">
+                            <span class="text-muted small me-3">{% trans "Uploaded:" %} {{ document.uploaded_at|date:"d M Y" }}</span>
+                            <a href="{{ document.file.url }}" target="_blank" class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-eye"></i></a>
+                            <a href="{% url 'candidate_document_delete' document.id %}" class="btn btn-sm btn-outline-danger" onclick="return confirm('{% trans "Are you sure you want to delete this document?" %}')"><i class="fas fa-trash-alt"></i></a>
                         </div>
                     </li>
                     {% empty %}
@@ -694,41 +581,32 @@
 
             </div>
 
-            {% comment %} <div class="tab-pane fade" id="account-settings" role="tabpanel"
-                aria-labelledby="settings-tab">
+            {% comment %} <div class="tab-pane fade" id="account-settings" role="tabpanel" aria-labelledby="settings-tab">
                 <h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Security & Preferences" %}</h4>
 
                 <div class="row g-4">
                     <div class="col-12 col-md-6">
                         <div class="card kaauh-card p-4 h-100 bg-white">
-                            <h5 class="fw-bold"><i class="fas fa-key me-2 text-primary-theme"></i> {% trans "Password
-                                Security" %}</h5>
-                            <p class="text-muted small">{% trans "Update your password regularly to keep your account
-                                secure." %}</p>
-                            <button type="button" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium"
-                                data-bs-toggle="modal" data-bs-target="#passwordModal">
+                            <h5 class="fw-bold"><i class="fas fa-key me-2 text-primary-theme"></i> {% trans "Password Security" %}</h5>
+                            <p class="text-muted small">{% trans "Update your password regularly to keep your account secure." %}</p>
+                            <button type="button" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium" data-bs-toggle="modal" data-bs-target="#passwordModal">
                                 {% trans "Change Password" %}
                             </button>
                         </div>
                     </div>
                     <div class="col-12 col-md-6">
                         <div class="card kaauh-card p-4 h-100 bg-white">
-                            <h5 class="fw-bold"><i class="fas fa-image me-2 text-primary-theme"></i> {% trans "Profile
-                                Image" %}</h5>
-                            <p class="text-muted small">{% trans "Update your profile picture to personalize your
-                                account." %}</p>
-                            <button type="button" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium"
-                                data-bs-toggle="modal" data-bs-target="#profileImageModal">
+                            <h5 class="fw-bold"><i class="fas fa-image me-2 text-primary-theme"></i> {% trans "Profile Image" %}</h5>
+                            <p class="text-muted small">{% trans "Update your profile picture to personalize your account." %}</p>
+                            <button type="button" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium" data-bs-toggle="modal" data-bs-target="#profileImageModal">
                                 {% trans "Change Image" %}
                             </button>
                         </div>
                     </div>
                 </div>
 
-                <div class="alert mt-5 py-3"
-                    style="background-color: var(--danger-subtle); color: #842029; border: 1px solid #f5c2c7; border-radius: 8px;">
-                    <i class="fas fa-exclamation-triangle me-2"></i> {% trans "To delete your profile, please contact HR
-                    support." %}
+                <div class="alert mt-5 py-3" style="background-color: var(--danger-subtle); color: #842029; border: 1px solid #f5c2c7; border-radius: 8px;">
+                    <i class="fas fa-exclamation-triangle me-2"></i> {% trans "To delete your profile, please contact HR support." %}
                 </div>
             </div> {% endcomment %}
 
@@ -759,8 +637,7 @@
 </div>
 
 <!-- Profile Image Modal (Reused from portal_profile.html) -->
-<div class="modal fade mt-4" id="profileImageModal" tabindex="-1" aria-labelledby="profileImageModalLabel"
-    aria-hidden="true">
+<div class="modal fade mt-4" id="profileImageModal" tabindex="-1" aria-labelledby="profileImageModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
@@ -768,8 +645,7 @@
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-                <form method="post" action="{% url 'user_profile_image_update' candidate.pk %}"
-                    enctype="multipart/form-data">
+        <form method="post" action="{% url 'user_profile_image_update' candidate.pk %}" enctype="multipart/form-data" >
           {% csrf_token %}
 
           <div class="mb-3">
@@ -782,8 +658,7 @@
                     <small class="text-muted d-block">{% trans "Current Image:" %}</small>
 
                     {# Display Link to View Current Image #}
-                            <a href="{{ profile_form.instance.profile_image.url }}" target="_blank"
-                                class="d-inline-block me-3 text-info fw-bold">
+                    <a href="{{ profile_form.instance.profile_image.url }}" target="_blank" class="d-inline-block me-3 text-info fw-bold">
                         {% trans "View/Download" %} ({{ profile_form.instance.profile_image.name }})
                     </a>
 
@@ -797,7 +672,7 @@
 
                 {# 2. Explicitly render the 'Clear' checkbox and the Change input #}
                 <div class="form-check mt-3">
-                            
+                    {# The ClearableFileInput widget renders itself here. It provides the "Clear" checkbox and the "Change" input field. #}
                     {{ profile_form.profile_image }}
                 </div>
 
@@ -826,8 +701,7 @@
 </div>
 
 <!-- Document Upload Modal -->
-<div class="modal fade mt-4" id="documentUploadModal" tabindex="-1" aria-labelledby="documentUploadModalLabel"
-    aria-hidden="true">
+<div class="modal fade mt-4" id="documentUploadModal" tabindex="-1" aria-labelledby="documentUploadModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
@@ -835,8 +709,7 @@
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-                <form method="post" action="{% url 'document_upload' candidate.id %}" enctype="multipart/form-data"
-                    id="documentUploadForm">
+        <form method="post" action="{% url 'document_upload' candidate.id %}" enctype="multipart/form-data" id="documentUploadForm">
           <input type="hidden" name="upload_target" value="person">
           {% csrf_token %}
           <div class="mb-3">
@@ -848,7 +721,7 @@
             {{ document_form.file }}
           </div>
           <div class="modal-footer mt-4">
-                        <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">{% trans "Close"%}</button>
+            <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
             <button type="submit" class="btn btn-main-action">{% trans "Upload" %}</button>
           </div>
         </form>