{% extends "exams/base.html" %}
{% load static %}

{% block content %}

<div class="container-fluid px-4 mt-4">
   


  <!-- Project Header Card -->
  <div class="card shadow-sm border-0 mb-4">
    <div class="card-body p-4">
      <div class="row align-items-center">
        <div class="col-md-8">
          <h5 class="mb-2 fw-bold">{{ project.name }}</h5>
          <div class="d-flex flex-wrap gap-3">
            <span class="info-chip">
              <i class="fas fa-graduation-cap me-1 text-primary"></i>
              {{ project.academic_level.name }}
            </span>
            <span class="info-chip">
              <i class="fas fa-calendar-alt me-1 text-primary"></i>
              {{ project.year }}
            </span>
            {% if project.is_active %}
              <span class="status-chip-active">
                <i class="fas fa-check-circle me-1"></i>Active
              </span>
            {% else %}
              <span class="status-chip-inactive">
                <i class="fas fa-ban me-1"></i>Inactive
              </span>
            {% endif %}
          </div>
<!--           {% if project.description %}
          <p class="text-muted mt-3 mb-0">{{ project.description }}</p>
          {% endif %} -->
        </div>
        <div class="col-md-4 text-md-end mt-3 mt-md-0">
          <a href="{% url 'exams:project_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Projects
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Management Actions Grid -->
  <div class="row">
    <div class="col-12 mb-4">
      <h5 class="fw-bold">
        <i class="fas fa-tools me-2 text-primary"></i>Project Management Tools
      </h5>
      <hr class="mt-0">
    </div>
  </div>

  <div class="row g-4">
    
    <!-- Data Management Section -->
    <div class="col-12">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3 border-bottom">
          <h6 class="mb-0 fw-bold">
            <i class="fas fa-database me-2 text-primary"></i>Data Management, Processing & Calculation
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-3">
            

            <div class="col-md-6 col-lg-4">
              <a href="{% url 'exams:upload_final_processed_scores' project.project_code %}" class="action-card">
                <div class="action-icon bg-danger bg-opacity-10 text-danger">
                  <i class="fas fa-chart-line"></i>
                </div>
                <div class="action-content">
                  <h6 class="mb-1">1. Upload Candidates&Final Marks</h6>
                  <small class="text-muted">Read to Upload Data</small>
                </div>
                <i class="fas fa-chevron-right action-arrow"></i>
              </a>
            </div>


            
            <div class="col-md-6 col-lg-4">
              <a href="{% url 'exams:process_student_results_page' project.project_code %}" class="action-card">
                <div class="action-icon bg-warning bg-opacity-10 text-warning">
                  <i class="fas fa-chart-pie"></i>
                </div>
                <div class="action-content">
                  <h6 class="mb-1">2. Process Results & Ranking</h6>
                  <small class="text-muted">Generate student and school rankings</small>
                </div>
                <i class="fas fa-chevron-right action-arrow"></i>
              </a>
            </div>
            
            <div class="col-md-6 col-lg-4">
              <a href="{% url 'exams:manage_school_results' project.project_code %}" class="action-card">
                <div class="action-icon bg-info bg-opacity-10 text-info">
                  <i class="fas fa-check-double"></i>
                </div>
                <div class="action-content">
                  <h6 class="mb-1">3. Release Results</h6>
                  <small class="text-muted">Manage school result visibility</small>
                </div>
                <i class="fas fa-chevron-right action-arrow"></i>
              </a>
            </div>



          </div>
        </div>
      </div>
    </div>




    <!-- Reports Section -->
    <div class="col-12">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3 border-bottom">
          <h6 class="mb-0 fw-bold">
            <i class="fas fa-chart-bar me-2 text-primary"></i>Reports & Rankings and BackUps
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-3">
            
            <div class="col-md-6 col-lg-4">
              <a href="{% url 'exams:project_school_ranking' project.project_code %}" class="action-card">
                <div class="action-icon bg-success bg-opacity-10 text-success">
                  <i class="fas fa-trophy"></i>
                </div>
                <div class="action-content">
                  <h6 class="mb-1">Quick School Ranking</h6>
                  <small class="text-muted">View school performance rankings</small>
                </div>
                <i class="fas fa-chevron-right action-arrow"></i>
              </a>
            </div>
            
            <div class="col-md-6 col-lg-4">
              <a href="{% url 'exams:rank_summary_page' project.project_code %}" class="action-card">
                <div class="action-icon bg-info bg-opacity-10 text-info">
                  <i class="fas fa-chart-line"></i>
                </div>
                <div class="action-content">
                  <h6 class="mb-1">Rank Summary Page</h6>
                  <small class="text-muted">Comprehensive ranking overview</small>
                </div>
                <i class="fas fa-chevron-right action-arrow"></i>
              </a>
            </div>
            
            <div class="col-md-6 col-lg-4">
              <a href="{% url 'exams:export_processed_scores_pivot_csv' project.project_code %}" class="action-card">
                <div class="action-icon bg-secondary bg-opacity-10 text-secondary">
                  <i class="fas fa-table"></i>
                </div>
                <div class="action-content">
                  <h6 class="mb-1">Export Scores to CSV</h6>
                  <small class="text-muted">Pivot table format - All scores</small>
                </div>
                <i class="fas fa-download action-arrow"></i>
              </a>
            </div>

