@extends('admin::curd.index')

@section('heading')
    <i class="fa fa-file-text-o"></i> {!! trans('work_order::work_order.pm_cali_calendar') !!}
    <small> {!! trans('cms.manage') !!} {!! trans('work_order::work_order.pm_cali_calendar') !!}</small>
@stop

@section('title')
    {!! trans('work_order::work_order.pm_cali_calendar') !!}
@stop

@section('breadcrumb')
    <ol class="breadcrumb">
        <li><a href="{!! trans_url('admin') !!}"><i class="fa fa-dashboard"></i> {!! trans('cms.home') !!} </a></li>
        <li class="active">{!! trans('work_order::work_order.pm_cali_calendar') !!}</li>
    </ol>
@stop

@section('content')
    <div class="box box-primary">
        <div class="box-body">
            <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); margin: 0 auto;">
                <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 16px;">
                    
                    <!-- Filter by Category Section -->
                    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 12px;">
                        <label style="margin-right: 16px; font-weight: 600; color: #2c3e50; font-size: 14px; white-space: nowrap;">Category:</label>
                        
                        <div style="display: flex; align-items: center; gap: 8px; background: #f8f9ff; padding: 8px 12px; border-radius: 8px; border: 1px solid #e3e6f0;">
                            <input 
                                style="margin: 0; accent-color: #4f46e5; transform: scale(1.1);" 
                                class="category-filter" 
                                type="checkbox" 
                                id="preventiveCheck" 
                                value="Preventive" 
                                checked
                            >
                            <label 
                                style="margin: 0; font-weight: 500; color: #4f46e5; cursor: pointer; font-size: 14px;" 
                                for="preventiveCheck"
                            >Preventive</label>
                        </div>
                        
                        <div style="display: flex; align-items: center; gap: 8px; background: #f0fdf4; padding: 8px 12px; border-radius: 8px; border: 1px solid #d1fae5;">
                            <input 
                                style="margin: 0; accent-color: #10b981; transform: scale(1.1);" 
                                class="category-filter" 
                                type="checkbox" 
                                id="calibrationCheck" 
                                value="Calibration" 
                                checked
                            >
                            <label 
                                style="margin: 0; font-weight: 500; color: #10b981; cursor: pointer; font-size: 14px;" 
                                for="calibrationCheck"
                            >Calibration</label>
                        </div>
                    </div>
                    
                    <!-- Work Department Section -->
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <label 
                            style="font-weight: 600; color: #2c3e50; font-size: 14px; white-space: nowrap;" 
                            for="workDepartmentSelect"
                        >Work Department:</label>
                        
                        <select 
                            id="workDepartmentSelect" 
                            style="
                                padding: 8px 12px; 
                                border: 2px solid #e5e7eb; 
                                border-radius: 8px; 
                                font-size: 14px; 
                                color: #374151; 
                                background: white; 
                                min-width: 140px;
                                cursor: pointer;
                                transition: all 0.2s ease;
                                outline: none;
                            "
                            onmouseover="this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)'"
                            onmouseout="this.style.borderColor='#e5e7eb'; this.style.boxShadow='none'"
                            onfocus="this.style.borderColor='#3b82f6'; this.style.boxShadow='0 0 0 3px rgba(59, 130, 246, 0.1)'"
                            onblur="this.style.borderColor='#e5e7eb'; this.style.boxShadow='none'"
                        >
                        <option value="">All</option>
                        @foreach(WorkDepartment::work_departments() as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                        </select>
                    </div>
                </div>
            </div>
            
            <div id="calendar"></div>
        </div>
    </div>

    <!-- Enhanced Event Modal -->
    <div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content enhanced-modal-content" id="eventModalContent">
                <div class="modal-header enhanced-modal-header">
                    <h5 class="modal-title enhanced-modal-title" id="eventModalLabel">
                        Work Order Details
                    </h5>
                </div>

                <div class="modal-body enhanced-modal-body">
                    <div class="detail-row">
                        <div class="detail-label">
                            Asset
                        </div>
                        <div class="detail-value">
                            <span class="asset-highlight" id="detailAsset"></span>
                        </div>
                    </div>

                    <!-- Work Order Row -->
                    <div class="hide-row" id="workorder-row">
                        <div class="detail-label">Work Order</div>
                        <div class="detail-value">
                            <span class="work-order-highlight" id="detailWorkorder"></span>
                        </div>
                    </div>

                    <div class="detail-row">
                        <div class="detail-label">
                            Category
                        </div>
                        <div class="detail-value" id="detailCategory"></div>
                    </div>

                    <!-- Technician Row -->
                    <div class="hide-row" id="technician-row">
                        <div class="detail-label">Technician</div>
                        <div class="detail-value" id="detailTechnician"></div>
                    </div>

                    <div class="detail-row">
                        <div class="detail-label">
                            Due Date
                        </div>
                        <div class="detail-value" id="detailDueDate"></div>
                    </div>

                    <div class="hide-row" id="contractRow">
                        <div class="detail-label">
                            <span id="contractLabel">Contract Expiry Date</span>
                        </div>
                        <div class="detail-value" id="detailContractDate"></div>
                    </div>

                    <div class="hide-row" id="warrantyRow">
                        <div class="detail-label">
                            <span id="warrantyLabel">Warranty Exp Date</span>
                        </div>
                        <div class="detail-value" id="detailWarrantyDate"></div>
                    </div>

                    <!-- Description Row -->
                    <div class="hide-row" id="description-row">
                        <div class="detail-label">Description</div>
                        <div class="detail-value" id="detailDescription"></div>
                    </div>

                    <div class="detail-row">
                        <div class="detail-label">
                            Status
                        </div>
                        <div class="detail-value">
                            <span class="enhanced-status-badge" id="detailStatus"></span>
                        </div>
                    </div>
                </div>

                <div class="modal-footer enhanced-modal-footer d-flex justify-content-end w-100">
                    <button type="button" class="btn enhanced-btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('script')
    <script src="{{ asset('assets/fullcalendar/main.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                height: 600,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                buttonText: {
                    today: 'Today',
                    month: 'Month',
                    week: 'Week',
                    day: 'Day',
                    list: 'List'
                },
                views: {
                    dayGridMonth: {
                        displayEventTime: false
                    },
                    timeGridWeek: {
                        displayEventTime: false
                    },
                    timeGridDay: {
                        displayEventTime: false
                    },
                    listWeek: {
                        displayEventTime: false
                    }
                },
                eventTimeFormat: false,
                eventDisplay: 'block',

                events: function(fetchInfo, successCallback, failureCallback) {
                    const selectedCategories = [];
                    $('.category-filter:checked').each(function() {
                        selectedCategories.push($(this).val());
                    });

                    const workDepartmentId = $('#workDepartmentSelect').val();

                    if (selectedCategories.length === 0) {
                        successCallback([]);
                        return;
                    }

                    $.ajax({
                        url: "{{ trans_url('admin/pm_cali/pm_cali_datas') }}",
                        method: 'GET',
                        data: {
                            categories: selectedCategories,
                            work_department: workDepartmentId
                        },
                        success: function(response) {
                            successCallback(response);
                        },
                        error: function() {
                            alert('There was an error while fetching events!');
                            failureCallback();
                        }
                    });
                },

                
                eventDidMount: function(info) {
                    const assetName = info.event.extendedProps.asset_id || 'No Asset';
                    const sublocationName = info.event.extendedProps.subLocation || 'No Sublocation';

                    const tooltip = document.createElement('div');
                    tooltip.className = 'fc-tooltip';
                    tooltip.innerText = assetName + ' - ' + sublocationName;

                    info.el.appendChild(tooltip);
                },

                eventClick: function(info) {
                    const event = info.event;

                    if (event.extendedProps.asset_id) {
                        const assetUrl = "{{ trans_url('admin/assets/asset') }}" + '?id=' + event.extendedProps.asset;
                        $('#detailAsset').html('<a href="' + assetUrl + '" target="_blank">' + event.extendedProps.asset_id + '</a>');
                    } else {
                        $('#detailAsset').text('-');
                    }

                    if (event.extendedProps.workorder) {
                        $('#eventModalLabel').text('Work Order Details');

                        const workorderUrl = "{{ trans_url('admin/work_order') }}" + '?id=' + event.extendedProps.workorder;
                        $('#detailWorkorder').html('<a href="' + workorderUrl + '" target="_blank">' + event.extendedProps.wo_id + '</a>');

                        $('#detailTechnician').text(event.extendedProps.technician_id || '-');
                        $('#detailDescription').text(event.extendedProps.description || '-');

                        $('#workorder-row').show();
                        $('#technician-row').show();
                        $('#description-row').show();

                        // Reset modal height for full content
                        $('#eventModalContent').css({
                            'max-height': '',
                            'overflow-y': ''
                        });

                    } else {
                        $('#eventModalLabel').text('Asset Details');

                        $('#detailWorkorder').text('-');
                        $('#detailTechnician').text('-');
                        $('#detailDescription').text('-');

                        $('#workorder-row').hide();
                        $('#technician-row').hide();
                        $('#description-row').hide();

                         // Reduce modal height when fewer rows
                        $('#eventModalContent').css({
                            'max-height': '500px',
                            'overflow-y': 'auto'
                        });
                    }

                    
                    $('#detailTechnician').text(event.extendedProps.technician_id || '-');
                    $('#detailDueDate').text(moment(event.start).format('DD MMM, YYYY') || '-');

                    if (event.extendedProps.contract) {
                        $('#detailContractDate').text(moment(event.extendedProps.contract).isValid() 
                            ? moment(event.extendedProps.contract).format('DD MMM, YYYY') 
                            : '-');
                            $('#contractRow').show();
                    } else {
                        $('#contractRow').hide();
                    }

                    if (event.extendedProps.warranty) {
                        const formatted = moment(event.extendedProps.warranty).isValid()
                            ? moment(event.extendedProps.warranty).format('DD MMM, YYYY')
                            : '-';
                        $('#detailWarrantyDate').text(formatted);
                        $('#warrantyRow').show(); // Show the row if value is present
                    } else {
                        $('#warrantyRow').hide(); // Hide the entire row if null
                    }

                    if (event.extendedProps.contract_type === 'AMC' || event.extendedProps.contract_type === 'CMC') {
                        $('#contractLabel').text(event.extendedProps.contract_type + ' Expiry Date:');
                    } else {
                        $('#contractLabel').text('Contract Expiry Date:');
                    }

                    $('#detailDescription').text(event.extendedProps.description || '-');
                    $('#detailCategory').text(event.extendedProps.category || '-');

                    const status = event.extendedProps.status || '-';
                    let statusClass = 'status-default';

                    switch (status.toLowerCase()) {
                        case 'completed':
                            statusClass = 'status-completed';
                            break;
                        case 'pending':
                            statusClass = 'status-pending';
                            break;
                        case 'cancelled':
                        case 'hold':
                            statusClass = 'status-cancelled';
                            break;
                        case 'wip':
                            statusClass = 'status-wip';
                            break;
                        case 'assigned':
                            statusClass = 'status-assigned';
                            break;
                    }

                    $('#detailStatus')
                        .removeClass()
                        .addClass('enhanced-status-badge ' + statusClass)
                        .html(status.toUpperCase());

                    $('#eventModal').modal('show');
                }
            });

            calendar.render();

            $('#workDepartmentSelect').on('change', function () {
                calendar.refetchEvents();
            });

            $(document).on('change', '.category-filter', function () {
                calendar.refetchEvents();
            });
        });
    </script>
