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

{% block content %}
<div class="container-fluid px-4 mt-4">
    
    <!-- Header with Print and Export Buttons -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">
                <i class="fas fa-chart-line text-primary me-2"></i>
                O-Level Combined Report: {{ project.name }}
            </h4>
            <p class="text-muted mb-0">
                <i class="fas fa-calendar me-1"></i>{{ project.year }} | 
                <i class="fas fa-graduation-cap me-1"></i>{{ project.academic_level.name }}
            </p>
        </div> 
        <div class="btn-group" role="group">
            <a href="{% url 'exams:combined_report_olevel_print' project_id=project.id %}" class="btn btn-secondary">
                <i class="fas fa-print me-2"></i>Print Report
            </a>
            <a href="{% url 'exams:combined_report_olevel_excel' project.id %}" class="btn btn-success">
                <i class="fas fa-file-excel me-2"></i>Export to Excel
            </a>
            <a href="{% url 'exams:project_list' %}" class="btn btn-primary">
                <i class="fas fa-arrow-left me-2"></i>Back
            </a>
        </div>
    </div>

    <!-- ==================== PAGE 1: COVER + SUMMARY ==================== -->
    <div class="page-cover">
        <!-- Summary Cards -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    <i class="fas fa-users me-1"></i> Registered Students
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ registered_total }}</div>
                                <small>F: {{ registered_f }} | M: {{ registered_m }}</small>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-users fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    <i class="fas fa-check-circle me-1"></i> Pass Rate (I-III)
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ gender_div.T.percent_I_III }}%</div>
                                <small>Div I-III: {{ gender_div.T.total_I_III }} / {{ gender_div.T.total_sat }}</small>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    <i class="fas fa-check-circle me-1"></i> Pass Rate (I-IV)
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ gender_div.T.percent_I_IV }}%</div>
                                <small>Div I-IV: {{ gender_div.T.total_I_IV }} / {{ gender_div.T.total_sat }}</small>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    <i class="fas fa-chart-bar me-1"></i> Overall GPA
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ overall_table.overall_gpa|floatformat:4 }}</div>
                                <small>Subject: {{ overall_table.subject_gpa|floatformat:4 }} | Div: {{ overall_table.division_gpa|floatformat:4 }}</small>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-chart-bar fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>      
        </div>














<!-- ==================== PAGE 1: COVER + SUMMARY ==================== -->
<div class="page-cover">
    
    <!-- School Statistics Row -->
