/* ===== UI COMPONENTS - BUTTONS ===== */

/* ===== UNIVERSAL MODAL CLOSE BUTTON ===== */
/* 
 * Stilul universal pentru butoanele de închidere din toate modalele
 * Folosit în: task-manager-modal, category-modal, calendar-modal, etc.
 */

.modal-close-btn,
#calendar-modal .modal-close-btn,
#calendar-modal button.modal-close-btn {
    background: var(--button-bg, rgba(79, 195, 247, 0.2)) !important;
    border: 1px solid var(--button-border, rgba(79, 195, 247, 0.5)) !important;
    color: var(--button-color, var(--text-cyan)) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.modal-close-btn:hover,
#calendar-modal .modal-close-btn:hover,
#calendar-modal button.modal-close-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px var(--button-shadow-hover, rgba(79, 195, 247, 0.4)) !important;
    background: var(--button-bg-hover, rgba(79, 195, 247, 0.3)) !important;
    border-color: var(--button-border-hover, rgba(79, 195, 247, 0.7)) !important;
}

.modal-close-btn:active,
#calendar-modal .modal-close-btn:active,
#calendar-modal button.modal-close-btn:active {
    transform: translateY(0) scale(0.95) !important;
    box-shadow: 0 2px 8px var(--button-shadow-active, rgba(79, 195, 247, 0.2)) !important;
}

.modal-close-btn:focus,
#calendar-modal .modal-close-btn:focus,
#calendar-modal button.modal-close-btn:focus {
    outline: 2px solid var(--button-outline, rgba(79, 195, 247, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling */
.modal-close-btn i,
#calendar-modal .modal-close-btn i,
#calendar-modal button.modal-close-btn i {
    font-size: 16px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: color 0.2s ease !important;
}

.modal-close-btn:hover i,
#calendar-modal .modal-close-btn:hover i,
#calendar-modal button.modal-close-btn:hover i {
    color: var(--button-color-hover, var(--text-cyan)) !important;
    text-shadow: 0 0 12px var(--button-text-shadow, rgba(79, 195, 247, 0.8)) !important;
    filter: brightness(1.2) !important;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .modal-close-btn,
    #calendar-modal .modal-close-btn,
    #calendar-modal button.modal-close-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
    
    .modal-close-btn i,
    #calendar-modal .modal-close-btn i,
    #calendar-modal button.modal-close-btn i {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .modal-close-btn,
    #calendar-modal .modal-close-btn,
    #calendar-modal button.modal-close-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }
    
    .modal-close-btn i,
    #calendar-modal .modal-close-btn i,
    #calendar-modal button.modal-close-btn i {
        font-size: 12px !important;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    .modal-close-btn,
    #calendar-modal .modal-close-btn,
    #calendar-modal button.modal-close-btn {
        transition: none !important;
    }
    
    .modal-close-btn:hover,
    #calendar-modal .modal-close-btn:hover,
    #calendar-modal button.modal-close-btn:hover {
        transform: none !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    .modal-close-btn,
    #calendar-modal .modal-close-btn,
    #calendar-modal button.modal-close-btn {
    border-color: var(--text-cyan) !important;
        background: rgba(79, 195, 247, 0.3) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }
    
    .modal-close-btn:hover,
    #calendar-modal .modal-close-btn:hover,
    #calendar-modal button.modal-close-btn:hover {
        background: rgba(79, 195, 247, 0.5) !important;
        box-shadow: 0 4px 16px rgba(79, 195, 247, 0.6) !important;
    }
}

/* ===== MODAL ADD TASK BUTTON ===== */
/* 
 * Stilul universal pentru butonul de adăugare task din modale
 * Folosit în: task-manager-modal, category-modal, etc.
 */

.modal-add-task-btn {
    background: var(--task-btn-bg, linear-gradient(135deg, rgba(79, 195, 247, 0.25), rgba(0, 212, 255, 0.2))) !important;
    border: 2px solid var(--task-btn-border, rgba(79, 195, 247, 0.5)) !important;
    color: var(--task-btn-color, var(--text-cyan)) !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.modal-add-task-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--task-btn-shadow-hover, rgba(79, 195, 247, 0.4)) !important;
    background: var(--task-btn-bg-hover, linear-gradient(135deg, rgba(79, 195, 247, 0.35), rgba(0, 212, 255, 0.3))) !important;
    border-color: var(--task-btn-border-hover, rgba(79, 195, 247, 0.8)) !important;
    color: var(--task-btn-color-hover, var(--text-cyan)) !important;
}

.modal-add-task-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 3px 12px var(--task-btn-shadow-active, rgba(79, 195, 247, 0.3)) !important;
}

