{% extends "base_page.html" %}

{% block title %}Monthly Attendance Control{% endblock %}

{% block page_title %}Monthly Attendance Control{% endblock %}

{% block content %}
<!-- Category Tabs -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-pills nav-fill category-tabs" id="categoryTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if not request.args.get('category') or request.args.get('category') == 'active' %}active{% endif %}" 
                                id="active-tab" 
                                onclick="changeCategory('active')" 
                                type="button">
                            <i class="fas fa-briefcase me-2"></i>Administrative
                            <span class="badge bg-primary ms-2">{{ category_counts.active or 0 }}</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if request.args.get('category') == 'school' %}active{% endif %}" 
                                id="school-tab" 
                                onclick="changeCategory('school')" 
                                type="button">
                            <i class="fas fa-school me-2"></i>School Department
                            <span class="badge bg-info ms-2">{{ category_counts.school or 0 }}</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {% if request.args.get('category') == 'teachers' %}active{% endif %}" 
                                id="teachers-tab" 
                                onclick="changeCategory('teachers')" 
                                type="button">
                            <i class="fas fa-chalkboard-teacher me-2"></i>Teachers
                            <span class="badge bg-success ms-2">{{ category_counts.teachers or 0 }}</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Filter Card -->
<div class="card mb-4">
    <div class="card-header">
        <h5 class="card-title">
            <i class="fas fa-filter me-2"></i>
            Filter Options
        </h5>
    </div>
    <div class="card-body">
        <form method="GET" id="attendance-form">
            <div class="row g-3 align-items-end">
                <div class="col-lg-2 col-md-3 col-sm-6">
                    <label for="month" class="form-label">Month</label>
                    <select name="month" id="month" class="form-select">
                        {% for m_id, m_name in months %}
                        <option value="{{ m_id }}" {% if m_id == current_selection.month %} selected{% endif %}>{{ m_name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-lg-2 col-md-3 col-sm-6">
                    <label for="year" class="form-label">Year</label>
                    <select name="year" id="year" class="form-select">
                        {% for y in years %}
                        <option value="{{ y }}" {% if y == current_selection.year %} selected{% endif %}>{{ y }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-lg-4 col-md-4 col-sm-8">
                    <label for="search-input" class="form-label">Search Employee</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-search"></i>
                        </span>
                        <input type="text" id="search-input" name="search" class="form-control"
                               placeholder="Type to search employee"
                               value="{{ current_selection.search | default('') }}">
                    </div>
                </div>

                <div class="col-lg-2 col-md-2 col-sm-4">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search me-1"></i>Filter
                    </button>
                </div>

                <div class="col-lg-2 col-md-12 col-sm-12">
                    <a id="export-link"
                       href="{{ url_for('export_monthly_attendance', month=current_selection.month, year=current_selection.year, search=current_selection.search, category=current_selection.category) }}"
                       class="btn btn-success w-100">
                        <i class="fas fa-download me-1"></i>Export CSV
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Results Card -->
<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">
                <i class="fas fa-calendar-check me-2"></i>
                Attendance Records
                <span class="badge bg-primary ms-2" id="employee-count">{{ data.total_items }} found</span>
            </h5>
            <small class="text-muted">
                <i class="fas fa-info-circle me-1"></i>
                Showing only weekdays (Monday-Friday)
            </small>
        </div>
    </div>
    
    <div class="card-body">
        {% if data.total_items > 0 %}
        <!-- Pagination Controls -->
        {% if data.total_items > data.per_page %}
        <div class="d-flex justify-content-between align-items-center mb-3">
            <span class="text-muted">Total Employees Found: {{ data.total_items }}</span>
            <div class="btn-group">
                <a href="{{ url_for('attendance', month=current_selection.month, year=current_selection.year, search=current_selection.search, category=current_selection.category, page=data.current_page - 1) }}"
                   class="btn btn-outline-primary {% if data.current_page <= 1 %}disabled{% endif %}">
                    <i class="fas fa-chevron-left"></i> Previous
                </a>
                <span class="btn btn-outline-secondary disabled">
                    Page {{ data.current_page }} of {{ data.total_pages }}
                </span>
                <a href="{{ url_for('attendance', month=current_selection.month, year=current_selection.year, search=current_selection.search, category=current_selection.category, page=data.current_page + 1) }}"
                   class="btn btn-outline-primary {% if data.current_page >= data.total_pages %}disabled{% endif %}">
                    Next <i class="fas fa-chevron-right"></i>
                </a>
            </div>
        </div>
        {% endif %}

        <!-- Attendance Table -->
        {% if data.logs %}
        <div class="table-responsive">
            <table class="table table-hover attendance-table">
                <thead>
                    <tr>
                        <th class="name-cell sticky-column">Employee</th>
                        {% for day in data.headers %}
                            {% set day_date = data.current_year ~ '-' ~ '%02d'|format(current_selection.month) ~ '-' ~ '%02d'|format(day) %}
                            {% set day_obj = day_date|string|str_to_date %}
                            {% set is_week_start = day_obj.weekday() == 0 %}
                            <th class="text-center {% if day_obj.weekday() >= 5 %}weekend{% else %}weekday{% endif %} {% if is_week_start %}week-start{% endif %}">
                                <div class="day-header">
                                    <strong>{{ day }}</strong>
                                    <br>
                                    <small class="text-muted">{{ day_obj.strftime('%a') }}</small>
                                </div>
                            </th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for log in data.logs %}
                    <tr class="attendance-row">
                        <td class="name-cell sticky-column">
                            <a href="{{ url_for('employees') }}?search={{ log.name | urlencode }}"
                               class="employee-name-link text-decoration-none">
                                <div class="d-flex align-items-center">
                                    {% if log.photo_path %}
                                        <img src="{{ log.photo_path }}" 
                                             alt="{{ log.name }} Photo" 
                                             class="employee-photo me-2"
                                             onerror="this.style.display='none'; this.nextElementSibling.style.display='inline-flex';">
                                        <div class="employee-avatar me-2" style="display: none;">
                                            {{ log.name[0].upper() }}
                                        </div>
                                    {% else %}
                                        <div class="employee-avatar me-2">
                                            {{ log.name[0].upper() }}
                                        </div>
                                    {% endif %}
                                    <strong>{{ log.name }}</strong>
                                </div>
                            </a>
                        </td>
                        {% for day in data.headers %}
                            {% set status_index = loop.index0 %}
                            {% set status = log.days[status_index] %}
                            {% set day_date = data.current_year ~ '-' ~ '%02d'|format(current_selection.month) ~ '-' ~ '%02d'|format(day) %}
                            {% set day_obj = day_date|string|str_to_date %}
                            {% set is_week_start = day_obj.weekday() == 0 %}
                            <td class="status-cell text-center {% if day_obj.weekday() >= 5 %}weekend-cell{% endif %} {% if is_week_start %}week-start-cell{% endif %}"
                                data-employee="{{ log.id }}"
                                data-date="{{ day_date }}"
                                data-employee-name="{{ log.name }}"
                                data-day="{{ day }}"
                                {% if day_obj.weekday() < 5 %}onclick="openNoteModal('{{ log.id }}', '{{ log.name }}', '{{ day_date }}')"{% endif %}>

                                {% if day_obj.weekday() >= 5 %}
                                    <span class="status-indicator weekend" title="Weekend">
                                        <i class="fas fa-calendar-times"></i>
                                    </span>
                                {% elif status == 'T' %}
                                    <span class="status-indicator full-day" title="Full Day (8+ hours)">
                                        <i class="fas fa-check-circle"></i>
                                    </span>
                                {% elif status == 'E' %}
                                    <span class="status-indicator half-day" title="Partial Day (< 8 hours)">
                                        <i class="fas fa-clock"></i>
                                    </span>
                                {% elif status == 'D' %}
                                    <span class="status-indicator absence" title="Absent (No entry/exit)">
                                        <i class="fas fa-times-circle"></i>
                                    </span>
                                {% elif status == 'N' %}
                                    <span class="status-indicator no-log" title="No Log Found (Future date)">
                                        <i class="fas fa-question-circle"></i>
                                    </span>
                                {% else %}
                                    <span class="status-indicator no-log" title="Undefined Status">
                                        <i class="fas fa-question-circle"></i>
                                    </span>
                                {% endif %}
                            </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-5">
            <div class="mb-3">
                <i class="fas fa-search fa-3x text-muted"></i>
            </div>
            <h5 class="text-muted">No Data Found</h5>
            <p class="text-muted">
                {% if current_selection.search %}
                    No employees found matching "{{ current_selection.search }}" for {{ data.month_name }} {{ data.current_year }}.
                {% else %}
                    No attendance data found for {{ data.month_name }} {{ data.current_year }}.
                {% endif %}
            </p>
        </div>
        {% endif %}

        <!-- Bottom Pagination -->
        {% if data.total_items > data.per_page %}
        <div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top">
            <span class="text-muted">Total Employees Found: {{ data.total_items }}</span>
            <div class="btn-group">
                <a href="{{ url_for('attendance', month=current_selection.month, year=current_selection.year, search=current_selection.search, category=current_selection.category, page=data.current_page - 1) }}"
                   class="btn btn-outline-primary {% if data.current_page <= 1 %}disabled{% endif %}">
                    <i class="fas fa-chevron-left"></i> Previous
                </a>
                <span class="btn btn-outline-secondary disabled">
                    Page {{ data.current_page }} of {{ data.total_pages }}
                </span>
                <a href="{{ url_for('attendance', month=current_selection.month, year=current_selection.year, search=current_selection.search, category=current_selection.category, page=data.current_page + 1) }}"
                   class="btn btn-outline-primary {% if data.current_page >= data.total_pages %}disabled{% endif %}">
                    Next <i class="fas fa-chevron-right"></i>
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endif %}

<!-- Note Modal -->
<div class="modal fade" id="noteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="noteModalTitle">
                    <i class="fas fa-sticky-note me-2"></i>Add Daily Note
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <textarea id="noteTextarea" class="form-control" rows="4" 
                          placeholder="Enter note for this day..."></textarea>
            </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-primary" id="saveNoteBtn">
                    <i class="fas fa-save me-2"></i>Save Note
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Attendance Table - Clean and Compact */
.attendance-table {
    font-size: 11px;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0;
}

.attendance-table th,
.attendance-table td {
    padding: 3px 1px;
    vertical-align: middle;
    border: 1px solid rgba(139, 92, 246, 0.1);
    text-align: center;
    overflow: hidden;
}

/* Employee Name Column */
.name-cell {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    position: sticky;
    left: 0;
    background: rgba(255, 255, 255, 0.98);
    z-index: 10;
    border-right: 2px solid #8B5CF6;
    box-shadow: 2px 0 3px rgba(139, 92, 246, 0.1);
    text-align: left;
    padding: 5px 8px;
}

/* Day Headers */
.day-header {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    font-size: 9px;
    line-height: 1;
    padding: 3px 1px;
    height: 50px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.day-header strong {
    font-size: 11px;
    display: block;
    margin-bottom: 2px;
}

.day-header small {
    font-size: 8px;
    opacity: 0.7;
}

/* Status Cells */
.status-cell {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    padding: 2px 0;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
}

.status-cell:hover:not(.weekend-cell) {
    background: rgba(139, 92, 246, 0.1);
}

/* Status Indicators */
.status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 8px;
    transition: all 0.2s ease;
    font-weight: bold;
    line-height: 1;
}

.status-indicator:hover {
    transform: scale(1.1);
}

.status-indicator.full-day {
    background: #10B981;
    color: white;
}

.status-indicator.half-day {
    background: #F59E0B;
    color: white;
}

.status-indicator.absence {
    background: #EF4444;
    color: white;
}

.status-indicator.weekend {
    background: #9CA3AF;
    color: white;
}

.status-indicator.no-log {
    background: #D1D5DB;
    color: #6B7280;
}

/* Employee Info */
.employee-avatar {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 10px;
    flex-shrink: 0;
    margin-right: 6px;
}

.employee-photo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(139, 92, 246, 0.2);
}