<!-- Reports Section -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">
            <i class="fas fa-file-alt me-2"></i>Generate Reports
        </h6>
    </div>
    <div class="card-body">
        <div class="row">
            <!-- Combined Report -->
            <div class="col-md-4 mb-3">
                <div class="card border-primary">
                    <div class="card-body text-center">
                        <i class="fas fa-chart-pie fa-3x text-primary mb-3"></i> 
                        <h6>Combined Report</h6>
                        <p class="small text-muted">Complete analysis with charts and rankings</p>
                        
                        {% if project.academic_level.id == 2 %}
                            <a href="{% url 'exams:combined_report' project.project_code %}" 
                               class="btn btn-primary btn-sm w-100">View A-Level Report</a>
                        {% elif project.academic_level.id == 1 %}
                            <a href="{% url 'exams:combined_report_olevel' project.project_code %}" 
                               class="btn btn-primary btn-sm w-100">View O-Level Report</a>
                        {% elif project.academic_level.id == 3 %}
                            <a href="{% url 'exams:combined_report_primary' project.project_code %}" 
                               class="btn btn-primary btn-sm w-100">View Primary Report</a>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- Print Version -->
            <div class="col-md-4 mb-3">
                <div class="card border-success">
                    <div class="card-body text-center">
                        <i class="fas fa-print fa-3x text-success mb-3"></i>
                        <h6>Print Report</h6>
                        <p class="small text-muted">Print-optimized version for official use</p>
                        
                        {% if project.academic_level.id == 2 %}
                            <a href="{% url 'exams:combined_report_print' project.project_code %}" 
                               class="btn btn-success btn-sm w-100" target="_blank">
                                <i class="fas fa-print me-1"></i> Print A-Level
                            </a>
                        {% elif project.academic_level.id == 1 %}
                            <a href="{% url 'exams:combined_report_olevel_print' project.project_code %}" 
                               class="btn btn-success btn-sm w-100" target="_blank">
                                <i class="fas fa-print me-1"></i> Print O-Level
                            </a>
                        {% elif project.academic_level.id == 3 %}
                            <a href="{% url 'exams:combined_report_primary_print' project.project_code %}" 
                               class="btn btn-success btn-sm w-100" target="_blank">
                                <i class="fas fa-print me-1"></i> Print Primary
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- Excel Export -->
            <div class="col-md-4 mb-3">
                <div class="card border-info">
                    <div class="card-body text-center">
                        <i class="fas fa-file-excel fa-3x text-info mb-3"></i>
                        <h6>Export to Excel</h6>
                        <p class="small text-muted">Download data in Excel format</p>
                        
                        {% if project.academic_level.id == 2 %}
                            <a href="{% url 'exams:combined_report_excel' project.project_code %}" 
                               class="btn btn-info btn-sm w-100 text-white">
                                <i class="fas fa-download me-1"></i> Excel A-Level
                            </a>
                        {% elif project.academic_level.id == 1 %}
                            <a href="{% url 'exams:combined_report_olevel_excel' project.project_code %}" 
                               class="btn btn-info btn-sm w-100 text-white">
                                <i class="fas fa-download me-1"></i> Excel O-Level
                            </a>
                        {% elif project.academic_level.id == 3 %}
                            <a href="{% url 'exams:combined_report_primary_excel' project.project_code %}" 
                               class="btn btn-info btn-sm w-100 text-white">
                                <i class="fas fa-download me-1"></i> Excel Primary
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>           







 
    <!-- Standardization Section -->
    <div class="col-12">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3 border-bottom">
          <h6 class="mb-0 fw-bold">
            <i class="fas fa-balance-scale me-2 text-primary"></i>Score Standardization
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-3">
            
            <div class="col-md-6 col-lg-4">
              <a href="{% url 'exams:subject_standardization_list' project.project_code %}" class="action-card">
                <div class="action-icon bg-primary bg-opacity-10 text-primary">
                  <i class="fas fa-calculator"></i>
                </div>
                <div class="action-content">
                  <h6 class="mb-1">Standardize Processed Scores</h6>
                  <small class="text-muted">Adjust subject scores (processed data)</small>
                </div>
                <i class="fas fa-chevron-right action-arrow"></i>
              </a>
            </div>  
          </div>
        </div>
      </div>
    </div>
















