{% extends "base.html" %}

{% block title %}{{ project.name }} - {{ app_name }{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div class="d-flex align-items-center">
                    <div>
                        <nav aria-label="breadcrumb" class="mb-1">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ url_for('projects.list_projects') }}">{{ _('Projects') }}</a></li>
                                <li class="breadcrumb-item active">{{ project.name }}</li>
                            </ol>
                        </nav>
                        <h1 class="h3 mb-0 me-3">
                            <i class="fas fa-project-diagram text-primary"></i>
                            {{ project.name }}
                        </h1>
                    </div>
                    <div class="ms-3">
                        {% if project.status == 'active' %}
                        <span class="status-badge bg-success text-white"><i class="fas fa-check-circle me-2"></i>{{ _('Active') }}</span>
                        {% else %}
                        <span class="status-badge bg-secondary text-white"><i class="fas fa-archive me-2"></i>{{ _('Archived') }}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="btn-group" role="group">
                    {% if current_user.is_admin %}
                    <a href="{{ url_for('projects.edit_project', project_id=project.id) }}" class="btn btn-secondary">
                        <i class="fas fa-edit me-1"></i> {{ _('Edit') }}
                    </a>
                    {% endif %}
                    <a href="{{ url_for('main.dashboard') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i> {{ _('Back') }}
                    </a>
                    <!-- Start Timer removed on project page -->
                </div>
            </div>
        </div>
    </div>

    <!-- Project Details -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="invoice-section">
                                <h6 class="section-title text-primary mb-3">
                                    <i class="fas fa-info-circle me-2"></i>{{ _('General') }}
                                </h6>
                                <div class="detail-row"><span class="detail-label">{{ _('Name') }}</span><span class="detail-value">{{ project.name }}</span></div>
                                <div class="detail-row"><span class="detail-label">{{ _('Client') }}</span>
                                    <span class="detail-value">
                                        {% if project.client_obj %}
                                        <a href="{{ url_for('clients.view_client', client_id=project.client_id) }}">{{ project.client_obj.name }}</a>
                                        {% else %}<span class="text-muted">-</span>{% endif %}
                                    </span>
                                </div>
                                <div class="detail-row"><span class="detail-label">{{ _('Status') }}</span>
                                    <span class="detail-value">{% if project.status == 'active' %}{{ _('Active') }}{% else %}{{ _('Archived') }}{% endif %}</span>
                                </div>
                                <div class="detail-row"><span class="detail-label">{{ _('Created') }}</span><span class="detail-value">{{ project.created_at.strftime('%B %d, %Y') }}</span></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="invoice-section">
                                <h6 class="section-title text-primary mb-3">
                                    <i class="fas fa-cog me-2"></i>{{ _('Billing') }}
                                </h6>
                                <div class="detail-row"><span class="detail-label">{{ _('Billable') }}</span>
                                    <span class="detail-value">{% if project.billable %}{{ _('Yes') }}{% else %}{{ _('No') }}{% endif %}</span>
                                </div>
                                {% if project.billable and project.hourly_rate %}
                                <div class="detail-row"><span class="detail-label">{{ _('Hourly Rate') }}</span><span class="detail-value">{{ currency }} {{ "%.2f"|format(project.hourly_rate) }}</span></div>
                                {% endif %}
                                {% if project.billing_ref %}
                                <div class="detail-row"><span class="detail-label">{{ _('Billing Ref') }}</span><span class="detail-value">{{ project.billing_ref }}</span></div>
                                {% endif %}
                                <div class="detail-row"><span class="detail-label">{{ _('Last Updated') }}</span><span class="detail-value">{{ project.updated_at.strftime('%B %d, %Y') }}</span></div>
                            </div>
                        </div>
                    </div>
                    
                    {% if project.description %}
                    <div class="mt-3">
                        <h6 class="section-title text-primary mb-2">{{ _('Description') }}</h6>
                        <div class="content-box">{{ project.description }}</div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-light py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-bar me-2"></i>{{ _('Statistics') }}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="h4 text-primary">{{ "%.1f"|format(project.total_hours) }}</div>
                            <small class="text-muted">{{ _('Total Hours') }}</small>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="h4 text-success">{{ "%.1f"|format(project.total_billable_hours) }}</div>
                            <small class="text-muted">{{ _('Billable Hours') }}</small>
                        </div>
                        {% if project.billable and project.hourly_rate %}
                        <div class="col-12">
                            <div class="h4 text-success">{{ currency }} {{ "%.2f"|format(project.estimated_cost) }}</div>
                            <small class="text-muted">{{ _('Estimated Cost') }}</small>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            {% if project.billable and project.hourly_rate %}
            <div class="card mt-3 shadow-sm border-0">
                <div class="card-header bg-light py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-users me-2"></i>{{ _('User Breakdown') }}
                    </h6>
                </div>
                <div class="card-body">
                    {% for user_total in project.get_user_totals() %}
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>{{ user_total.username }}</span>
                        <span class="text-primary">{{ "%.1f"|format(user_total.total_hours) }}h</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Tasks -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-tasks"></i> {{ _('Tasks') }}
                    </h5>
                    <div>
                        <a href="{{ url_for('tasks.create_task') }}?project_id={{ project.id }}" class="btn-header btn-primary">
                            <i class="fas fa-plus"></i> {{ _('New Task') }}
                        </a>
                        <a href="{{ url_for('tasks.list_tasks', project_id=project.id) }}" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-list"></i> {{ _('View All') }}
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    {% set project_tasks = tasks %}
                    {% include 'tasks/_kanban.html' with context %}
                    {% if not tasks %}
                    <div class="mt-3">
                        {% from "_components.html" import empty_state %}
                        {% set actions %}
                        <a href="{{ url_for('tasks.create_task') }}?project_id={{ project.id }}" class="btn btn-success btn-sm">
                            <i class="fas fa-plus"></i> {{ _('Create First Task') }}
                        </a>
                        {% endset %}
                        {{ empty_state('fas fa-tasks', _('No Tasks Yet'), _('Break down this project into manageable tasks to track progress.'), actions) }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Comments -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-comments me-2"></i>{{ _('Project Comments') }}
                    </h6>
                </div>
                <div class="card-body">
                    {% include 'comments/_comments_section.html' with context %}
                </div>
            </div>
        </div>
    </div>

    <!-- Time Entries -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-clock me-2"></i>{{ _('Time Entries') }}
                    </h6>
                    <a href="{{ url_for('reports.project_report', project_id=project.id) }}" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-chart-line"></i> {{ _('View Report') }}
                    </a>
                </div>
                <div class="card-body">
                    {% if entries %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>{{ _('User') }}</th>
                                    <th>{{ _('Date') }}</th>
                                    <th>{{ _('Time') }}</th>
                                    <th>{{ _('Duration') }}</th>
                                    <th>{{ _('Notes') }}</th>
                                    <th>{{ _('Tags') }}</th>
                                    <th>{{ _('Billable') }}</th>
                                    <th>{{ _('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for entry in entries %}
                                <tr>
                                    <td>{{ entry.user.display_name }}</td>
                                                                <td>{{ entry.start_time.strftime('%Y-%m-%d') }}</td>
                            <td>
                                {{ entry.start_time.strftime('%H:%M') }} -
                                {% if entry.end_time %}
                                {{ entry.end_time.strftime('%H:%M') }}
                                {% else %}
                                <span class="text-warning">{{ _('Running') }}</span>
                                {% endif %}
                            </td>
                                    <td>
                                        <strong>{{ entry.duration_formatted }}</strong>
                                    </td>
                                    <td>
                                        {% if entry.notes %}
                                        <span title="{{ entry.notes }}">{{ entry.notes[:50] }}{% if entry.notes|length > 50 %}...{% endif %}</span>
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if entry.tag_list %}
                                        {% for tag in entry.tag_list %}
                                        <span class="badge bg-light text-dark">{{ tag }}</span>
                                        {% endfor %}
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if entry.billable %}
                                        <span class="badge bg-success">{{ _('Yes') }}</span>
                                        {% else %}
                                        <span class="badge bg-secondary">{{ _('No') }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ url_for('timer.edit_timer', timer_id=entry.id) }}" 
                                               class="btn btn-sm btn-action btn-action--edit" title="{{ _('Edit') }}">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            {% if current_user.is_admin or entry.user_id == current_user.id %}
                                            <button type="button" class="btn btn-sm btn-action btn-action--danger" title="{{ _('Delete') }}" 
                                                    onclick="showDeleteEntryModal('{{ entry.id }}', '{{ entry.project.name }}', '{{ entry.duration_formatted }}')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Pagination -->
                    {% if pagination.pages > 1 %}
                    <nav aria-label="Time entries pagination">
                        <ul class="pagination justify-content-center">
                            {% if pagination.has_prev %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('projects.view_project', project_id=project.id, page=pagination.prev_num) }}">{{ _('Previous') }}</a>
                            </li>
                            {% endif %}
                            
                            {% for page_num in pagination.iter_pages() %}
                                {% if page_num %}
                                    {% if page_num != pagination.page %}
                                    <li class="page-item">
                                        <a class="page-link" href="{{ url_for('projects.view_project', project_id=project.id, page=page_num) }}">{{ page_num }}</a>
                                    </li>
                                    {% else %}
                                    <li class="page-item active">
                                        <span class="page-link">{{ page_num }}</span>
                                    </li>
                                    {% endif %}
                                {% else %}
                                <li class="page-item disabled">
                                    <span class="page-link">…</span>
                                </li>
                                {% endif %}
                            {% endfor %}
                            
                            {% if pagination.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('projects.view_project', project_id=project.id, page=pagination.next_num) }}">{{ _('Next') }}</a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                    {% else %}
                    {% from "_components.html" import empty_state %}
                    {{ empty_state('fas fa-clock', _('No Time Entries'), _('No time has been tracked for this project yet.')) }}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Time Entry Modal -->