.modal-add-task-btn:focus {
    outline: 2px solid var(--task-btn-outline, rgba(79, 195, 247, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling */
.modal-add-task-btn i {
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
}

.modal-add-task-btn:hover i {
    color: var(--task-btn-color-hover, var(--text-cyan)) !important;
    text-shadow: 0 0 8px var(--task-btn-text-shadow, rgba(79, 195, 247, 0.6)) !important;
    transform: scale(1.1) !important;
}

/* ===== MODAL DELETE EVENT BUTTON ===== */
/* 
 * Stilul universal pentru butonul de ștergere eveniment din modale
 * Folosit în: calendar-event-modal
 */

.modal-delete-event-btn {
    background: var(--delete-btn-bg, linear-gradient(135deg, rgba(255, 107, 107, 0.25), rgba(229, 62, 62, 0.2))) !important;
    border: 2px solid var(--delete-btn-border, rgba(255, 107, 107, 0.5)) !important;
    color: var(--delete-btn-color, #ff6b6b) !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.modal-delete-event-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--delete-btn-shadow-hover, rgba(255, 107, 107, 0.4)) !important;
    background: var(--delete-btn-bg-hover, linear-gradient(135deg, rgba(255, 107, 107, 0.35), rgba(229, 62, 62, 0.3))) !important;
    border-color: var(--delete-btn-border-hover, rgba(255, 107, 107, 0.8)) !important;
    color: var(--delete-btn-color-hover, #ff6b6b) !important;
}

.modal-delete-event-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 3px 12px var(--delete-btn-shadow-active, rgba(255, 107, 107, 0.3)) !important;
}

.modal-delete-event-btn:focus {
    outline: 2px solid var(--delete-btn-outline, rgba(255, 107, 107, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling */
.modal-delete-event-btn i {
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
}

.modal-delete-event-btn:hover i {
    color: var(--delete-btn-color-hover, #ff6b6b) !important;
    text-shadow: 0 0 8px var(--delete-btn-text-shadow, rgba(255, 107, 107, 0.6)) !important;
    transform: scale(1.1) !important;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .modal-add-task-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    
    .modal-add-task-btn i {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .modal-add-task-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    .modal-add-task-btn i {
        font-size: 12px !important;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    .modal-add-task-btn {
        transition: none !important;
    }
    
    .modal-add-task-btn:hover {
        transform: none !important;
    }
    
    .modal-add-task-btn:hover i {
        transform: none !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    .modal-add-task-btn {
    border: 2px solid var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.4), rgba(0, 212, 255, 0.3)) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }
    
    .modal-add-task-btn:hover {
    border: 2px solid var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.6), rgba(0, 212, 255, 0.5)) !important;
        box-shadow: 0 4px 16px rgba(79, 195, 247, 0.6) !important;
    }
}


/* ===== UNIVERSAL MODAL REFRESH BUTTON ===== */
/* 
 * Stilul universal pentru butoanele de refresh din toate modalele
 * Folosit în: calendar-modal, task-manager-modal, etc.
 */

.modal-refresh-btn,
#calendar-modal .modal-refresh-btn,
#calendar-modal button.modal-refresh-btn,
#calendar-modal .calendar-header-actions .modal-refresh-btn {
    background: var(--refresh-btn-bg, rgba(0, 255, 136, 0.1)) !important;
    border: 1px solid var(--refresh-btn-border, rgba(0, 255, 136, 0.3)) !important;
    color: var(--refresh-btn-color, var(--accent-green)) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 16px !important;
    position: relative !important;
    overflow: hidden !important;
}

.modal-refresh-btn:hover,
#calendar-modal .modal-refresh-btn:hover,
#calendar-modal button.modal-refresh-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--refresh-btn-shadow-hover, rgba(0, 255, 136, 0.3)) !important;
    background: var(--refresh-btn-bg-hover, rgba(0, 255, 136, 0.15)) !important;
    border-color: var(--refresh-btn-border-hover, rgba(0, 255, 136, 0.5)) !important;
}

.modal-refresh-btn:active,
#calendar-modal .modal-refresh-btn:active,
#calendar-modal button.modal-refresh-btn:active {
    transform: translateY(0) scale(0.95) !important;
    box-shadow: 0 2px 8px var(--refresh-btn-shadow-active, rgba(0, 255, 136, 0.2)) !important;
}

.modal-refresh-btn:focus,
#calendar-modal .modal-refresh-btn:focus,
#calendar-modal button.modal-refresh-btn:focus {
    outline: 2px solid var(--refresh-btn-outline, rgba(0, 255, 136, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling for refresh button */
.modal-refresh-btn i,
#calendar-modal .modal-refresh-btn i,
#calendar-modal button.modal-refresh-btn i {
    font-size: 16px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.3s ease !important;
}

.modal-refresh-btn:hover i,
#calendar-modal .modal-refresh-btn:hover i,
#calendar-modal button.modal-refresh-btn:hover i {
    color: var(--refresh-btn-color-hover, var(--accent-green)) !important;
    text-shadow: 0 0 8px var(--refresh-btn-text-shadow, rgba(0, 255, 136, 0.5)) !important;
    transform: rotate(180deg) !important;
}

/* Animation for refresh button */
.modal-refresh-btn::before,
#calendar-modal .modal-refresh-btn::before,
#calendar-modal button.modal-refresh-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background: rgba(0, 255, 136, 0.2) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: all 0.3s ease !important;
}

.modal-refresh-btn:hover::before,
#calendar-modal .modal-refresh-btn:hover::before,
#calendar-modal button.modal-refresh-btn:hover::before {
    width: 100% !important;
    height: 100% !important;
}

/* Responsive design for refresh button */
@media (max-width: 768px) {
    .modal-refresh-btn,
    #calendar-modal .modal-refresh-btn,
    #calendar-modal button.modal-refresh-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
    
    .modal-refresh-btn i,
    #calendar-modal .modal-refresh-btn i,
    #calendar-modal button.modal-refresh-btn i {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .modal-refresh-btn,
    #calendar-modal .modal-refresh-btn,
    #calendar-modal button.modal-refresh-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }
    
    .modal-refresh-btn i,
    #calendar-modal .modal-refresh-btn i,
    #calendar-modal button.modal-refresh-btn i {
        font-size: 12px !important;
    }
}

/* Accessibility for refresh button */
@media (prefers-reduced-motion: reduce) {
    .modal-refresh-btn,
    #calendar-modal .modal-refresh-btn,
    #calendar-modal button.modal-refresh-btn {
        transition: none !important;
    }
    
    .modal-refresh-btn:hover,
    #calendar-modal .modal-refresh-btn:hover,
    #calendar-modal button.modal-refresh-btn:hover {
        transform: none !important;
    }
    
    .modal-refresh-btn:hover i,
    #calendar-modal .modal-refresh-btn:hover i,
    #calendar-modal button.modal-refresh-btn:hover i {
        transform: none !important;
    }
}

/* High contrast mode for refresh button */
@media (prefers-contrast: high) {
    .modal-refresh-btn,
    #calendar-modal .modal-refresh-btn,
    #calendar-modal button.modal-refresh-btn {
        border-color: var(--accent-green) !important;
        background: rgba(0, 255, 136, 0.2) !important;
    }
    
    .modal-refresh-btn:hover,
    #calendar-modal .modal-refresh-btn:hover,
    #calendar-modal button.modal-refresh-btn:hover {
        background: rgba(0, 255, 136, 0.3) !important;
    }
}

/* ===== MODAL SHARE BUTTON ===== */
/* 
 * Stilul universal pentru butonul de partajare din modale
 * Folosit în: category-modal, task-modal, etc.
 * Buton rotund cu doar icon, similar cu modal-close-btn
 */