<!-- ======================================================
     DANGER ZONE - DELETE PROJECT DATA
====================================================== -->
<div class="card shadow mt-5 border-danger">
    <div class="card-header bg-danger text-white py-3">
        <h5 class="mb-0 fw-bold">
            <i class="fas fa-exclamation-triangle me-2"></i>
            DANGER ZONE - DELETE ALL PROJECT DATA
        </h5>
    </div>
    <div class="card-body">
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-circle fa-2x float-start me-3"></i>
            <strong>⚠️ WARNING: This action cannot be undone!</strong><br>
            This will permanently delete ALL data associated with this project including:
            <ul class="mt-2 mb-0">
                <li>Project Students</li>
                <li>Processed Subject Scores</li>
                <li>School Results</li>
                <li>Student Final Results</li>
                <li>Subject Performance Results</li>
                <li>All related data</li>
            </ul>
        </div>
        
        <!-- Statistics Card -->
        <div class="row mb-4" id="deleteStats" style="display: none;">
            <div class="col-md-3">
                <div class="card bg-secondary text-white">
                    <div class="card-body text-center">
                        <h3 id="statStudents">0</h3>
                        <small>Students</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-secondary text-white">
                    <div class="card-body text-center">
                        <h3 id="statScores">0</h3>
                        <small>Processed Scores</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-secondary text-white">
                    <div class="card-body text-center">
                        <h3 id="statSchoolResults">0</h3>
                        <small>School Results</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-secondary text-white">
                    <div class="card-body text-center">
                        <h3 id="statStudentResults">0</h3>
                        <small>Student Results</small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Delete Button -->
        <div class="text-center">
            <button type="button" class="btn btn-danger btn-lg px-5 py-3 fw-bold" 
                    style="font-size: 1.5rem;"
                    onclick="showDeleteConfirmation()">
                <i class="fas fa-trash-alt me-3"></i>
                DELETE ALL PROJECT DATA
                <i class="fas fa-exclamation-triangle ms-3"></i>
            </button>
            <p class="text-muted mt-3 mb-0">
                <i class="fas fa-info-circle"></i> This will delete ALL data associated with this project. 
                The project structure will remain but all results will be cleared.
            </p>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    CONFIRM DELETION - THIS ACTION CANNOT BE UNDONE!
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle fa-2x float-start me-3"></i>
                    <strong>⚠️ WARNING: You are about to delete ALL project data!</strong><br>
                    This action is permanent and cannot be reversed. Please confirm below.
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <h4 id="modalStatStudents">0</h4>
                                <small>Students</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <h4 id="modalStatScores">0</h4>
                                <small>Processed Scores</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <h4 id="modalStatSchoolResults">0</h4>
                                <small>School Results</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <h4 id="modalStatStudentResults">0</h4>
                                <small>Student Results</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    To confirm deletion, type <strong>"DELETE {{ project.project_code }}"</strong> in the box below:
                </div>
                <input type="text" id="confirmText" class="form-control form-control-lg" 
                       placeholder="Type DELETE {{ project.project_code }} to confirm">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Cancel
                </button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn" disabled>
                    <i class="fas fa-trash-alt me-2"></i>PERMANENTLY DELETE ALL DATA
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Progress Modal -->
<div class="modal fade" id="deleteProgressModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title">
                    <i class="fas fa-spinner fa-spin me-2"></i>
                    Deleting Project Data...
                </h5>
            </div>
            <div class="modal-body">
                <div class="progress mb-3">
                    <div id="deleteProgressBar" class="progress-bar progress-bar-striped progress-bar-animated" 
                         role="progressbar" style="width: 0%">0%</div>
                </div>
                <div id="deleteProgressStatus" class="text-center">
                    Preparing to delete...
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Result Modal -->
<div class="modal fade" id="deleteResultModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" id="deleteResultHeader">
                <h5 class="modal-title">Deletion Result</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="deleteResultBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>








    
            
          </div>
        </div>
      </div>
    </div>

  </div>