<div class="modal fade" id="deleteEntryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-trash me-2 text-danger"></i>{{ _('Delete Time Entry') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>{{ _('Warning:') }}</strong> {{ _('This action cannot be undone.') }}
                </div>
                <p>{{ _('Are you sure you want to delete the time entry for') }} <strong id="deleteEntryProjectName"></strong>?</p>
                <p class="text-muted mb-0">{{ _('Duration:') }} <strong id="deleteEntryDuration"></strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>{{ _('Cancel') }}
                </button>
                <form method="POST" id="deleteEntryForm" class="d-inline">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-2"></i>{{ _('Delete Entry') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Delete Comment Modal -->
<div class="modal fade" id="deleteCommentModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-trash me-2 text-danger"></i>{{ _('Delete Comment') }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>{{ _('Warning:') }}</strong> {{ _('This action cannot be undone.') }}
                </div>
                <p>{{ _('Are you sure you want to delete this comment?') }}</p>
                <div id="comment-preview" class="bg-light p-3 rounded mt-3" style="display: none;">
                    <div class="text-muted small mb-1">{{ _('Comment preview:') }}</div>
                    <div id="comment-preview-text"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>{{ _('Cancel') }}
                </button>
                <form method="POST" id="deleteCommentForm" class="d-inline">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-2"></i>{{ _('Delete Comment') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Function to show delete time entry modal
function showDeleteEntryModal(entryId, projectName, duration) {
    document.getElementById('deleteEntryProjectName').textContent = projectName;
    document.getElementById('deleteEntryDuration').textContent = duration;
    document.getElementById('deleteEntryForm').action = "{{ url_for('timer.delete_timer', timer_id=0) }}".replace('0', entryId);
    new bootstrap.Modal(document.getElementById('deleteEntryModal')).show();
}

// Add loading state to delete entry form
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('deleteEntryForm').addEventListener('submit', function(e) {
        const submitBtn = this.querySelector('button[type="submit"]');
        submitBtn.innerHTML = '<div class="loading-spinner me-2"></div>{{ _('Deleting...') }}';
        submitBtn.disabled = true;
    });
});
</script>

<!-- Modern styling now handled by global CSS in base.css -->
{% endblock %}
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.task-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
    transition: left 1.2s;
    pointer-events: none;
    z-index: 1;
}