.modal-share-btn {
    background: var(--share-btn-bg, rgba(76, 175, 80, 0.1)) !important;
    border: 1px solid var(--share-btn-border, rgba(76, 175, 80, 0.3)) !important;
    color: var(--share-btn-color, #4caf50) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.modal-share-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--share-btn-shadow-hover, rgba(76, 175, 80, 0.3)) !important;
    background: var(--share-btn-bg-hover, rgba(76, 175, 80, 0.15)) !important;
    border-color: var(--share-btn-border-hover, rgba(76, 175, 80, 0.5)) !important;
}

.modal-share-btn:active {
    transform: translateY(0) scale(0.95) !important;
    box-shadow: 0 2px 8px var(--share-btn-shadow-active, rgba(76, 175, 80, 0.2)) !important;
}

.modal-share-btn:focus {
    outline: 2px solid var(--share-btn-outline, rgba(76, 175, 80, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling for share button */
.modal-share-btn i {
    font-size: 16px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.3s ease !important;
}

.modal-share-btn:hover i {
    color: var(--share-btn-color-hover, #4caf50) !important;
    text-shadow: 0 0 8px var(--share-btn-text-shadow, rgba(76, 175, 80, 0.5)) !important;
    transform: scale(1.1) !important;
}

/* Animation for share button */
.modal-share-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background: rgba(76, 175, 80, 0.2) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: all 0.3s ease !important;
}

.modal-share-btn:hover::before {
    width: 100% !important;
    height: 100% !important;
}

/* ===== MODAL TOGGLE BUTTON ===== */
/* 
 * Stilul universal pentru butoanele de toggle (ascunde/afișează) din modale
 * Folosit în: category-modal pentru hide/show completed tasks
 * Buton rotund cu doar icon, similar cu modal-close-btn
 */

.modal-toggle-btn {
    background: var(--toggle-btn-bg, rgba(255, 152, 0, 0.1)) !important;
    border: 1px solid var(--toggle-btn-border, rgba(255, 152, 0, 0.3)) !important;
    color: var(--toggle-btn-color, #ff9800) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.modal-toggle-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--toggle-btn-shadow-hover, rgba(255, 152, 0, 0.3)) !important;
    background: var(--toggle-btn-bg-hover, rgba(255, 152, 0, 0.15)) !important;
    border-color: var(--toggle-btn-border-hover, rgba(255, 152, 0, 0.5)) !important;
}

.modal-toggle-btn:active {
    transform: translateY(0) scale(0.95) !important;
    box-shadow: 0 2px 8px var(--toggle-btn-shadow-active, rgba(255, 152, 0, 0.2)) !important;
}

.modal-toggle-btn:focus {
    outline: 2px solid var(--toggle-btn-outline, rgba(255, 152, 0, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling for toggle button */
.modal-toggle-btn i {
    font-size: 16px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.3s ease !important;
}

.modal-toggle-btn:hover i {
    color: var(--toggle-btn-color-hover, #ff9800) !important;
    text-shadow: 0 0 8px var(--toggle-btn-text-shadow, rgba(255, 152, 0, 0.5)) !important;
    transform: scale(1.1) !important;
}

/* Animation for toggle button */
.modal-toggle-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background: rgba(255, 152, 0, 0.2) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: all 0.3s ease !important;
}

.modal-toggle-btn:hover::before {
    width: 100% !important;
    height: 100% !important;
}

/* ===== MODAL PAGINATION BUTTON ===== */
/* 
 * Stilul universal pentru butoanele de paginare din modale
 * Folosit în: category-modal pentru navigarea între pagini
 */

.modal-pagination-btn {
    background: var(--pagination-btn-bg, linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(0, 212, 255, 0.15))) !important;
    border: 1px solid var(--pagination-btn-border, rgba(79, 195, 247, 0.5)) !important;
    color: var(--pagination-btn-color, var(--text-cyan)) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.modal-pagination-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--pagination-btn-shadow-hover, rgba(79, 195, 247, 0.3)) !important;
    background: var(--pagination-btn-bg-hover, linear-gradient(135deg, rgba(79, 195, 247, 0.3), rgba(0, 212, 255, 0.25))) !important;
    border-color: var(--pagination-btn-border-hover, rgba(79, 195, 247, 0.7)) !important;
    color: var(--pagination-btn-color-hover, var(--text-cyan)) !important;
}

.modal-pagination-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px var(--pagination-btn-shadow-active, rgba(79, 195, 247, 0.2)) !important;
}

.modal-pagination-btn:focus {
    outline: 2px solid var(--pagination-btn-outline, rgba(79, 195, 247, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling */
.modal-pagination-btn i {
    font-size: 10px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
}

.modal-pagination-btn:hover i {
    color: var(--pagination-btn-color-hover, var(--text-cyan)) !important;
    text-shadow: 0 0 6px var(--pagination-btn-text-shadow, rgba(79, 195, 247, 0.5)) !important;
    transform: scale(1.1) !important;
}

/* ===== RESPONSIVE DESIGN FOR NEW BUTTONS ===== */
@media (max-width: 768px) {
    .modal-share-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
    
    .modal-share-btn i {
        font-size: 14px !important;
    }
    
    .modal-toggle-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
    
    .modal-toggle-btn i {
        font-size: 14px !important;
    }
    
    .modal-pagination-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
    
    .modal-pagination-btn i {
        font-size: 9px !important;
    }
}

@media (max-width: 480px) {
    .modal-share-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }
    
    .modal-share-btn i {
        font-size: 12px !important;
    }
    
    .modal-toggle-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }
    
    .modal-toggle-btn i {
        font-size: 12px !important;
    }
    
    .modal-pagination-btn {
        padding: 5px 10px !important;
        font-size: 10px !important;
    }
    
    .modal-pagination-btn i {
        font-size: 8px !important;
    }
}

/* ===== ACCESSIBILITY FOR NEW BUTTONS ===== */
@media (prefers-reduced-motion: reduce) {
    .modal-share-btn,
    .modal-toggle-btn,
    .modal-pagination-btn {
        transition: none !important;
    }
    
    .modal-share-btn:hover,
    .modal-toggle-btn:hover,
    .modal-pagination-btn:hover {
        transform: none !important;
    }
    
    .modal-share-btn:hover i,
    .modal-toggle-btn:hover i,
    .modal-pagination-btn:hover i {
        transform: none !important;
    }
}

/* ===== HIGH CONTRAST MODE FOR NEW BUTTONS ===== */
@media (prefers-contrast: high) {
    .modal-share-btn {
        border-color: #4caf50 !important;
        background: rgba(76, 175, 80, 0.2) !important;
    }
    
    .modal-share-btn:hover {
        background: rgba(76, 175, 80, 0.3) !important;
    }
    
    .modal-toggle-btn {
        border-color: #ff9800 !important;
        background: rgba(255, 152, 0, 0.2) !important;
    }
    
    .modal-toggle-btn:hover {
        background: rgba(255, 152, 0, 0.3) !important;
    }
    
    .modal-pagination-btn {
    border-color: var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.3), rgba(0, 212, 255, 0.2)) !important;
    }
    
    .modal-pagination-btn:hover {
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.5), rgba(0, 212, 255, 0.4)) !important;
    }
}

/* ===== LIVE EDITOR BUTTON ===== */
.live-editor-btn {
    background: var(--live-editor-btn-bg, rgba(0, 255, 136, 0.1)) !important;
    border: 1px solid var(--live-editor-btn-border, rgba(0, 255, 136, 0.3)) !important;
    color: var(--live-editor-btn-color, var(--accent-green)) !important;
    width: 44px !important;
    right: 650px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 16px !important;
    position: absolute !important;
    overflow: hidden !important;
}

.live-editor-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--live-editor-btn-shadow-hover, rgba(0, 255, 136, 0.4)) !important;
    background: var(--live-editor-btn-bg-hover, rgba(0, 255, 136, 0.15)) !important;
    border-color: var(--live-editor-btn-border-hover, rgba(0, 255, 136, 0.5)) !important;
}