@stop

@section('style')
    <link href="{{ asset('assets/fullcalendar/main.min.css') }}" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        #eventModalContent {
            transition: max-height 0.3s ease;
        }

        .enhanced-modal-content {
            border: none !important;
            border-radius: 20px !important;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
            overflow: hidden !important;
            background: #ffffff !important;
            height: 600px !important;
            display: flex;
            flex-direction: column;
        }
        .enhanced-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background-color: #f9f9f9;
        }

        .enhanced-modal-header {
            background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important;
            border: none !important;
            padding: 25px 30px !important;
            position: relative !important;
            overflow: hidden !important;
        }

        .enhanced-modal-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }

        .enhanced-modal-title {
            font-size: 1.5rem !important;
            font-weight: 600 !important;
            color: white !important;
            margin: 0 !important;
            position: relative !important;
            z-index: 1 !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }

        .enhanced-modal-title i {
            font-size: 1.3rem !important;
            opacity: 0.9 !important;
        }

        .enhanced-btn-close {
            background: rgba(255, 255, 255, 0.2) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            border-radius: 50% !important;
            width: 35px !important;
            height: 35px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.3s ease !important;
            position: relative !important;
            z-index: 1 !important;
            outline: none !important;
            opacity: 1 !important;
            color: white !important;
            font-size: 20px !important;
            font-weight: 300 !important;
        }

        .enhanced-btn-close:hover {
            background: rgba(255, 255, 255, 0.3) !important;
            transform: rotate(90deg) !important;
            color: white !important;
        }

        .enhanced-btn-close::before {
            content: '×' !important;
        }

        .enhanced-modal-body {
            padding: 35px 30px !important;
            background: #ffffff !important;
        }

        .detail-row {
            display: flex !important;
            align-items: flex-start !important;
            margin-bottom: 1px !important;
            padding: 15px !important;
            border-bottom: 1px solid #f0f4f8 !important;
            transition: all 0.2s ease !important;
            border-radius: 8px !important;
            margin-left: -15px !important;
            margin-right: -15px !important;
        }

        .detail-row:hover {
            background: #f8fafc !important;
            transform: translateX(5px) !important;
        }

        .detail-row:last-child {
            border-bottom: none !important;
            margin-bottom: 0 !important;
        }

        .hide-row {
            display: flex ;
            align-items: flex-start !important;
            margin-bottom: 1px !important;
            padding: 15px !important;
            border-bottom: 1px solid #f0f4f8 !important;
            transition: all 0.2s ease !important;
            border-radius: 8px !important;
            margin-left: -15px !important;
            margin-right: -15px !important;
        }

        .hide-row:hover {
            background: #f8fafc !important;
            transform: translateX(5px) !important;
        }

        .hide-row:last-child {
            border-bottom: none !important;
            margin-bottom: 0 !important;
        }

        .detail-label {
            font-weight: 600 !important;
            color: #2d3748 !important;
            min-width: 140px !important;
            font-size: 1.4rem !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }

        .detail-label i {
            width: 18px !important;
            color: #4A90E2 !important;
            font-size: 0.9rem !important;
        }

        .detail-value {
            color: #4a5568 !important;
            font-size: 1.4rem !important;
            line-height: 1.5 !important;
            flex: 1 !important;
            padding-left: 10px !important;
        }

        .enhanced-status-badge {
            display: inline-flex !important;
            align-items: center !important;
            padding: 6px 16px !important;
            border-radius: 25px !important;
            font-size: 1.2rem !important;
            font-weight: 600 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            gap: 6px !important;
        }

        .status-wip {
            background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3) !important;
        }

        .status-wip i {
            animation: spin 2s linear infinite !important;
        }

        .status-completed {
            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3) !important;
        }

        .status-pending {
            background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(237, 137, 54, 0.3) !important;
        }

        .status-cancelled {
            background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(245, 101, 101, 0.3) !important;
        }

        .status-assigned {
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3) !important;
        }

        .status-default {
            background: linear-gradient(135deg, #718096 0%, #4a5568 100%) !important;
            color: white !important;
            box-shadow: 0 4px 12px rgba(113, 128, 150, 0.3) !important;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .enhanced-modal-footer {
            background: #f8fafc !important;
            border: none !important;
            padding: 20px 30px !important;
            display: flex !important;
            justify-content: flex-end;
        }

        .enhanced-btn-secondary {
            background: linear-gradient(135deg, #718096 0%, #4a5568 100%) !important;
            border: none !important;
            border-radius: 25px !important;
            padding: 8px 24px !important;
            font-weight: 600 !important;
            color: white !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 4px 12px rgba(113, 128, 150, 0.3) !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }
        .enhanced-btn-secondary:hover {
            background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 20px rgba(113, 128, 150, 0.4) !important;
            color: white !important;
        }

        .asset-highlight {
            color: #4A90E2 !important;
            font-weight: 600 !important;
        }

        .work-order-highlight {
            color: #4A90E2 !important;
            font-weight: 600 !important;
        }

        .asset-highlight a,
        .work-order-highlight a {
            color: #4A90E2 !important;
            text-decoration: none !important;
            font-weight: 600 !important;
        }

        .asset-highlight a:hover,
        .work-order-highlight a:hover {
            color: #357ABD !important;
            text-decoration: underline !important;
        }

        /* Calendar Tooltip Styles */
        .fc-event {
            position: relative;
        }

        .fc-tooltip {
            visibility: hidden;
            opacity: 0;
            width: max-content;
            background-color: #333;
            color: #fff;
            text-align: left;
            padding: 6px 10px;
            border-radius: 5px;
            position: absolute;
            z-index: 1000;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            transition: opacity 0.3s ease;
            white-space: nowrap;
            font-size: 13px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
        }

        .fc-event:hover .fc-tooltip {
            visibility: visible;
            opacity: 1;
        }

        /* FullCalendar Button Styling */
        .fc-toolbar {
            margin-bottom: 1rem !important;
            align-items: center !important;
        }

        .fc-toolbar-chunk {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .fc-button-primary {
            background-color: #87ceeb !important;
            border-color: #70c0e8 !important;
            color: #333 !important;
            font-weight: 500 !important;
            padding: 6px 12px !important;
            border-radius: 6px !important;
            font-size: 14px !important;
            line-height: 1.4 !important;
            transition: all 0.2s ease !important;
            box-shadow: 0 2px 4px rgba(135, 206, 235, 0.2) !important;
        }

        .fc-button-primary:hover {
            background-color: #70c0e8 !important;
            border-color: #5ab3e0 !important;
            color: #222 !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 8px rgba(135, 206, 235, 0.3) !important;
        }

        .fc-button-primary:active,
        .fc-button-primary.fc-button-active {
            background-color: #5ab3e0 !important;
            border-color: #4a9cd9 !important;
            color: #fff !important;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
        }

        .fc-button-primary:focus {
            box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.3) !important;
        }

        .fc-button-primary:disabled {
            background-color: #d1ecf1 !important;
            border-color: #bee5eb !important;
            color: #6c757d !important;
            opacity: 0.7 !important;
        }

        .fc-prev-button, 
        .fc-next-button {
            margin: 0 4px !important;
            vertical-align: middle !important;
            min-width: 40px !important;
            position: relative !important;
        }

        .fc-prev-button .fc-icon,
        .fc-next-button .fc-icon {
            display: none !important;
        }

        .fc-prev-button:before {
            content: "◀" !important;
            font-size: 14px !important;
            font-weight: bold !important;
            display: inline-block !important;
        }

        .fc-next-button:before {
            content: "▶" !important;
            font-size: 14px !important;
            font-weight: bold !important;
            display: inline-block !important;
        }

        .fc-today-button {
            margin: 0 8px !important;
            font-weight: 600 !important;
        }

        .fc-dayGridMonth-button,
        .fc-timeGridWeek-button,
        .fc-timeGridDay-button,
        .fc-listWeek-button {
            border-radius: 6px !important;
            margin: 0 2px !important;
            min-width: 60px !important;
        }

        .fc-toolbar-title {
            font-size: 1.5rem !important;
            font-weight: 600 !important;
            color: #2c3e50 !important;
            margin: 0 16px !important;
        }

        .btn-primary {
            margin-bottom: 20px !important;
            margin-top: 10px !important;
            background-color: #87ceeb !important;
            border-color: #70c0e8 !important;
            color: #333 !important;
            font-weight: 500 !important;
            padding: 8px 16px !important;
            border-radius: 6px !important;
            transition: all 0.2s ease !important;
            box-shadow: 0 2px 4px rgba(135, 206, 235, 0.2) !important;
        }

        .btn-primary:hover {
            background-color: #70c0e8 !important;
            border-color: #5ab3e0 !important;
            color: #222 !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 8px rgba(135, 206, 235, 0.3) !important;
        }

        .btn-primary:active,
        .btn-primary:focus {
            background-color: #5ab3e0 !important;
            border-color: #4a9cd9 !important;
            color: #fff !important;
            box-shadow: 0 0 0 3px rgba(135, 206, 235, 0.3) !important;
        }

        .modal-footer .btn-danger {
            background-color: #f8d7da !important;
            border-color: #f5c6cb !important;
            color: #721c24 !important;
        }

        .modal-footer .btn-danger:hover {
            background-color: #f1b0b7 !important;
            border-color: #ea868f !important;
            color: #491217 !important;
        }

        #calendar {
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .fc .fc-toolbar-chunk:first-child {
            justify-content: flex-start;
        }

        .fc .fc-toolbar-chunk:last-child {
            justify-content: flex-end;
        }

        .fc .fc-toolbar-chunk:nth-child(2) {
            justify-content: center;
            flex-grow: 1;
        }

        @media (max-width: 768px) {
            .fc-toolbar {
                flex-direction: column !important;
                gap: 10px !important;
            }
            
            .fc-toolbar-chunk {
                justify-content: center !important;
            }
            
            .fc-button-primary {
                padding: 5px 10px !important;
                font-size: 13px !important;
                min-width: 50px !important;
            }
            
            .fc-toolbar-title {
                font-size: 1.3rem !important;
                margin: 0 8px !important;
            }

            .enhanced-modal-content {
                margin: 10px !important;
            }

            .enhanced-modal-body {
                padding: 25px 20px !important;
            }

            .detail-row {
                flex-direction: column !important;
                align-items: flex-start !important;
            }
            .hide-row {
                flex-direction: column !important;
                align-items: flex-start !important;
            }

            .detail-label {
                min-width: auto !important;
                margin-bottom: 5px !important;
            }

            .detail-value {
                padding-left: 26px !important;
            }
        }
    </style>
@stop