.task-card:hover::before {
    left: 100%;
}

.task-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: var(--primary-color);
}

/* Status Badge System */
.status-badge, .priority-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-badge::before, .priority-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.8s;
}

.status-badge:hover::before, .priority-badge:hover::before {
    left: 100%;
}

.status-badge:hover, .priority-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.status-todo {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #475569;
    border: 1px solid #94a3b8;
}

.status-in_progress {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
}

.status-review {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.status-done {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #22c55e;
}

.status-cancelled {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

.priority-low {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #22c55e;
}

.priority-medium {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #eab308;
}

.priority-high {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    color: #c2410c;
    border: 1px solid #f97316;
}

.priority-urgent {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #ef4444;
}

/* Priority Card Borders */
.task-card.priority-low {
    border-left: 4px solid #22c55e;
}

.task-card.priority-medium {
    border-left: 4px solid #eab308;
}

.task-card.priority-high {
    border-left: 4px solid #f97316;
}

.task-card.priority-urgent {
    border-left: 4px solid #ef4444;
}

/* Enhanced Task Card Elements */
.task-title-link {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    position: relative;
}

.task-title-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.task-title-link:hover::after {
    width: 100%;
}

.task-title-link:hover {
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

.task-description {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    padding: 12px;
    border-left: 3px solid var(--primary-color);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.task-description::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.8s;
}

.task-description:hover::before {
    left: 100%;
}

.task-description:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.task-meta-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 4px 0;
}

.task-meta-item:hover {
    transform: translateX(4px);
}

.task-meta-item .bg-opacity-10 {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.task-meta-item:hover .bg-opacity-10 {
    transform: scale(1.1);
}

/* Progress Bar */
.progress {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Button Group Enhancements */
.btn-group .btn {
    flex: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-group .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-group .btn:hover::before {
    left: 100%;
}

.btn-group .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ===== DARK MODE ===== */
[data-theme="dark"] .task-card {
    background: #0f172a;
    border-color: #1f2a44;
}

[data-theme="dark"] .task-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

[data-theme="dark"] .task-description {
    background: linear-gradient(135deg, #1f2a44 0%, #374151 100%);
    border-left-color: var(--primary-color);
}

[data-theme="dark"] .task-description:hover {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}

[data-theme="dark"] .task-title-link {
    color: #e5e7eb !important;
}

[data-theme="dark"] .task-title-link:hover {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .progress {
    background: linear-gradient(135deg, #1f2a44 0%, #374151 100%);
}

[data-theme="dark"] .status-todo {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    color: #9ca3af;
    border-color: #6b7280;
}

[data-theme="dark"] .status-in_progress {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    color: #fbbf24;
    border-color: #f59e0b;
}

[data-theme="dark"] .status-review {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    color: #60a5fa;
    border-color: #3b82f6;
}

[data-theme="dark"] .status-done {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%);
    color: #4ade80;
    border-color: #22c55e;
}

[data-theme="dark"] .status-cancelled {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    color: #f87171;
    border-color: #ef4444;
}

[data-theme="dark"] .priority-low {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%);
    color: #4ade80;
    border-color: #22c55e;
}

[data-theme="dark"] .priority-medium {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    color: #fbbf24;
    border-color: #eab308;
}

[data-theme="dark"] .priority-high {
    background: linear-gradient(135deg, #7c2d12 0%, #c2410c 100%);
    color: #fb923c;
    border-color: #f97316;
}

[data-theme="dark"] .priority-urgent {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    color: #f87171;
    border-color: #ef4444;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .task-card {
        margin-bottom: 1rem;
    }
    
    .status-badge, .priority-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
    
    .task-description {
        padding: 8px;
    }
}

@media (max-width: 576px) {
    .task-card {
        border-radius: 8px;
    }
    
    .status-badge, .priority-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.5rem;
    }
    
    .task-title-link {
        font-size: 0.9rem;
    }
}
</style>
<style>
.status-badge {
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invoice-section { padding: 12px 0; }
.section-title { font-size: 16px; font-weight: 600; border-bottom: 2px solid var(--primary-color); padding-bottom: 8px; }
.detail-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding:8px 0; border-bottom:1px solid var(--border-color); }
.detail-label { font-weight:600; color:var(--text-secondary); }
.detail-value { font-weight:600; color:var(--text-primary); }
.content-box { background: var(--light-color); padding: 16px; border-radius: 8px; border-left: 4px solid var(--primary-color); line-height: 1.6; }

@media (max-width:768px){
  .detail-row{flex-direction:column; align-items:flex-start; gap:4px;}
}
</style>
{% endblock %}