.live-editor-btn:active {
    transform: translateY(0) scale(0.95) !important;
    box-shadow: 0 4px 15px var(--live-editor-btn-shadow-active, rgba(0, 255, 136, 0.3)) !important;
}

.live-editor-btn:focus {
    outline: 2px solid var(--live-editor-btn-outline, rgba(0, 255, 136, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling for live editor button */
.live-editor-btn i {
    font-size: 16px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.3s ease !important;
}

.live-editor-btn:hover i {
    color: var(--live-editor-btn-color-hover, var(--accent-green)) !important;
    text-shadow: 0 0 12px var(--live-editor-btn-text-shadow, rgba(0, 255, 136, 0.6)) !important;
    transform: scale(1.1) !important;
}

/* Animation for live editor button */
.live-editor-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background: rgba(0, 255, 136, 0.2) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: all 0.3s ease !important;
}

.live-editor-btn:hover::before {
    width: 100% !important;
    height: 100% !important;
}

/* Responsive design for live editor button */
@media (max-width: 768px) {
    .live-editor-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
    
    .live-editor-btn i {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .live-editor-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }
    
    .live-editor-btn i {
        font-size: 12px !important;
    }
}

/* ===== LIVE EDITOR BUTTON CONTAINER ===== */
.live-editor-button-container {
    position: fixed !important;
    top: 380px !important;
    right: 720px !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

/* ===== TOOLTIP STYLING ===== */
.btn-tooltip {
    position: absolute !important;
    right: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: var(--accent-green) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
}

.btn-tooltip::before {
    content: '' !important;
    position: absolute !important;
    right: -6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-left: 6px solid rgba(0, 0, 0, 0.9) !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
}

.live-editor-btn:hover .btn-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    right: 55px !important;
}

/* Responsive tooltip */
@media (max-width: 768px) {
    .live-editor-button-container {
        top: 70px !important;
        right: 15px !important;
    }
    
    .btn-tooltip {
        display: none !important;
    }
}

/* ===== PRIORITY FILTERS CONTAINER ===== */
/* 
 * Stilul universal pentru container-ul de filtre de prioritate
 * Folosit în: task-modal, category-modal, etc.
 */

.priority-filters-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* ===== PRIORITY FILTER CHECKBOX ===== */
/* 
 * Stilul universal pentru checkbox-urile de filtrare după prioritate
 * Folosit în: task-modal pentru filtrarea task-urilor
 */

.priority-filter-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(0, 212, 255, 0.4) !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 10px !important;
    color: #00d4ff !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(10px) !important;
}

.priority-filter-checkbox::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent) !important;
    transition: left 0.5s ease !important;
}

.priority-filter-checkbox:hover::before {
    left: 100% !important;
}

.priority-filter-checkbox:hover {
    background: rgba(0, 212, 255, 0.2) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3) !important;
}

.priority-filter-checkbox.checked {
    background: rgba(0, 212, 255, 0.15) !important;
    border-color: rgba(0, 212, 255, 0.6) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2) !important;
}

.priority-filter-checkbox.checked:hover {
    background: rgba(0, 212, 255, 0.25) !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4) !important;
}

.priority-filter-checkbox input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    accent-color: #00d4ff !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
}

.priority-filter-checkbox input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.5) !important;
}

.priority-filter-checkbox i {
    font-size: 9px !important;
    color: inherit !important;
    transition: all 0.3s ease !important;
}

.priority-filter-checkbox:hover i {
    transform: scale(1.1) !important;
}

.priority-filter-checkbox span {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: inherit !important;
    transition: all 0.3s ease !important;
}

/* ===== PRIORITY-SPECIFIC COLORS ===== */

/* Urgent Priority */
.priority-filter-checkbox[data-priority="urgent"] {
    color: #ff5722 !important;
    border-color: rgba(255, 87, 34, 0.4) !important;
}

.priority-filter-checkbox[data-priority="urgent"]:hover {
    background: rgba(255, 87, 34, 0.2) !important;
    box-shadow: 0 0 15px rgba(255, 87, 34, 0.3) !important;
}

.priority-filter-checkbox[data-priority="urgent"].checked {
    background: rgba(255, 87, 34, 0.15) !important;
    border-color: rgba(255, 87, 34, 0.6) !important;
    box-shadow: 0 0 10px rgba(255, 87, 34, 0.2) !important;
}

.priority-filter-checkbox[data-priority="urgent"] input[type="checkbox"] {
    accent-color: #ff5722 !important;
}

/* High Priority */
.priority-filter-checkbox[data-priority="high"] {
    color: #f44336 !important;
    border-color: rgba(244, 67, 54, 0.4) !important;
}

.priority-filter-checkbox[data-priority="high"]:hover {
    background: rgba(244, 67, 54, 0.2) !important;
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.3) !important;
}