</div>










<script>
// Load statistics when page loads
document.addEventListener('DOMContentLoaded', function() {
    loadDeleteStatistics();
});

function loadDeleteStatistics() {
    fetch('{% url "exams:project_delete_stats" project.project_code %}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('statStudents').textContent = data.stats.students;
                document.getElementById('statScores').textContent = data.stats.processed_scores;
                document.getElementById('statSchoolResults').textContent = data.stats.school_results;
                document.getElementById('statStudentResults').textContent = data.stats.student_results;
                document.getElementById('deleteStats').style.display = 'flex';
            }
        })
        .catch(error => console.error('Error loading stats:', error));
}

function showDeleteConfirmation() {
    // Load fresh stats for modal
    fetch('{% url "exams:project_delete_stats" project.project_code %}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('modalStatStudents').textContent = data.stats.students;
                document.getElementById('modalStatScores').textContent = data.stats.processed_scores;
                document.getElementById('modalStatSchoolResults').textContent = data.stats.school_results;
                document.getElementById('modalStatStudentResults').textContent = data.stats.student_results;
            }
        });
    
    // Reset confirm input
    document.getElementById('confirmText').value = '';
    document.getElementById('confirmDeleteBtn').disabled = true;
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
    modal.show();
}

// Enable delete button when confirmation text matches
document.getElementById('confirmText').addEventListener('input', function() {
    const expected = "DELETE {{ project.project_code }}";
    const btn = document.getElementById('confirmDeleteBtn');
    btn.disabled = this.value !== expected;
});