<!-- School Statistics Row -->
<div class="row mb-4">
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card border-left-dark shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-dark text-uppercase mb-1">
                            <i class="fas fa-school me-1"></i> TOTAL SCHOOLS
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_schools_count }}</div>
                        <small>{{ total_students_count }} Students</small>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-building fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            <i class="fas fa-landmark me-1"></i> GOVERNMENT SCHOOLS
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ govt_schools_count }}</div>
                        <small>{{ govt_students_count }} Students</small>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-university fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card border-left-warning shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                            <i class="fas fa-church me-1"></i> NON-GOVERNMENT SCHOOLS
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ nongvt_schools_count }}</div>
                        <small>{{ nongvt_students_count }} Students</small>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-building fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>






        <!-- Registration Summary Table -->
        <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-table me-2"></i>Registration & Attendance Summary
                </h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-center" width="100%">
                        <thead class="table-gradient">
                            <tr>
                                <th>Description</th>
                                <th>Female</th>
                                <th>Male</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="fw-bold">Registered Students</td>
                                <td>{{ registered_f }}</td>
                                <td>{{ registered_m }}</td>
                                <td class="fw-bold bg-light">{{ registered_total }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Students Who Sat</td>
                                <td>{{ sat_f }}</td>
                                <td>{{ sat_m }}</td>
                                <td class="fw-bold bg-light">{{ sat_total }}</td>
                            </tr>
                            <tr>
                                <td class="fw-bold">Absentees</td>
                                <td class="text-danger">{{ absent_f }}</td>
                                <td class="text-danger">{{ absent_m }}</td>
                                <td class="fw-bold bg-light text-danger">{{ absent_total }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- Attendance Rate -->
                <div class="alert alert-info mt-3 text-center">
                    <strong>Attendance Rate:</strong> 
                    {% widthratio sat_total registered_total 100 %}% 
                    ({{ sat_total }} out of {{ registered_total }} students)
                </div>
            </div>
        </div>

        <!-- GPA Summary -->
        <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-chart-line me-2"></i>GPA Performance Summary
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 text-center">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h5 class="card-title">Subject GPA</h5>
                                <h2 class="text-primary">{{ overall_table.subject_gpa|floatformat:4 }}</h2>
                                <small class="text-muted">Based on A=1, B=2, C=3, D=4, F=5</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h5 class="card-title">Division GPA</h5>
                                <h2 class="text-success">{{ overall_table.division_gpa|floatformat:4 }}</h2>
                                <small class="text-muted">Based on I=1, II=2, III=3, IV=4, 0=5</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="card bg-primary text-white">
                            <div class="card-body">
                                <h5 class="card-title">Overall GPA</h5>
                                <h2>{{ overall_table.overall_gpa|floatformat:4 }}</h2>
                                <small>(Subject GPA + Division GPA) ÷ 2</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== PAGE 2: DIVISION BY GENDER ==================== -->
    <div class="page-break">
        <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-venus-mars me-2"></i>Division Performance by Gender
                </h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-center" width="100%">
                        <thead class="table-gradient">
                            <tr>
                                <th rowspan="2">SEX</th>
                                <th colspan="5">Division Counts</th>
                                <th colspan="2">I - III</th>
                                <th colspan="2">I - IV</th>
                                <th rowspan="2">Total SAT</th>
                            </tr>
                            <tr class="table-gradient-sub">
                                <th>I</th><th>II</th><th>III</th><th>IV</th><th>0</th>
                                <th>Total</th><th>%</th>
                                <th>Total</th><th>%</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sex in "FMT" %}
                            <tr {% if sex == 'T' %}class="table-active fw-bold"{% endif %}>
                                <td class="fw-bold">
                                    {% if sex == 'F' %}FEMALE
                                    {% elif sex == 'M' %}MALE
                                    {% else %}TOTAL
                                    {% endif %}
                                </td>
                                <td>{{ gender_div|get_item:sex|get_item:"I" }}</td>
                                <td>{{ gender_div|get_item:sex|get_item:"II" }}</td>
                                <td>{{ gender_div|get_item:sex|get_item:"III" }}</td>
                                <td>{{ gender_div|get_item:sex|get_item:"IV" }}</td>
                                <td>{{ gender_div|get_item:sex|get_item:"0" }}</td>
                                
                                <td class="fw-bold">{{ gender_div|get_item:sex|get_item:"total_I_III" }}</td>
                                <td>{{ gender_div|get_item:sex|get_item:"percent_I_III" }}%</td>
                                
                                <td class="fw-bold">{{ gender_div|get_item:sex|get_item:"total_I_IV" }}</td>
                                <td>{{ gender_div|get_item:sex|get_item:"percent_I_IV" }}%</td>
                                
                                <td>{{ gender_div|get_item:sex|get_item:"total_sat" }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== PAGE 3: BEST SCHOOLS ==================== -->
    <div class="page-break">
        <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-trophy me-2"></i>Top Performing Schools
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 mb-4">
                        <h5 class="text-primary">🏆 TOP 10 SCHOOLS OVERALL</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead class="bg-primary text-white">
                                    <tr><th>#</th><th>CODE</th><th>SCHOOL NAME</th><th>DISTRICT</th><th>OWNER</th><th>SAT</th><th>GPA</th><th>GRADE</th></tr>
                                </thead>
                                <tbody>
                                    {% for s in best_10_all %}
                                    <tr>
                                        <td class="text-center">{{ forloop.counter }}</td>
                                        <td>{{ s.school.school_code }}</td>
                                        <td>{{ s.school.name_short|default:s.school.name|truncatechars:35 }}</td>
                                        <td>{{ s.school.district.name }}</td>
                                        <td>{{ s.school.ownership }}</td>
                                        <td class="text-center">{{ s.with_results }}</td>
                                        <td class="text-center fw-bold">{{ s.gpa|floatformat:4 }}</td>
                                        <td class="text-center">{{ s.gpa_grade|default:"-" }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <h5 class="text-success">🏆 TOP 10 GOVERNMENT SCHOOLS</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead class="bg-success text-white">
                                    <tr><th>#</th><th>CODE</th><th>SCHOOL</th><th>GPA</th></tr>
                                </thead>
                                <tbody>
                                    {% for s in best_10_gvt %}
                                    <tr>
                                        <td class="text-center">{{ forloop.counter }}</td>
                                        <td>{{ s.school.school_code }}</td>
                                        <td>{{ s.school.name_short|truncatechars:30 }}</td>
                                        <td class="text-center">{{ s.gpa|floatformat:4 }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <h5 class="text-warning">🏆 TOP 10 NON-GOVERNMENT SCHOOLS</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead class="bg-warning">
                                    <tr><th>#</th><th>CODE</th><th>SCHOOL</th><th>GPA</th></tr>
                                </thead>
                                <tbody>
                                    {% for s in best_10_nongvt %}
                                    <tr>
                                        <td class="text-center">{{ forloop.counter }}</td>
                                        <td>{{ s.school.school_code }}</td>
                                        <td>{{ s.school.name_short|truncatechars:30 }}</td>
                                        <td class="text-center">{{ s.gpa|floatformat:4 }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- Schools with 30+ and less than 30 candidates -->
                <div class="row mt-4">
                    <div class="col-md-6">
                        <h5 class="text-success">📊 TOP 10 SCHOOLS WITH 30+ CANDIDATES</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead class="bg-success text-white">
                                    <tr><th>#</th><th>CODE</th><th>SCHOOL</th><th>SAT</th><th>GPA</th></tr>
                                </thead>
                                <tbody>
                                    {% for s in best_40_std_andabove %}
                                    <tr>
                                        <td class="text-center">{{ forloop.counter }}</td>
                                        <td>{{ s.school.school_code }}</td>
                                        <td>{{ s.school.name_short|truncatechars:25 }}</td>
                                        <td class="text-center">{{ s.total_sat }}</td>
                                        <td class="text-center">{{ s.gpa|floatformat:4 }}</td>
                                    </tr>
                                    {% empty %}
                                    <tr><td colspan="5" class="text-center">No schools with 30+ candidates</td></tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <h5 class="text-warning">📋 TOP 10 SCHOOLS WITH LESS THAN 30 CANDIDATES</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead class="bg-warning">
                                    <tr><th>#</th><th>CODE</th><th>SCHOOL</th><th>SAT</th><th>GPA</th></tr>
                                </thead>
                                <tbody>
                                    {% for s in best_40_less %}
                                    <tr>
                                        <td class="text-center">{{ forloop.counter }}</td>
                                        <td>{{ s.school.school_code }}</td>
                                        <td>{{ s.school.name_short|truncatechars:25 }}</td>
                                        <td class="text-center">{{ s.total_sat }}</td>
                                        <td class="text-center">{{ s.gpa|floatformat:4 }}</td>
                                    </tr>
                                    {% empty %}
                                    <tr><td colspan="5" class="text-center">No schools with less than 30 candidates</td></tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== PAGE 4: BEST STUDENTS ==================== -->
    <div class="page-break">
        <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-user-graduate me-2"></i>Top Performing Students
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 mb-4">
                        <h5 class="text-primary">👨‍🎓 TOP 10 STUDENTS OVERALL</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead class="bg-primary text-white">
                                    <tr><th>#</th><th>CAND NO</th><th>NAME</th><th>SEX</th><th>SCHOOL</th><th>POINTS</th><th>DIV</th></tr>
                                </thead>
                                <tbody>
                                    {% for s in best_students %}
                                    <tr>
                                        <td class="text-center">{{ forloop.counter }}</td>
                                        <td>{{ s.student.student_number }}</td>
                                        <td>{{ s.student.full_name|truncatechars:25 }}</td>
                                        <td class="text-center">{{ s.student.sex }}</td>
                                        <td>{{ s.student.school.name_short|truncatechars:30 }}</td>
                                        <td class="text-center fw-bold">{{ s.total_points }}</td>
                                        <td class="text-center">{{ s.division }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <h5 class="text-success">👧 TOP 10 GIRLS</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead class="bg-success text-white">
                                    <tr><th>#</th><th>NAME</th><th>SCHOOL</th><th>POINTS</th></tr>
                                </thead>
                                <tbody>
                                    {% for s in best_girls %}
                                    <tr>
                                        <td class="text-center">{{ forloop.counter }}</td>
                                        <td>{{ s.student.full_name|truncatechars:25 }}</td>
                                        <td>{{ s.student.school.name_short|truncatechars:25 }}</td>
                                        <td class="text-center">{{ s.total_points }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <h5 class="text-info">👦 TOP 10 BOYS</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead class="bg-info text-white">
                                    <tr><th>#</th><th>NAME</th><th>SCHOOL</th><th>POINTS</th></tr>
                                </thead>
                                <tbody>
                                    {% for s in best_boys %}
                                    <tr>
                                        <td class="text-center">{{ forloop.counter }}</td>
                                        <td>{{ s.student.full_name|truncatechars:25 }}</td>
                                        <td>{{ s.student.school.name_short|truncatechars:25 }}</td>
                                        <td class="text-center">{{ s.total_points }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== PAGE 5: SUBJECT PERFORMANCE ==================== -->
    <div class="page-break">
        <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-book me-2"></i>Subject Performance Summary
                </h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-sm" width="100%">
                        <thead class="table-gradient">
                            <tr>
                                <th>CODE</th>
                                <th>SUBJECT</th>
                                <th>SAT</th>
                                <th>A</th>
                                <th>B</th>
                                <th>C</th>
                                <th>D</th>
                                <th>F</th>
                                <th>PASS (A-D)</th>
                                <th>%</th>
                                <th>GPA</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for subject in processed_subject_summary %}
                            <tr>
                                <td class="fw-bold">{{ subject.subject_code }}</td>
                                <td>{{ subject.subject_name }}</td>
                                <td class="text-center">{{ subject.sat }}</td>
                                <td class="text-center bg-success text-white">{{ subject.A }}</td>
                                <td class="text-center bg-info text-white">{{ subject.B }}</td>
                                <td class="text-center bg-primary text-white">{{ subject.C }}</td>
                                <td class="text-center bg-warning">{{ subject.D }}</td>
                                <td class="text-center bg-danger text-white">{{ subject.F }}</td>
                                <td class="text-center fw-bold">{{ subject.pass_total }}</td>
                                <td class="text-center">{{ subject.pass_percent }}%</td>
                                <td class="text-center fw-bold">{{ subject.subject_gpa|floatformat:4 }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot class="table-active">
                            <tr class="fw-bold">
                                <td colspan="2" class="text-end">TOTAL / AVERAGE:</td>
                                <td class="text-center">{{ subject_totals.sat }}</td>
                                <td class="text-center">{{ subject_totals.A }}</td>
                                <td class="text-center">{{ subject_totals.B }}</td>
                                <td class="text-center">{{ subject_totals.C }}</td>
                                <td class="text-center">{{ subject_totals.D }}</td>
                                <td class="text-center">{{ subject_totals.F }}</td>
                                <td class="text-center">{{ subject_totals.A|add:subject_totals.B|add:subject_totals.C|add:subject_totals.D }}</td>
                                <td class="text-center">{{ subject_totals.overall_pass_percent }}%</td>
                                <td class="text-center">-</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                
                <!-- GPA Scale Note -->
                <div class="alert alert-secondary mt-3">
                    <strong>📊 GPA Scale (O-Level):</strong> A=1, B=2, C=3, D=4, F=5 | <strong>Lower GPA indicates better performance</strong>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="text-center text-muted mt-4 pt-3 border-top">
        <small>Generated on {% now "F j, Y H:i:s" %} | {{ project.name }} ({{ project.year }}) | O-Level Combined Report</small>
    </div>

</div>

<style>
    /* Print Styles */
    @media print {
        .btn, .btn-group, .no-print, .card-header .btn {
            display: none !important;
        }
        .card {
            break-inside: avoid;
            page-break-inside: avoid;
            box-shadow: none !important;
            border: 1px solid #ddd !important;
        }
        .page-break {
            page-break-before: always;
        }
        .page-cover {
            page-break-after: avoid;
        }
        .table {
            font-size: 9pt;
        }
        .bg-success, .bg-info, .bg-primary, .bg-warning, .bg-danger, .table-gradient {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
        a[href]:after {
            content: none !important;
        }
        body {
            padding: 0;
            margin: 0;
        }
        .container-fluid {
            padding: 0;
        }
    }
    
    /* Screen Styles */
    .border-left-primary { border-left: 4px solid #4e73df; }
    .border-left-success { border-left: 4px solid #1cc88a; }
    .border-left-warning { border-left: 4px solid #f6c23e; }
    .border-left-info { border-left: 4px solid #36b9cc; }
    
    .card {
        border-radius: 12px;
        overflow: hidden;
    }
    
    .table-gradient {
        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        color: white;
    }
    
    .table-gradient th {
        color: white !important;
        background: transparent !important;
    }
    
    .table-gradient-sub {
        background: linear-gradient(135deg, #2a5298 0%, #3a6cb0 100%);
        color: white;
    }
    
    .table-gradient-sub th {
        color: white !important;
        background: transparent !important;
    }
    
    @media print {
        .page-break {
            page-break-before: always;
        }
    }
</style>

{% endblock %}