.priority-filter-checkbox[data-priority="high"].checked {
    background: rgba(244, 67, 54, 0.15) !important;
    border-color: rgba(244, 67, 54, 0.6) !important;
    box-shadow: 0 0 10px rgba(244, 67, 54, 0.2) !important;
}

.priority-filter-checkbox[data-priority="high"] input[type="checkbox"] {
    accent-color: #f44336 !important;
}

/* Medium Priority */
.priority-filter-checkbox[data-priority="medium"] {
    color: #ff9800 !important;
    border-color: rgba(255, 152, 0, 0.4) !important;
}

.priority-filter-checkbox[data-priority="medium"]:hover {
    background: rgba(255, 152, 0, 0.2) !important;
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.3) !important;
}

.priority-filter-checkbox[data-priority="medium"].checked {
    background: rgba(255, 152, 0, 0.15) !important;
    border-color: rgba(255, 152, 0, 0.6) !important;
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.2) !important;
}

.priority-filter-checkbox[data-priority="medium"] input[type="checkbox"] {
    accent-color: #ff9800 !important;
}

/* Low Priority */
.priority-filter-checkbox[data-priority="low"] {
    color: #4caf50 !important;
    border-color: rgba(76, 175, 80, 0.4) !important;
}

.priority-filter-checkbox[data-priority="low"]:hover {
    background: rgba(76, 175, 80, 0.2) !important;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.3) !important;
}

.priority-filter-checkbox[data-priority="low"].checked {
    background: rgba(76, 175, 80, 0.15) !important;
    border-color: rgba(76, 175, 80, 0.6) !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.2) !important;
}

.priority-filter-checkbox[data-priority="low"] input[type="checkbox"] {
    accent-color: #4caf50 !important;
}

/* ===== RESPONSIVE DESIGN FOR PRIORITY FILTERS ===== */
@media (max-width: 768px) {
    .priority-filters-container {
        gap: 6px !important;
    }
    
    .priority-filter-checkbox {
        padding: 5px 8px !important;
        font-size: 9px !important;
    }
    
    .priority-filter-checkbox span {
        font-size: 9px !important;
    }
    
    .priority-filter-checkbox i {
        font-size: 8px !important;
    }
}

@media (max-width: 480px) {
    .priority-filters-container {
        gap: 4px !important;
        flex-wrap: wrap !important;
    }
    
    .priority-filter-checkbox {
        padding: 4px 6px !important;
        font-size: 8px !important;
    }
    
    .priority-filter-checkbox span {
        font-size: 8px !important;
    }
    
    .priority-filter-checkbox i {
        font-size: 7px !important;
    }
}

/* ===== ACCESSIBILITY FOR PRIORITY FILTERS ===== */
@media (prefers-reduced-motion: reduce) {
    .priority-filter-checkbox {
        transition: none !important;
    }
    
    .priority-filter-checkbox:hover {
        transform: none !important;
    }
    
    .priority-filter-checkbox:hover i {
        transform: none !important;
    }
    
    .priority-filter-checkbox::before {
        display: none !important;
    }
}

/* ===== HIGH CONTRAST MODE FOR PRIORITY FILTERS ===== */
@media (prefers-contrast: high) {
    .priority-filter-checkbox {
        border-width: 2px !important;
        background: rgba(0, 0, 0, 0.2) !important;
    }
    
    .priority-filter-checkbox.checked {
        border-width: 2px !important;
        background: rgba(0, 212, 255, 0.3) !important;
    }
    
    .priority-filter-checkbox[data-priority="urgent"] {
        border-color: #ff5722 !important;
    }
    
    .priority-filter-checkbox[data-priority="urgent"].checked {
        background: rgba(255, 87, 34, 0.3) !important;
    }
    
    .priority-filter-checkbox[data-priority="high"] {
        border-color: #f44336 !important;
    }
    
    .priority-filter-checkbox[data-priority="high"].checked {
        background: rgba(244, 67, 54, 0.3) !important;
    }
    
    .priority-filter-checkbox[data-priority="medium"] {
        border-color: #ff9800 !important;
    }
    
    .priority-filter-checkbox[data-priority="medium"].checked {
        background: rgba(255, 152, 0, 0.3) !important;
    }
    
    .priority-filter-checkbox[data-priority="low"] {
        border-color: #4caf50 !important;
    }
    
    .priority-filter-checkbox[data-priority="low"].checked {
        background: rgba(76, 175, 80, 0.3) !important;
    }
}

/* ===== UNIVERSAL CALENDAR NAVIGATION BUTTONS ===== */
/* 
 * Stilul universal pentru butoanele de navigare din calendar
 * Folosit în: calendar-modal, calendar-event-modal
 */

.calendar-nav-btn {
    background: var(--calendar-nav-btn-bg, linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(0, 212, 255, 0.15))) !important;
    border: 1px solid var(--calendar-nav-btn-border, rgba(79, 195, 247, 0.5)) !important;
    color: var(--calendar-nav-btn-color, var(--text-cyan)) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.calendar-nav-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--calendar-nav-btn-shadow-hover, rgba(79, 195, 247, 0.3)) !important;
    background: var(--calendar-nav-btn-bg-hover, linear-gradient(135deg, rgba(79, 195, 247, 0.3), rgba(0, 212, 255, 0.25))) !important;
    border-color: var(--calendar-nav-btn-border-hover, rgba(79, 195, 247, 0.7)) !important;
    color: var(--calendar-nav-btn-color-hover, var(--text-cyan)) !important;
}

.calendar-nav-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px var(--calendar-nav-btn-shadow-active, rgba(79, 195, 247, 0.2)) !important;
}