// Handle delete confirmation
document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
    const modal = bootstrap.Modal.getInstance(document.getElementById('deleteConfirmModal'));
    modal.hide();
    
    // Show progress modal
    const progressModal = new bootstrap.Modal(document.getElementById('deleteProgressModal'));
    progressModal.show();
    
    const progressBar = document.getElementById('deleteProgressBar');
    const progressStatus = document.getElementById('deleteProgressStatus');
    
    // Update progress
    progressBar.style.width = '30%';
    progressBar.textContent = '30%';
    progressStatus.textContent = 'Fetching data to delete...';
    
    // Get stats first
    fetch('{% url "exams:project_delete_stats" project.project_code %}')
        .then(response => response.json())
        .then(data => {
            progressBar.style.width = '50%';
            progressBar.textContent = '50%';
            progressStatus.textContent = `Found ${data.stats.students} students, ${data.stats.processed_scores} scores to delete...`;
            
            // Perform deletion
            return fetch('{% url "exams:project_delete_all_data" project.project_code %}', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken'),
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ confirm: true })
            });
        })
        .then(response => response.json())
        .then(result => {
            progressBar.style.width = '100%';
            progressBar.textContent = '100%';
            progressStatus.textContent = 'Deletion completed!';
            
            setTimeout(() => {
                progressModal.hide();
                
                // Show result modal
                const resultHeader = document.getElementById('deleteResultHeader');
                const resultBody = document.getElementById('deleteResultBody');
                
                if (result.success) {
                    resultHeader.className = 'modal-header bg-success text-white';
                    resultBody.innerHTML = `
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle fa-2x float-start me-3"></i>
                            <strong>Deletion Completed Successfully!</strong><br>
                            The following data has been permanently deleted:
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="card text-center bg-light">
                                    <div class="card-body">
                                        <h3>${result.deleted.students || 0}</h3>
                                        <small>Students</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card text-center bg-light">
                                    <div class="card-body">
                                        <h3>${result.deleted.processed_scores || 0}</h3>
                                        <small>Processed Scores</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card text-center bg-light">
                                    <div class="card-body">
                                        <h3>${result.deleted.school_results || 0}</h3>
                                        <small>School Results</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <div class="card text-center bg-light">
                                    <div class="card-body">
                                        <h3>${result.deleted.student_results || 0}</h3>
                                        <small>Student Final Results</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card text-center bg-light">
                                    <div class="card-body">
                                        <h3>${result.deleted.subject_results || 0}</h3>
                                        <small>Subject Results</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-info mt-3">
                            <i class="fas fa-info-circle me-2"></i>
                            The project structure remains intact. You can now upload new data.
                        </div>
                    `;
                } else {
                    resultHeader.className = 'modal-header bg-danger text-white';
                    resultBody.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Deletion Failed:</strong><br>
                            ${result.error || 'An unknown error occurred'}
                        </div>
                    `;
                }
                
                new bootstrap.Modal(document.getElementById('deleteResultModal')).show();
                
                // Reload page after modal closes
                document.getElementById('deleteResultModal').addEventListener('hidden.bs.modal', function() {
                    window.location.reload();
                }, { once: true });
                
            }, 1000);
        })
        .catch(error => {
            progressModal.hide();
            const resultHeader = document.getElementById('deleteResultHeader');
            const resultBody = document.getElementById('deleteResultBody');
            resultHeader.className = 'modal-header bg-danger text-white';
            resultBody.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Error:</strong><br>
                    ${error.message}
                </div>
            `;
            new bootstrap.Modal(document.getElementById('deleteResultModal')).show();
        });
});

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>

<style>
    .btn-danger {
        transition: all 0.3s ease;
    }
    .btn-danger:hover {
        transform: scale(1.02);
        box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
    }
    .border-danger {
        border-width: 2px !important;
    }
</style>








<style>
  /* Action Card Styles */
  .action-card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: transparent;
    text-decoration: none;
  }
  
  .action-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
    margin-right: 15px;
    flex-shrink: 0;
  }
  
  .action-content {
    flex: 1;
  }
  
  .action-content h6 {
    color: #2c3e50;
    margin-bottom: 4px;
    font-weight: 600;
  }
  
  .action-content small {
    font-size: 0.75rem;
  }
  
  .action-arrow {
    color: #adb5bd;
    font-size: 0.9rem;
    transition: all 0.2s ease;
  }
  
  .action-card:hover .action-arrow {
    transform: translateX(5px);
    color: #3b82f6;
  }
  
  /* Info Chips */
  .info-chip {
    background: #f8f9fa;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #495057;
    display: inline-flex;
    align-items: center;
  }
  
  .status-chip-active {
    background: #dcfce7;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #15803d;
    display: inline-flex;
    align-items: center;
  }
  
  .status-chip-inactive {
    background: #fee2e2;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #b91c1c;
    display: inline-flex;
    align-items: center;
  }
  
  .card {
    border-radius: 16px;
    overflow: hidden;
  }
  
  .card-header {
    background: white;
  }
  
  .breadcrumb {
    background: transparent;
    padding: 0;
  }
</style>

{% endblock %}