<!-- FullCalendar CSS -->
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/main.min.css' rel='stylesheet' />
<!-- Quill Rich Text Editor CSS -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<style>
    /* Stiluri Calendar */
    .fc-toolbar-title { font-size: 1.1rem !important; }
    .fc-button { font-size: 0.75rem !important; padding: 0.2rem 0.5rem !important; }
    .fc-event { cursor: pointer; font-size: 0.85rem; }
    .fc-event-title { font-weight: 600; }
    
    /* Thumbnails & Avatar */
    .task-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; cursor: zoom-in; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.2s; }
    .task-thumb:hover { transform: scale(3.5); z-index: 100; position: relative; border-color: #1a237e; }
    .report-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #198754; margin-right: 10px; }

    /* Status Styles */
    .row-overdue { border-left: 4px solid #dc3545; background-color: #fff5f5 !important; }
    .text-overdue { color: #dc3545; font-weight: 800; font-size: 0.7rem; text-transform: uppercase; }
    .worker-select-box { max-height: 150px; overflow-y: auto; border: 1px solid #dee2e6; padding: 8px; background: #f8f9fa; border-radius: 4px; }

    /* Quill Editor Customization */
    .ql-toolbar.ql-snow { background-color: #f8f9fa; border-top-left-radius: 4px; border-top-right-radius: 4px; border-color: #dee2e6; }
    .ql-container.ql-snow { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-color: #dee2e6; font-family: inherit; font-size: 0.875rem; background: #fff; }
    .ql-editor { min-height: 120px; max-height: 300px; overflow-y: auto; }
    /* Pentru afișarea HTML corectă în modalul de vizualizare */
    .rich-text-content ul, .rich-text-content ol { padding-left: 1.5rem; margin-bottom: 0.5rem; }
    .rich-text-content p { margin-bottom: 0.5rem; }

    /* History & Popups */
    .history-item { border-left: 2px solid #dee2e6; padding-left: 15px; margin-bottom: 15px; position: relative; }
    .history-item::before { content: ''; position: absolute; left: -6px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #0d6efd; }
    .history-date { font-size: 0.75rem; color: #888; }
    
    #calendar-popout { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; background: rgba(30, 30, 30, 0.98); backdrop-filter: blur(8px); color: white; padding: 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 9999; text-align: center; display: none; border: 1px solid rgba(255,255,255,0.2); }
    #calendar-popout h5 { font-size: 1.1rem; margin-bottom: 5px; color: #ffc107; font-weight: bold; }
    #calendar-popout p { font-size: 0.9rem; margin-bottom: 10px; color: #ddd; line-height: 1.4; }
    #calendar-popout .btn-close-custom { position: absolute; top: 10px; right: 10px; cursor: pointer; color: #aaa; font-weight: bold; font-size: 1.2rem; }
    #calendar-popout .pop-info-row { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 10px; padding-top: 10px; text-align: left; font-size: 0.85rem; }
    
    /* Theme Variables */
    :root { --theme-primary: #0d6efd; --theme-bg: #ffffff; --theme-text: #212529; }
    
    /* Dark */
    body.theme-dark { --theme-bg: #1a1a1a; --theme-text: #e0e0e0; background-color: #1a1a1a; }
    body.theme-dark .card { background-color: #2d2d2d !important; color: #e0e0e0 !important; }
    body.theme-dark .table { color: #e0e0e0 !important; --bs-table-bg: #2d2d2d; }
    body.theme-dark .navbar { background-color: #000000 !important; }
    body.theme-dark .form-control, body.theme-dark .form-select { background-color: #3a3a3a; color: #e0e0e0; border-color: #555; }
    body.theme-dark .ql-toolbar.ql-snow { background-color: #3a3a3a; border-color: #555; }
    body.theme-dark .ql-container.ql-snow { background-color: #2d2d2d; border-color: #555; color: #e0e0e0; }
    body.theme-dark .ql-snow .ql-stroke { stroke: #e0e0e0; }
    body.theme-dark .ql-snow .ql-fill { fill: #e0e0e0; }

    /* Colored Themes */
    body.theme-blue .navbar { background-color: #003d7a !important; }
    body.theme-blue .btn-primary { background-color: #0066cc; border-color: #0066cc; }
    body.theme-blue .card-header.bg-success { background-color: #0066cc !important; }

    body.theme-green .navbar { background-color: #1b4d2b !important; }
    body.theme-green .btn-primary, body.theme-green .btn-success { background-color: #2d7a3e; border-color: #2d7a3e; }

    body.theme-red .navbar { background-color: #b71c1c !important; }
    body.theme-red .btn-primary { background-color: #d32f2f; border-color: #d32f2f; }
    body.theme-red .card-header.bg-success { background-color: #d32f2f !important; }

    body.theme-purple .navbar { background-color: #4a2c7a !important; }
    body.theme-purple .btn-primary { background-color: #6f42c1; border-color: #6f42c1; }
    body.theme-purple .card-header.bg-success { background-color: #6f42c1 !important; }

    .theme-btn { transition: all 0.3s ease; font-weight: 500; }
    .theme-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
    .theme-btn.active { font-weight: 700; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); }
    .btn-outline-purple { color: #6f42c1; border-color: #6f42c1; }
    .btn-outline-purple:hover, .btn-outline-purple.active { background-color: #6f42c1; color: white !important; }
</style>