.calendar-nav-btn:focus {
    outline: 2px solid var(--calendar-nav-btn-outline, rgba(79, 195, 247, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling */
.calendar-nav-btn i {
    font-size: 10px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
}

.calendar-nav-btn:hover i {
    color: var(--calendar-nav-btn-color-hover, var(--text-cyan)) !important;
    text-shadow: 0 0 6px var(--calendar-nav-btn-text-shadow, rgba(79, 195, 247, 0.5)) !important;
    transform: scale(1.1) !important;
}

/* ===== RESPONSIVE DESIGN FOR CALENDAR NAV BUTTONS ===== */
@media (max-width: 768px) {
    .calendar-nav-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
    
    .calendar-nav-btn i {
        font-size: 9px !important;
    }
}

@media (max-width: 480px) {
    .calendar-nav-btn {
        padding: 5px 10px !important;
        font-size: 10px !important;
    }
    
    .calendar-nav-btn i {
        font-size: 8px !important;
    }
}

/* ===== ACCESSIBILITY FOR CALENDAR NAV BUTTONS ===== */
@media (prefers-reduced-motion: reduce) {
    .calendar-nav-btn {
        transition: none !important;
    }
    
    .calendar-nav-btn:hover {
        transform: none !important;
    }
    
    .calendar-nav-btn:hover i {
        transform: none !important;
    }
}

/* ===== HIGH CONTRAST MODE FOR CALENDAR NAV BUTTONS ===== */
@media (prefers-contrast: high) {
    .calendar-nav-btn {
    border: 2px solid var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.4), rgba(0, 212, 255, 0.3)) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }
    
    .calendar-nav-btn:hover {
    border: 2px solid var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.6), rgba(0, 212, 255, 0.5)) !important;
        box-shadow: 0 4px 16px rgba(79, 195, 247, 0.6) !important;
    }
}

/* ===== UNIVERSAL CALENDAR VIEW BUTTONS ===== */
/* 
 * Stilul universal pentru butoanele de view din calendar (previous/next)
 * Folosit în: calendar-modal, calendar-event-modal
 */

.calendar-view-btn {
    background: var(--calendar-view-btn-bg, linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(0, 212, 255, 0.15))) !important;
    border: 1px solid var(--calendar-view-btn-border, rgba(79, 195, 247, 0.5)) !important;
    color: var(--calendar-view-btn-color, var(--text-cyan)) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.calendar-view-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--calendar-view-btn-shadow-hover, rgba(79, 195, 247, 0.3)) !important;
    background: var(--calendar-view-btn-bg-hover, linear-gradient(135deg, rgba(79, 195, 247, 0.3), rgba(0, 212, 255, 0.25))) !important;
    border-color: var(--calendar-view-btn-border-hover, rgba(79, 195, 247, 0.7)) !important;
    color: var(--calendar-view-btn-color-hover, var(--text-cyan)) !important;
}

.calendar-view-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px var(--calendar-view-btn-shadow-active, rgba(79, 195, 247, 0.2)) !important;
}

.calendar-view-btn:focus {
    outline: 2px solid var(--calendar-view-btn-outline, rgba(79, 195, 247, 0.5)) !important;
    outline-offset: 2px !important;
}

.calendar-view-btn.active {
    background: var(--calendar-view-btn-bg-active, linear-gradient(135deg, rgba(79, 195, 247, 0.4), rgba(0, 212, 255, 0.3))) !important;
    color: var(--calendar-view-btn-color-active, #ffffff) !important;
    border-color: var(--calendar-view-btn-border-active, rgba(79, 195, 247, 0.8)) !important;
    box-shadow: 0 2px 8px var(--calendar-view-btn-shadow-active, rgba(79, 195, 247, 0.3)) !important;
}

/* Icon styling */
.calendar-view-btn i {
    font-size: 10px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
}

.calendar-view-btn:hover i {
    color: var(--calendar-view-btn-color-hover, var(--text-cyan)) !important;
    text-shadow: 0 0 6px var(--calendar-view-btn-text-shadow, rgba(79, 195, 247, 0.5)) !important;
    transform: scale(1.1) !important;
}

.calendar-view-btn.active i {
    color: var(--calendar-view-btn-color-active, #ffffff) !important;
    text-shadow: 0 0 6px var(--calendar-view-btn-text-shadow-active, rgba(79, 195, 247, 0.8)) !important;
}

/* ===== RESPONSIVE DESIGN FOR CALENDAR VIEW BUTTONS ===== */
@media (max-width: 768px) {
    .calendar-view-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
    
    .calendar-view-btn i {
        font-size: 9px !important;
    }
}

@media (max-width: 480px) {
    .calendar-view-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    
    .calendar-view-btn i {
        font-size: 8px !important;
    }
}

/* ===== ACCESSIBILITY FOR CALENDAR VIEW BUTTONS ===== */
@media (prefers-reduced-motion: reduce) {
    .calendar-view-btn {
        transition: none !important;
    }
    
    .calendar-view-btn:hover {
        transform: none !important;
    }
    
    .calendar-view-btn:hover i {
        transform: none !important;
    }
}

/* ===== HIGH CONTRAST MODE FOR CALENDAR VIEW BUTTONS ===== */
@media (prefers-contrast: high) {
    .calendar-view-btn {
    border: 2px solid var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.4), rgba(0, 212, 255, 0.3)) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }
    
    .calendar-view-btn:hover {
    border: 2px solid var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.6), rgba(0, 212, 255, 0.5)) !important;
        box-shadow: 0 4px 16px rgba(79, 195, 247, 0.6) !important;
    }
    
    .calendar-view-btn.active {
        border: 2px solid var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.8), rgba(0, 212, 255, 0.7)) !important;
        box-shadow: 0 4px 16px rgba(79, 195, 247, 0.8) !important;
    }
}

/* ===== CALENDAR TODAY BUTTON ===== */
/* 
 * Butonul pentru navigarea la ziua de azi
 * Folosit în: calendar-modal
 */

.calendar-today-btn {
    background: var(--calendar-today-btn-bg, linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.15))) !important;
    border: 1px solid var(--calendar-today-btn-border, rgba(34, 197, 94, 0.5)) !important;
    color: var(--calendar-today-btn-color, #22c55e) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    min-width: 60px !important;
}

.calendar-today-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--calendar-today-btn-shadow-hover, rgba(34, 197, 94, 0.3)) !important;
    background: var(--calendar-today-btn-bg-hover, linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.25))) !important;
    border-color: var(--calendar-today-btn-border-hover, rgba(34, 197, 94, 0.7)) !important;
    color: var(--calendar-today-btn-color-hover, #22c55e) !important;
}

.calendar-today-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px var(--calendar-today-btn-shadow-active, rgba(34, 197, 94, 0.2)) !important;
}