.employee-name-link {
    color: #1F2937;
    font-weight: 500;
    font-size: 11px;
    display: flex;
    align-items: center;
    text-decoration: none;
    overflow: hidden;
}

.employee-name-link:hover {
    color: #8B5CF6;
}

.employee-name-link strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
}

/* Table Container - Scroll kaldırıldı */
.table-responsive {
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: visible !important;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
}

/* Weekend Styling */
.weekend {
    background: rgba(156, 163, 175, 0.05);
}

.weekend-cell {
    background: rgba(156, 163, 175, 0.05);
    cursor: not-allowed;
}

.week-start {
    border-left: 2px solid rgba(139, 92, 246, 0.4);
}

.week-start-cell {
    border-left: 2px solid rgba(139, 92, 246, 0.4);
}

/* Scrollbar ayarları kaldırıldı */

.attendance-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .name-cell {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }
    
    .day-header,
    .status-cell {
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
    }
    
    .status-indicator {
        width: 14px;
        height: 14px;
        font-size: 7px;
    }
    
    .employee-avatar {
        width: 20px;
        height: 20px;
        font-size: 8px;
    }
    
    .attendance-table {
        font-size: 10px;
    }
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // Global variables
    let currentEmployeeId = null;
    let currentNoteDate = null;

    // Note modal functions
    function openNoteModal(employeeId, employeeName, date) {
        console.log('🔍 openNoteModal called:', employeeId, employeeName, date);
        
        currentEmployeeId = employeeId;
        currentNoteDate = date;

        // Test modal açılması
        try {
            const modalElement = document.getElementById('noteModal');
            if (!modalElement) {
                console.error('❌ Modal element not found!');
                return;
            }
            
            console.log('✅ Modal element found, trying to open...');
            
            // Update modal title
            document.getElementById('noteModalTitle').innerHTML = 
                `<i class="fas fa-sticky-note me-2"></i>Note for ${employeeName} - ${date}`;

            // Clear textarea first
            document.getElementById('noteTextarea').value = '';

            // Show modal immediately
            const modal = new bootstrap.Modal(modalElement);
            modal.show();
            
            console.log('✅ Modal should be visible now');

            // Fetch existing note after modal is shown
            fetch(`/api/get_daily_note?employee_id=${employeeId}&note_date=${date}`)
                .then(response => response.json())
                .then(data => {
                    console.log('📝 Note data received:', data);
                    // Update textarea with existing note
                    document.getElementById('noteTextarea').value = data.note || '';
                })
                .catch(error => {
                    console.error('❌ Error fetching note:', error);
                });
                
        } catch (error) {
            console.error('❌ Error opening modal:', error);
        }
    }

    function saveNote() {
        console.log('💾 saveNote function called!');
        console.log('📋 Current data:', {
            employeeId: currentEmployeeId,
            noteDate: currentNoteDate
        });
        
        const noteText = document.getElementById('noteTextarea').value;
        console.log('📝 Note text:', noteText);

        if (!currentEmployeeId || !currentNoteDate) {
            console.error('❌ Missing employee or date information');
            showNotification('Error: Missing employee or date information', 'danger');
            return;
        }

        // Show loading state
        const saveBtn = document.getElementById('saveNoteBtn');
        const originalText = saveBtn.innerHTML;
        saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
        saveBtn.disabled = true;

        console.log('🚀 Sending API request...');
        console.log('📦 Payload:', {
            employee_id: String(currentEmployeeId),
            note_date: currentNoteDate,
            note_text: noteText
        });

        // Send to API
        fetch('/api/save_daily_note', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                employee_id: String(currentEmployeeId),  // Force string conversion
                note_date: currentNoteDate,
                note_text: noteText
            })
        })
        .then(response => {
            console.log('📡 API response received:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('📊 API data:', data);
            if (data.success) {
                // Update note indicator
                updateNoteIndicator(currentEmployeeId, currentNoteDate, noteText);
                
                // Hide modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('noteModal'));
                if (modal) {
                    modal.hide();
                }

                // Show success notification
                showNotification('Note saved successfully!', 'success');
            } else {
                console.error('❌ API error:', data.message);
                showNotification('Error saving note: ' + data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('❌ Network error:', error);
            showNotification('Error saving note: Network error', 'danger');
        })
        .finally(() => {
            // Reset button state
            saveBtn.innerHTML = originalText;
            saveBtn.disabled = false;
        });
    }

    function updateNoteIndicator(employeeId, noteDate, noteText) {
        const cell = document.querySelector(`[data-employee="${employeeId}"][data-date="${noteDate}"]`);
        if (cell) {
            if (noteText.trim()) {
                cell.classList.add('has-note');
            } else {
                cell.classList.remove('has-note');
            }
        }
    }

    function showNotification(message, type = 'info') {
        // Create Bootstrap alert
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
        alertDiv.style.cssText = `
            top: 20px;
            right: 20px;
            z-index: 9999;
            min-width: 300px;
        `;
        alertDiv.innerHTML = `
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'danger' ? 'exclamation-circle' : 'info-circle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        document.body.appendChild(alertDiv);

        // Auto remove after 5 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }

    // Document ready
    document.addEventListener('DOMContentLoaded', function() {
        console.log('🚀 DOM loaded, setting up note functionality...');
        
        // Save note button event - CRITICAL FIX
        const saveBtn = document.getElementById('saveNoteBtn');
        if (saveBtn) {
            saveBtn.addEventListener('click', function() {
                console.log('💾 Save button clicked!');
                saveNote();
            });
            console.log('✅ Save button event listener added');
        } else {
            console.error('❌ Save button not found!');
        }

        // Form management
        const searchInput = document.getElementById('search-input');
        const monthSelect = document.getElementById('month');
        const yearSelect = document.getElementById('year');
        const exportLink = document.getElementById('export-link');
        const attendanceForm = document.getElementById('attendance-form');

        // Update export link
        function updateExportLink() {
            const month = monthSelect.value;
            const year = yearSelect.value;
            const search = searchInput.value;

            const newHref = '{{ url_for("export_monthly_attendance") }}' +
                          '?month=' + month +
                          '&year=' + year +
                          '&search=' + encodeURIComponent(search);
            exportLink.href = newHref;
        }

        // Search with debounce
        let searchTimeout;
        searchInput.addEventListener('keyup', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(function() {
                const currentUrl = new URL(window.location.href);
                currentUrl.searchParams.set('search', searchInput.value);
                currentUrl.searchParams.set('page', '1');
                window.location.href = currentUrl.toString();
            }, 1000);
        });

        // Enter key handling
        searchInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                clearTimeout(searchTimeout);
                const currentUrl = new URL(window.location.href);
                currentUrl.searchParams.set('search', searchInput.value);
                currentUrl.searchParams.set('page', '1');
                window.location.href = currentUrl.toString();
            }
        });

        // Month/Year change handlers
        monthSelect.addEventListener('change', function() {
            const currentUrl = new URL(window.location.href);
            currentUrl.searchParams.set('month', this.value);
            currentUrl.searchParams.set('page', '1');
            window.location.href = currentUrl.toString();
        });

        yearSelect.addEventListener('change', function() {
            const currentUrl = new URL(window.location.href);
            currentUrl.searchParams.set('year', this.value);
            currentUrl.searchParams.set('page', '1');
            window.location.href = currentUrl.toString();
        });

        // Initialize export link
        updateExportLink();

        // Dynamic table sizing - Basit ve etkili
        function optimizeTableSize() {
            // Hiçbir şey yapma, CSS'te sabit boyutlar kullan
        }

        // Apply optimization on load and resize
        optimizeTableSize();
        
        let resizeTimeout;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(optimizeTableSize, 100);
        });

        // Add smooth animations
        const cards = document.querySelectorAll('.card');
        cards.forEach((card, index) => {
            card.style.animationDelay = `${index * 0.1}s`;
        });
    });
</script>

<script>
function changeCategory(category) {
    const form = document.getElementById('attendance-form');
    const url = new URL(window.location);
    url.searchParams.set('category', category);
    url.searchParams.delete('page'); // Reset page when changing category
    window.location.href = url.toString();
}
</script>

{% endblock %}

<style>
/* Category Tabs */
.category-tabs .nav-link {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(139, 92, 246, 0.1);
    color: #6B7280;
    font-weight: 600;
    padding: 15px 20px;
    border-radius: 15px;
    margin: 0 5px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.category-tabs .nav-link:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.05) 100%);
    border-color: rgba(139, 92, 246, 0.3);
    color: #8B5CF6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.category-tabs .nav-link.active {
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    border-color: #8B5CF6;
    color: white;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.category-tabs .nav-link .badge {
    margin-left: 8px;
    font-size: 12px;
    padding: 4px 8px;
}

.category-tabs .nav-link.active .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

/* Attendance Table - Balanced Compact Design */
.attendance-table {
    font-size: 12px;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.attendance-table th,
.attendance-table td {
    padding: 3px 2px;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid rgba(139, 92, 246, 0.1);
    text-align: center;
    overflow: hidden;
}

.name-cell {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    position: sticky;
    left: 0;
    background: rgba(255, 255, 255, 0.98);
    z-index: 10;
    border-right: 2px solid #8B5CF6;
    box-shadow: 2px 0 3px rgba(139, 92, 246, 0.1);
    text-align: left;
    padding: 5px 8px;
}

.day-header {
    font-size: 10px;
    line-height: 1;
    padding: 2px 1px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.day-header strong {
    font-size: 12px;
    display: block;
    margin-bottom: 2px;
    writing-mode: horizontal-tb;
    text-orientation: upright;
}

.day-header small {
    font-size: 8px;
    opacity: 0.7;
    writing-mode: horizontal-tb;
    text-orientation: upright;
}

.status-cell {
    width: calc((100vw - 220px) / 31);
    min-width: 16px;
    max-width: 25px;
    padding: 2px;
    cursor: pointer;
    position: relative;
}

.status-cell:hover:not(.weekend-cell) {
    background: rgba(139, 92, 246, 0.1);
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    font-size: 8px;
    transition: all 0.2s ease;
    margin: 1px auto;
    font-weight: bold;
}

.status-indicator:hover {
    transform: scale(1.2);
    border-radius: 50%;
}

.status-indicator.full-day {
    background: #10B981;
    color: white;
}

.status-indicator.half-day {
    background: #F59E0B;
    color: white;
}

.status-indicator.absence {
    background: #EF4444;
    color: white;
}

.status-indicator.weekend {
    background: #9CA3AF;
    color: white;
}

.status-indicator.no-log {
    background: #D1D5DB;
    color: #6B7280;
}

.weekend {
    background: rgba(156, 163, 175, 0.03);
}

.weekday {
    background: rgba(139, 92, 246, 0.01);
}

.weekend-cell {
    background: rgba(156, 163, 175, 0.03);
    cursor: not-allowed;
}

.week-start {
    border-left: 2px solid rgba(139, 92, 246, 0.4);
}

.week-start-cell {
    border-left: 2px solid rgba(139, 92, 246, 0.4);
}

.employee-avatar {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 10px;
    flex-shrink: 0;
    margin-right: 6px;
}

.employee-name-link {
    color: #1F2937;
    font-weight: 500;
    font-size: 12px;
    display: flex;
    align-items: center;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employee-name-link:hover {
    color: #8B5CF6;
}

.employee-name-link strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

/* Container optimizations - Scroll kaldırıldı */
.table-responsive {
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: visible !important;
    position: relative;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Tablo wrapper için normal akış */
.card-body {
    overflow: visible !important;
    padding: 15px 10px;
}

/* Tüm tablo elementleri için yatay taşma önleme */
.attendance-table,
.attendance-table *,
.table-responsive * {
    box-sizing: border-box;
    max-width: 100%;
}

/* Responsive breakpoints - Makul boyutlar */
@media (max-width: 1600px) {
    .status-cell {
        width: calc((100vw - 200px) / 31);
        min-width: 18px;
        max-width: 32px;
    }
    
    .status-indicator {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }
    
    .name-cell {
        width: 130px;
        min-width: 130px;
        max-width: 130px;
    }
}

@media (max-width: 1400px) {
    .status-cell {
        width: calc((100vw - 190px) / 31);
        min-width: 16px;
        max-width: 28px;
    }
    
    .status-indicator {
        width: 14px;
        height: 14px;
        font-size: 8px;
    }
    
    .name-cell {
        width: 120px;
        min-width: 120px;
        max-width: 120px;
    }
    
    .employee-avatar {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }
    
    .employee-photo {
        width: 20px;
        height: 20px;
    }
    
    .attendance-table {
        font-size: 11px;
    }
}

@media (max-width: 1200px) {
    .status-cell {
        width: calc((100vw - 180px) / 31);
        min-width: 14px;
        max-width: 24px;
    }
    
    .status-indicator {
        width: 12px;
        height: 12px;
        font-size: 7px;
    }
    
    .name-cell {
        width: 110px;
        min-width: 110px;
        max-width: 110px;
    }
    
    .day-header {
        font-size: 9px;
        height: 45px;
    }
    
    .day-header strong {
        font-size: 10px;
    }
    
    .attendance-table {
        font-size: 10px;
    }
}

@media (max-width: 992px) {
    .status-cell {
        width: calc((100vw - 170px) / 31);
        min-width: 12px;
        max-width: 20px;
    }
    
    .status-indicator {
        width: 10px;
        height: 10px;
        font-size: 6px;
    }
    
    .name-cell {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }
    
    .employee-avatar {
        width: 18px;
        height: 18px;
        font-size: 8px;
    }
    
    .employee-photo {
        width: 18px;
        height: 18px;
    }
    
    .day-header {
        font-size: 8px;
        height: 40px;
    }
    
    .day-header strong {
        font-size: 9px;
    }
    
    .attendance-table {
        font-size: 9px;
    }
}

@media (max-width: 768px) {
    .status-cell {
        width: calc((100vw - 160px) / 31);
        min-width: 10px;
        max-width: 16px;
    }
    
    .status-indicator {
        width: 8px;
        height: 8px;
        font-size: 5px;
        border-radius: 2px;
    }
    
    .name-cell {
        width: 90px;
        min-width: 90px;
        max-width: 90px;
    }
    
    .employee-avatar {
        width: 16px;
        height: 16px;
        font-size: 7px;
    }
    
    .employee-photo {
        width: 16px;
        height: 16px;
    }
    
    .day-header {
        font-size: 7px;
        height: 35px;
    }
    
    .day-header strong {
        font-size: 8px;
    }
    
    .attendance-table {
        font-size: 8px;
    }
    
    .employee-name-link strong {
        max-width: 70px;
    }
}

@media (max-width: 480px) {
    .status-cell {
        width: calc((100vw - 150px) / 31);
        min-width: 8px;
        max-width: 12px;
    }
    
    .status-indicator {
        width: 6px;
        height: 6px;
        font-size: 3px;
    }
    
    .name-cell {
        width: 70px;
        min-width: 70px;
        max-width: 70px;
    }
    
    .employee-avatar {
        width: 14px;
        height: 14px;
        font-size: 5px;
    }
    
    .employee-photo {
        width: 14px;
        height: 14px;
    }
    
    .day-header {
        font-size: 5px;
    }
    
    .day-header strong {
        font-size: 6px;
    }
    
    .attendance-table {
        font-size: 6px;
    }
}

/* Scrollbar ayarları kaldırıldı - artık ayrı scroll yok */

/* Tablo genişliği sabit tutma */
.attendance-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* Hücre genişliklerini zorla sabit tut */
.status-cell {
    flex-shrink: 0;
    flex-grow: 0;
}

.name-cell {
    flex-shrink: 0;
    flex-grow: 0;
}
</style>