.calendar-today-btn:focus {
    outline: 2px solid var(--calendar-today-btn-outline, rgba(34, 197, 94, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling */
.calendar-today-btn i {
    font-size: 10px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
}

.calendar-today-btn:hover i {
    color: var(--calendar-today-btn-color-hover, #22c55e) !important;
    text-shadow: 0 0 6px var(--calendar-today-btn-text-shadow, rgba(34, 197, 94, 0.5)) !important;
    transform: scale(1.1) !important;
}

/* ===== RESPONSIVE DESIGN FOR CALENDAR TODAY BUTTON ===== */
@media (max-width: 768px) {
    .calendar-today-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
    
    .calendar-today-btn i {
        font-size: 9px !important;
    }
}

@media (max-width: 480px) {
    .calendar-today-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    
    .calendar-today-btn i {
        font-size: 8px !important;
    }
}

/* ===== ACCESSIBILITY FOR CALENDAR TODAY BUTTON ===== */
@media (prefers-reduced-motion: reduce) {
    .calendar-today-btn {
        transition: none !important;
    }
    
    .calendar-today-btn:hover {
        transform: none !important;
    }
    
    .calendar-today-btn:hover i {
        transform: none !important;
    }
}

/* ===== HIGH CONTRAST MODE FOR CALENDAR TODAY BUTTON ===== */
@media (prefers-contrast: high) {
    .calendar-today-btn {
        border: 2px solid #22c55e !important;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(22, 163, 74, 0.3)) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }
    
    .calendar-today-btn:hover {
        border: 2px solid #22c55e !important;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.6), rgba(22, 163, 74, 0.5)) !important;
        box-shadow: 0 4px 16px rgba(34, 197, 94, 0.6) !important;
    }
}

/* ===== UNIVERSAL DAY NAVIGATION BUTTONS ===== */
/* 
 * Stilul universal pentru butoanele de navigare zilnică din calendar
 * Folosit în: calendar-modal, calendar-event-modal
 */

.day-nav-btn {
    background: var(--day-nav-btn-bg, linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(0, 212, 255, 0.15))) !important;
    border: 1px solid var(--day-nav-btn-border, rgba(79, 195, 247, 0.5)) !important;
    color: var(--day-nav-btn-color, var(--text-cyan)) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.day-nav-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--day-nav-btn-shadow-hover, rgba(79, 195, 247, 0.3)) !important;
    background: var(--day-nav-btn-bg-hover, linear-gradient(135deg, rgba(79, 195, 247, 0.3), rgba(0, 212, 255, 0.25))) !important;
    border-color: var(--day-nav-btn-border-hover, rgba(79, 195, 247, 0.7)) !important;
    color: var(--day-nav-btn-color-hover, var(--text-cyan)) !important;
}

.day-nav-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px var(--day-nav-btn-shadow-active, rgba(79, 195, 247, 0.2)) !important;
}

.day-nav-btn:focus {
    outline: 2px solid var(--day-nav-btn-outline, rgba(79, 195, 247, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling */
.day-nav-btn i {
    font-size: 11px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
}

.day-nav-btn:hover i {
    color: var(--day-nav-btn-color-hover, var(--text-cyan)) !important;
    text-shadow: 0 0 6px var(--day-nav-btn-text-shadow, rgba(79, 195, 247, 0.5)) !important;
    transform: scale(1.1) !important;
}

/* ===== RESPONSIVE DESIGN FOR DAY NAV BUTTONS ===== */
@media (max-width: 768px) {
    .day-nav-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    .day-nav-btn i {
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .day-nav-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
    
    .day-nav-btn i {
        font-size: 9px !important;
    }
}

/* ===== ACCESSIBILITY FOR DAY NAV BUTTONS ===== */
@media (prefers-reduced-motion: reduce) {
    .day-nav-btn {
        transition: none !important;
    }
    
    .day-nav-btn:hover {
        transform: none !important;
    }
    
    .day-nav-btn:hover i {
        transform: none !important;
    }
}

/* ===== HIGH CONTRAST MODE FOR DAY NAV BUTTONS ===== */
@media (prefers-contrast: high) {
    .day-nav-btn {
    border: 2px solid var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.4), rgba(0, 212, 255, 0.3)) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }
    
    .day-nav-btn:hover {
    border: 2px solid var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.6), rgba(0, 212, 255, 0.5)) !important;
        box-shadow: 0 4px 16px rgba(79, 195, 247, 0.6) !important;
    }
}

/* ===== UNIVERSAL EDIT AND DELETE BUTTONS ===== */
/* 
 * Stilul universal pentru butoanele de editare și ștergere din evenimente
 * Folosit în: calendar-modal, task-modal, etc.
 */

.event-edit-btn {
    background: var(--event-edit-btn-bg, linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(0, 212, 255, 0.15))) !important;
    border: 1px solid var(--event-edit-btn-border, rgba(79, 195, 247, 0.3)) !important;
    color: var(--event-edit-btn-color, rgb(79, 195, 247)) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.event-edit-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px var(--event-edit-btn-shadow-hover, rgba(79, 195, 247, 0.3)) !important;
    background: var(--event-edit-btn-bg-hover, linear-gradient(135deg, rgba(79, 195, 247, 0.3), rgba(0, 212, 255, 0.25))) !important;
    border-color: var(--event-edit-btn-border-hover, rgba(79, 195, 247, 0.5)) !important;
    color: var(--event-edit-btn-color-hover, rgb(79, 195, 247)) !important;
}

.event-edit-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 1px 4px var(--event-edit-btn-shadow-active, rgba(79, 195, 247, 0.2)) !important;
}

.event-edit-btn:focus {
    outline: 2px solid var(--event-edit-btn-outline, rgba(79, 195, 247, 0.5)) !important;
    outline-offset: 1px !important;
}

/* Icon styling for edit button */
.event-edit-btn i {
    font-size: 8px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
}

.event-edit-btn:hover i {
    color: var(--event-edit-btn-color-hover, rgb(79, 195, 247)) !important;
    text-shadow: 0 0 4px var(--event-edit-btn-text-shadow, rgba(79, 195, 247, 0.5)) !important;
    transform: scale(1.1) !important;
}

.event-delete-btn {
    background: var(--event-delete-btn-bg, linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 87, 34, 0.15))) !important;
    border: 1px solid var(--event-delete-btn-border, rgba(255, 107, 107, 0.3)) !important;
    color: var(--event-delete-btn-color, #ff6b6b) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.event-delete-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px var(--event-delete-btn-shadow-hover, rgba(255, 107, 107, 0.3)) !important;
    background: var(--event-delete-btn-bg-hover, linear-gradient(135deg, rgba(255, 107, 107, 0.3), rgba(255, 87, 34, 0.25))) !important;
    border-color: var(--event-delete-btn-border-hover, rgba(255, 107, 107, 0.5)) !important;
    color: var(--event-delete-btn-color-hover, #ff6b6b) !important;
}

.event-delete-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 1px 4px var(--event-delete-btn-shadow-active, rgba(255, 107, 107, 0.2)) !important;
}

.event-delete-btn:focus {
    outline: 2px solid var(--event-delete-btn-outline, rgba(255, 107, 107, 0.5)) !important;
    outline-offset: 1px !important;
}

/* Icon styling for delete button */
.event-delete-btn i {
    font-size: 8px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
}

.event-delete-btn:hover i {
    color: var(--event-delete-btn-color-hover, #ff6b6b) !important;
    text-shadow: 0 0 4px var(--event-delete-btn-text-shadow, rgba(255, 107, 107, 0.5)) !important;
    transform: scale(1.1) !important;
}

/* ===== RESPONSIVE DESIGN FOR EDIT/DELETE BUTTONS ===== */
@media (max-width: 768px) {
    .event-edit-btn,
    .event-delete-btn {
        padding: 3px 6px !important;
        font-size: 9px !important;
    }
    
    .event-edit-btn i,
    .event-delete-btn i {
        font-size: 7px !important;
    }
}

@media (max-width: 480px) {
    .event-edit-btn,
    .event-delete-btn {
        padding: 2px 5px !important;
        font-size: 8px !important;
    }
    
    .event-edit-btn i,
    .event-delete-btn i {
        font-size: 6px !important;
    }
}

/* ===== ACCESSIBILITY FOR EDIT/DELETE BUTTONS ===== */
@media (prefers-reduced-motion: reduce) {
    .event-edit-btn,
    .event-delete-btn {
        transition: none !important;
    }
    
    .event-edit-btn:hover,
    .event-delete-btn:hover {
        transform: none !important;
    }
    
    .event-edit-btn:hover i,
    .event-delete-btn:hover i {
        transform: none !important;
    }
}

/* ===== HIGH CONTRAST MODE FOR EDIT/DELETE BUTTONS ===== */
@media (prefers-contrast: high) {
    .event-edit-btn {
        border: 2px solid rgb(79, 195, 247) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.4), rgba(0, 212, 255, 0.3)) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    }
    
    .event-edit-btn:hover {
        border: 2px solid rgb(79, 195, 247) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.6), rgba(0, 212, 255, 0.5)) !important;
        box-shadow: 0 4px 12px rgba(79, 195, 247, 0.6) !important;
    }
    
    .event-delete-btn {
        border: 2px solid #ff6b6b !important;
        background: linear-gradient(135deg, rgba(255, 107, 107, 0.4), rgba(255, 87, 34, 0.3)) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    }
    
    .event-delete-btn:hover {
        border: 2px solid #ff6b6b !important;
        background: linear-gradient(135deg, rgba(255, 107, 107, 0.6), rgba(255, 87, 34, 0.5)) !important;
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.6) !important;
    }
}

/* ===== UNIVERSAL WEEK NAVIGATION BUTTONS ===== */
/* 
 * Stilul universal pentru butoanele de navigare săptămânală din calendar
 * Folosit în: calendar-modal, calendar-event-modal
 */

.week-nav-btn {
    background: var(--week-nav-btn-bg, linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(0, 212, 255, 0.15))) !important;
    border: 1px solid var(--week-nav-btn-border, rgba(79, 195, 247, 0.5)) !important;
    color: var(--week-nav-btn-color, var(--text-cyan)) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.week-nav-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--week-nav-btn-shadow-hover, rgba(79, 195, 247, 0.3)) !important;
    background: var(--week-nav-btn-bg-hover, linear-gradient(135deg, rgba(79, 195, 247, 0.3), rgba(0, 212, 255, 0.25))) !important;
    border-color: var(--week-nav-btn-border-hover, rgba(79, 195, 247, 0.7)) !important;
    color: var(--week-nav-btn-color-hover, var(--text-cyan)) !important;
}

.week-nav-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px var(--week-nav-btn-shadow-active, rgba(79, 195, 247, 0.2)) !important;
}

.week-nav-btn:focus {
    outline: 2px solid var(--week-nav-btn-outline, rgba(79, 195, 247, 0.5)) !important;
    outline-offset: 2px !important;
}

/* Icon styling */
.week-nav-btn i {
    font-size: 10px !important;
    line-height: 1 !important;
    color: inherit !important;
    transition: all 0.2s ease !important;
}

.week-nav-btn:hover i {
    color: var(--week-nav-btn-color-hover, var(--text-cyan)) !important;
    text-shadow: 0 0 6px var(--week-nav-btn-text-shadow, rgba(79, 195, 247, 0.5)) !important;
    transform: scale(1.1) !important;
}

/* ===== RESPONSIVE DESIGN FOR WEEK NAV BUTTONS ===== */
@media (max-width: 768px) {
    .week-nav-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
    
    .week-nav-btn i {
        font-size: 9px !important;
    }
}

@media (max-width: 480px) {
    .week-nav-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    
    .week-nav-btn i {
        font-size: 8px !important;
    }
}

/* ===== ACCESSIBILITY FOR WEEK NAV BUTTONS ===== */
@media (prefers-reduced-motion: reduce) {
    .week-nav-btn {
        transition: none !important;
    }
    
    .week-nav-btn:hover {
        transform: none !important;
    }
    
    .week-nav-btn:hover i {
        transform: none !important;
    }
}

/* ===== HIGH CONTRAST MODE FOR WEEK NAV BUTTONS ===== */
@media (prefers-contrast: high) {
    .week-nav-btn {
    border: 2px solid var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.4), rgba(0, 212, 255, 0.3)) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }
    
    .week-nav-btn:hover {
    border: 2px solid var(--text-cyan) !important;
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.6), rgba(0, 212, 255, 0.5)) !important;
        box-shadow: 0 4px 16px rgba(79, 195, 247, 0.6) !important;
    }
}